Flutter：向 Column 添加了一个额外的 TextFormField 但显示没有变化

Question

我正在制作一个以 table 作为其子项的表单。有一个按钮可以添加额外的列，另一个按钮可以添加额外的 TextFormField。按钮实现了 _MyHomePageState。

因此，设置就像下面 link 中的设置。

https://flutter.dev/docs/development/ui/interactive#the-parent-widget-manages-the-widgets-state

当调用addTextFormField 方法时，一个新的TextFormField 被添加到List _textFormFields。 List _columns 将 _textFormFields 作为子项。因此，_columns 也发生了变化。 _columns 然后通过 build.

传递给 FormA 构造函数

此时，_columns中有1个Column Widget，Column Widget中有2个TextFormField。但是，它只显示 1 个 TextFormField。

然后当我按下 addColumn 按钮时，会出现一个带有两个 TextFormField 的附加 Column。

为什么我按 addTextFormField 时没有 2 个 TextFormField？

main.dart

    class _MyHomePageState extends State<MyHomePage> {

      List<Widget> _columns;
      List<Widget> _textFormFields;

      @override
      void initState(){
        super.initState();
          _columns = List<Widget>();
          _textFormFields = List<Widget>();

          _addTextFormField();
          _addColumn();
      }

      void _addTextFormField() async {
          _textFormFields.add(TextFormField(
                        decoration: InputDecoration(
                        hintText: _textFormFields.length.toString()),
                        ),
                      );

          for(Column column in _columns){
            print('from _addTextFormField ' + column.children.length.toString()); 
           // press addTextFormField button once, it prints  2

            print('from _addTextFormField ' + column.children.toString()); 
           //press addTextFormField button once, it prints [TextFormField, TextFormField]
          }

          setState((){

          });
      }

      void _addColumn() async {

          print('from addColumn   no. of textFormFields ' + _textFormFields.length.toString());
          _columns.add(Column(
                      children: _textFormFields,),
                      );

          for(Column column in _columns){
            print('from addColumn   no. of widget in a column ' + column.children.length.toString());
          }

          setState((){
          });
      }

      @override
      Widget build(BuildContext context) {

        print('rebuild');
        // press addTextFormField button once, it prints rebuild
        return Scaffold(
          appBar: AppBar(
            title: Text(widget.title),
          ),
          body: Center(
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                FormA (columns : _columns),
              ],
            ),
          ),

          floatingActionButton: Row(
            mainAxisAlignment: MainAxisAlignment.end,
            children: <Widget>[
                FloatingActionButton(
                  onPressed: _addColumn,
                  tooltip: '+C',
                  child: Icon(Icons.add),
                ),
                FloatingActionButton(
                  onPressed: _addTextFormField,
                  tooltip: '+R',
                  child: Icon(Icons.add),
                ),
            ],
          ),


        );
      }
    }

formA.dart

class FormA extends StatelessWidget{

  FormA({Key key, this.columns})
      : super(key: key);

  List<Widget> columns;

  @override
  Widget build(BuildContext context) {

      for(Column column in columns){
        print('from FormA   no. of widget in a column ' + column.children.length.toString());
       // press addTextFormField button once, it prints 2
        print('from FormA ' + column.children.toString());
       // press addTextFormField button once, it prints [TextFormField, TextFormField]
      }

    return Form(
      child: Table(
        children: [TableRow(
          children: columns,
        ),],
      ),
    );
  }
}

Answer 1

Then when I press addColumn button, an additional Column with two TextFormFields will appear.

Why there are not 2 TextFormFields when I press addTextFormField?

不是真的！当小部件初始化时，每个列表中只有一个 Column 和一个 TextFormField。现在您按 addColumn 以便再添加一个 Column。所以你有两个 Column 但仍然有一个 TextFormField.

希望对您有所帮助。

Answer 2

您以当前形式编写的代码将无法按预期工作，因为 _columns 列表即使引用了 _textFormFields，您最初构建的 Column 小部件也有其 children 已经构建，如果您更改它也不会更改 MyhomePage 小部件，因为它没有引用。

在当前形式下，您的代码是这样工作的。

您需要做的就是在 _addTextFormField 方法的 setState 中重新分配 _columns 字段，这将像这样重建整个列列表。


void _addTextFormField() {
    _textFormFields.add(
      TextFormField(
        decoration:
            InputDecoration(hintText: _textFormFields.length.toString()),
      ),
    );

    for (Column column in _columns) {
      print('from _addTextFormField ' + column.children.length.toString());
      // press addTextFormField button once, it prints  2

      print('from _addTextFormField ' + column.children.toString());
      //press addTextFormField button once, it prints [TextFormField, TextFormField]

    }

    setState(() {
      _columns = List<Column>.generate(
          _columns.length, (index) => Column(children: _textFormFields));
    });
  }

此更改后将如下所示。

这是一个带有解决方案的实时代码笔。

https://codepen.io/abhilas-csc/pen/dyYRVrL

Flutter：向 Column 添加了一个额外的 TextFormField 但显示没有变化

Flutter: Added an additional TextFormField to Column but no change in display

forms

dart

flutter

flutter-web