Flutter呼叫表单保存功能来自另一个文件

本文介绍了Flutter呼叫表单保存功能来自另一个文件的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我有此事件表单，用于创建或编辑事件数据. 保存"按钮位于应用程序栏操作内部，而表单位于主体内部.在这个项目中，所有小部件都放在不同的文件中.当我点击EventFromAppBar.dart中的保存按钮时，如何在EventFormForm.dart中运行保存功能?这是结构:

I have this event form, it's to create or edit events data. The save button is inside the app bar action, and the form is inside the body. In this project, I have all of the widgets in different files. How do I run the save function inside EventFormForm.dart when I tap the save button inside EventFromAppBar.dart?This is the structure :

这些是我的代码:

EventForm.dart

class EventForm extends StatelessWidget {
  // Some Code

  // Some Const

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: EventFormAppBar(
// Some Params
),
      body: EventFormBody(
// Some Params
)
    );
  }
}

EventFormAppBar.dart

class EventFormAppBar extends PreferredSize{
  // Some Code

  // Some Const

  // Some Code

  @override
  Widget build(BuildContext context) {
    return AppBar(
      // Some Code
      actions: <Widget>[
        IconButton(
          icon: Icon(Icons.save),
          onPressed: () {

          }
        )
      ]
    );
  }
}

EventFormBody.dart

    class EventFormBody extends StatelessWidget {
      // Some Code
    
      // Some Const
    
      @override
      Widget build(BuildContext context) {
        return SafeArea(
          child: SingleChildScrollView(
            child: EventFormForm(
    // Some Params
    ),
          ),
        );
      }
    }

EventFormForm.dart
class EventFormForm extends StatefulWidget {
  // Some Code

  // Some Const

  @override
  EventFormFormState createState() => EventFormFormState();
}

class EventFormFormState extends State<EventFormForm> {
//
//
// Some Code
//
//

@override
  Widget build(BuildContext context) {
return Form(
//
// Some Code
//
);
}

saveForm() {
//
// Some Code
//
}

}

标记@chunhunghan

Tag @chunhunghan

推荐答案

您可以将复制的文件复制粘贴到
下步骤1:使用final keyForm = GlobalKey<EventFormFormState>();
步骤2:将keyForm传递给EventFormForm(key: keyForm)
步骤3:在IconButton中，调用keyForm.currentState.saveForm();

You can copy paste run each files below
Step 1: Use final keyForm = GlobalKey<EventFormFormState>();
Step 2: Pass keyForm to EventFormForm(key: keyForm)
Step 3: In IconButton call keyForm.currentState.saveForm();

IconButton(
          icon: Icon(Icons.save),
          onPressed: () {
            keyForm.currentState.saveForm();
          })

工作演示

完整代码

main.dart

import 'package:flutter/material.dart';
import 'event_form.dart';
import 'event_form_form.dart';

void main() => runApp(MyApp());
final keyForm = GlobalKey<EventFormFormState>();

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: EventForm(),
    );
  }
}

event_form.dart

import 'package:flutter/material.dart';

import 'event_form_appbar.dart';
import 'event_form_body.dart';
class EventForm extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(appBar: EventFormAppBar(), body: EventFormBody());
  }
}

event_form_appbar.dart

import 'package:flutter/material.dart';
import 'main.dart';

class EventFormAppBar extends PreferredSize {
  @override
  Widget build(BuildContext context) {
    return AppBar(actions: <Widget>[
      IconButton(
          icon: Icon(Icons.save),
          onPressed: () {
            keyForm.currentState.saveForm();
          })
    ]);
  }

  @override
  get preferredSize => Size.fromHeight(50);
}

event_form_body.dart

import 'package:flutter/material.dart';
import 'main.dart';
import 'event_form_form.dart';

class EventFormBody extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: SingleChildScrollView(
        child: EventFormForm(key: keyForm),
      ),
    );
  }
}

event_form_form.dart

import 'package:flutter/material.dart';

class EventFormForm extends StatefulWidget {
  EventFormForm({Key key}) : super(key: key);

  @override
  EventFormFormState createState() {
    return EventFormFormState();
  }
}

class EventFormFormState extends State<EventFormForm> {
  final _formKey = GlobalKey<FormState>();

  @override
  Widget build(BuildContext context) {
    return Form(
      key: _formKey,
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: <Widget>[
          TextFormField(
            validator: (value) {
              if (value.isEmpty) {
                return 'Please enter some text';
              }
              return null;
            },
          ),
          Padding(
            padding: const EdgeInsets.symmetric(vertical: 16.0),
            child: RaisedButton(
              onPressed: () {
                saveForm();
              },
              child: Text('Submit'),
            ),
          ),
        ],
      ),
    );
  }

  void saveForm() {
    print("execute save Form");
    if (_formKey.currentState.validate()) {
      // If the form is valid, display a Snackbar.
      Scaffold.of(context)
          .showSnackBar(SnackBar(content: Text('Processing Data')));
    }
  }
}

这篇关于Flutter呼叫表单保存功能来自另一个文件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！

DART