dart - Flutter 中的状态管理

Question

我创建了一个 flutter 应用程序，我在其中管理应用程序中待办事项列表的数组。我可以通过添加按钮添加文本。

我创建了一个要在列表中显示的小部件。我的问题是我应该如何管理个人用户界面。

代码:

import 'package:flutter/material.dart';

class TodoList extends StatefulWidget {
  _TodoListState createState() => new _TodoListState();
}

class _TodoListState extends State<TodoList> {
  List _list = new List();

  Widget listTile({String data: '[Empty data]'}) {
    bool _writable = false;
    TextEditingController _textController = new TextEditingController(text: data);
    String _text = _textController.text;
    if(!_writable){
      return new Row(
        children: <Widget>[
          new Expanded(
              child: new Text(data)
          ),
          new IconButton(icon: new Icon(Icons.edit),
              onPressed: () {
//                  setState(() {
                    _writable = ! _writable;
                    print(_writable.toString());
//                    });
                  }),
          new IconButton(icon: new Icon(Icons.remove_circle), onPressed: null),
        ],
      );
    } else {
      return new Row(
        children: <Widget>[
          new Expanded(
              child: new TextField( controller: _textController )
          ),
          new IconButton(icon: new Icon(Icons.done), onPressed: null),
        ],
      );
    }


  }

  void addInList(String string) {
    print(string);
    setState(() {
      _list.add(string);
    });
    print(_list);
  }
  void removeFromList(int index){

  }
  static final TextEditingController _textController = new TextEditingController();
  String get _text => _textController.text;


  @override
  Widget build(BuildContext context) {
    Widget adderTile = new Row(
      children: <Widget>[
        new Expanded(
          child:
          new TextField(
            textAlign: TextAlign.center,
            controller: _textController ,
            decoration: new InputDecoration( hintText: 'New item.!' ),
          ),
        ),
        new IconButton(icon: new Icon(Icons.add), onPressed: (){addInList(_text);}),
      ],
    );

    return new MaterialApp(
      title: 'TodoList',
      home: new Scaffold(
        appBar: new AppBar(title: new Text('TodoList'),),
        body: new Column(
          children: <Widget>[
            adderTile,
            new ListView.builder(
                shrinkWrap: true,
                itemCount: _list.length,
                itemBuilder: (context, int index){
                  return listTile(data: _list[index]);
                }
            ),
          ],
        ),
      ),
    );
  }
}

如果我在 setState 中更改 _writable，那么它会重新呈现小部件并且 _writable 再次变为 false。如果我在没有 setState 的情况下执行此操作，则 _writable 变为 true 但小部件不会重新呈现。

P.S.:我不想添加另一个数组来管理哪些是可写的，哪些不是。提前致谢。

Answer 1

变量

bool _writable = false;

在方法listTile()中被声明为局部变量，但应该移到List _list = new List();旁边成为成员变量。然后使用 setState() 设置它并重建 View 。

编辑:您应该创建一个专用的 StatefulWidget (TodoListEntry)，按照上面的建议将 _writable 作为成员。将 listTile(...) 的几乎整个方法体移动到 TodoListEntryState 的 build() 方法中，使参数 字符串数据也是一个成员，并通过构造函数传递值。