Flutter 从 Widget 返回数据

Question

在做任何事情之前，我首先为我的英语道歉。

因此，为了编写漂亮的代码，我在多个文件中解析了我的代码。只需调用小部件并使代码易于阅读。

但是我的一个小部件是 FormField，我不知道如何恢复主屏幕中小部件的输入。

这是主屏幕代码：

import 'package:ChatApp/pretty_form.dart';
import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

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

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

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

class _SignUpState extends State<SignUp> {
  String email = "";
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("SignUp"),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            email = PrettyForm(text: "Enter your email adress"),
            PrettyForm(text: "Enter your mdp"),
          ],
        ),
      ),
    );
  }
}

这是我在第一个文件中导入的代码：

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

  class PrettyForm extends StatefulWidget {
    PrettyForm({Key key, this.text, this.height, this.width}) : super(key: key);
    String text;
    double height;
    double width;
    @override
    _PrettyFormState createState() => _PrettyFormState();
  }

  class _PrettyFormState extends State<PrettyForm> {
    @override
    Widget build(BuildContext context) {
      double screen_height = MediaQuery.of(context).size.height;
      double screen_width = MediaQuery.of(context).size.width;
      final form_controller = TextEditingController();
      double height = my_percent(5, screen_height);

      return Container(
        width: width,
        height: height,
        margin: EdgeInsets.all(my_percent(2, screen_height)),
        decoration: BoxDecoration(
            borderRadius: new BorderRadius.all(Radius.circular(18.0)),
            border: Border.all(color: Colors.grey)),
        child: TextFormField(
          textAlign: TextAlign.center,
          controller: form_controller,
          decoration:
              InputDecoration(border: InputBorder.none, hintText: widget.text),
          onChanged: (value) {
            print(value);
          },
        ),
      );
    }
  }

如果您查看第一个 PrettyForm 调用，我正在尝试恢复字符串中的电子邮件输入。 如何将调用 PrettyForm 小部件的输入值返回到 SignUp 小部件（SignUp 是主屏幕）

Answer 1

你需要使用 onValueChanged 属性

import 'package:ChatApp/pretty_form.dart';
import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

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

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

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

class _SignUpState extends State<SignUp> {
  String email = "";
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("SignUp"),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            email = PrettyForm(text: "Enter your email adress",(newValue) => email),
            PrettyForm(text: "Enter your mdp",(newValue) => password),
          ],
        ),
      ),
    );
  }
}

形式

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

class PrettyForm extends StatefulWidget {
  PrettyForm({
    Key key,
    this.text,
    this.height,
    this.width,
    this.onChanged,
  }) : super(key: key);
  String text;
  double height;
  double width;

  // add this
  final ValueChanged<String> onChanged;

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

class _PrettyFormState extends State<PrettyForm> {
  @override
  Widget build(BuildContext context) {
    double screen_height = MediaQuery.of(context).size.height;
    double screen_width = MediaQuery.of(context).size.width;
    final form_controller = TextEditingController();
    double height = my_percent(5, screen_height);

    return Container(
      width: width,
      height: height,
      margin: EdgeInsets.all(my_percent(2, screen_height)),
      decoration: BoxDecoration(
          borderRadius: new BorderRadius.all(Radius.circular(18.0)),
          border: Border.all(color: Colors.grey)),
      child: TextFormField(
        textAlign: TextAlign.center,
        controller: form_controller,
        decoration:
            InputDecoration(border: InputBorder.none, hintText: widget.text),
        onChanged: (value) {
          print(value);
          widget.onChanged(newValue);
        },
      ),
    );
  }
}

Answer 2

虽然还有其他可能性这样做，但我只是沿着这个答案寻找返回多个值。

如果您想从小部件返回多个值，可以使用 Dart 记录。例如返回 2 个

int

和一个

String

final ValueChanged<(int, String, int)> onChanged;