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 property

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);
        },
      ),
    );
  }
}

颤振从小部件返回数据

1 个答案: