Question

我创建了一个颤动的应用程序，我在应用程序中管理todolist数组。我可以通过添加按钮添加文本。

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

代码：

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，则它会重新呈现widget，_writable再次变为false。如果我在没有setState的情况下这样做，则_writable变为true，但widget不会重新渲染。

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

Answer 1

变量

bool _writable = false;

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

修改您应该创建一个专用的StatefulWidget（TodoListEntry），其成员为_writable，如上所述。将listTile(...)的整个方法体几乎移动到build()的{{1}} - 方法，使参数TodoListEntryState也成为成员并通过构造函数传递值。

Answer 2

状态管理

在接下来的页面中，您将学习Flutter应用中处理状态的基础。

浏览Flutter时，有时需要跨应用程序在屏幕之间共享应用程序状态。您可以采取多种方法，还要考虑很多问题。

国家管理扑灭

2 个答案: