flutter - 如何从 flutter 中使用一种方法创建的多个文本字段中检索值？

Question

我在不同的文件中使用单一方法创建了多个文本字段，我如何从中检索值。我想检索不同变量中的值。

//class method

class CustomTextField {
  static TextField display(BuildContext context, [String name, double size=16,IconData icon]) {
    return new TextField(
      textAlign: TextAlign.center,
      style: CustomTextStyle.display(context, Colors.black38, size),
      decoration: new InputDecoration(
        alignLabelWithHint: true,
        icon: new Icon(icon),
        contentPadding:EdgeInsets.only(top: 30,right: 30,),
        border: InputBorder.none,
        hintText:"$name",
        focusedBorder: InputBorder.none,
        hintStyle: CustomTextStyle.display(context, Colors.grey, size),
      ),
    );
  }
}

//call method

 new Container(
          width: width,
          height: height,
          decoration: new BoxDecoration(
            borderRadius: new BorderRadius.all(Radius.circular(20)),
            gradient: new LinearGradient(
              colors: [
                Color.fromRGBO(252, 191, 93, 1),
                Color.fromRGBO(255, 210, 119, 1),
                Color.fromRGBO(252, 215, 85, 1),
              ],
              begin: Alignment.bottomCenter,
              end: Alignment.topCenter,
            ),
          ),
          child: CustomTextField.display(context, name,16,icon),
        ),

Answer 1

首先，我建议您使用 Stateless Widget 来创建您的 TextField，而不是像下面的代码那样使用静态函数:

class CustomTextField extends StatelessWidget {
  final Function(String) onChanged;
  final String name;
  final double size;
  final IconData icon;

  CustomTextField({
    this.onChanged,
    this.name,
    this.size: 16,
    this.icon,
  });

  Widget build(BuildContext context) {
    return new TextField(
      textAlign: TextAlign.center,
      onChanged: onChanged,
      style: CustomTextStyle.display(context, Colors.black38, size),
      decoration: new InputDecoration(
        alignLabelWithHint: true,
        icon: new Icon(icon),
        contentPadding: EdgeInsets.only(
          top: 30,
          right: 30,
        ),
        border: InputBorder.none,
        hintText: "$name",
        focusedBorder: InputBorder.none,
        hintStyle: CustomTextStyle.display(context, Colors.grey, size),
      ),
    );
  }
}

然后，为 onChange 字段创建一个函数以接收新值:

class App extends StatelessWidget {
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        width: width,
        height: height,
        decoration: new BoxDecoration(
          borderRadius: new BorderRadius.all(Radius.circular(20)),
          gradient: new LinearGradient(
            colors: [
              Color.fromRGBO(252, 191, 93, 1),
              Color.fromRGBO(255, 210, 119, 1),
              Color.fromRGBO(252, 215, 85, 1),
            ],
            begin: Alignment.bottomCenter,
            end: Alignment.topCenter,
          ),
        ),
        child: CustomTextField(
          // Here you get the value change
          onChanged: (value) {
            print('Text value changed');
            print('New value: $value');
          },
          name: name,
          size: 16,
          icon: icon,
        ),
      ),
    );
  }
}