flutter - 如何将 Provider 用于异步数据？ ( flutter )

Question

背景

我正在构建用于练习 Flutter 的 super 简单的待办事项列表应用程序。如果输入字符串并单击“添加”，则文本将显示在上部列表中。

题

我应该何时以及如何调用 model.getTasks() (= 异步更新数据)和 model.refresh() (= notifyListeners)？

我发现列表没有立即更新，因为我不使用 await为 model.getTasks() .我试过这些，但我想知道是否有更好的方法。

使用 await model.getTasks()并制作 build一个异步函数。 --> 编译错误

添加 await model.getTasks()就在之前 model.refresh() . --> model.tasks渲染前未更新 ListView打开应用程序时。 model.getTasks()创建新任务时调用两次。

截屏



代码详情

model.tasks是 List<Task> ，用于存储从 DB ( sqflite ) 获取的任务。

model.getTasks()是一个异步函数，用于从数据库获取数据并覆盖 model.tasks .

model.refresh()仅用于拨打 notifyListeners() .

TodoListPage是模型 notifyListeners 的监听器.

class TodoListPage extends StatelessWidget {
  final TextEditingController _textFieldController = TextEditingController();

  @override
  Widget build(BuildContext context) {
    print('TodoListPage.build');
    final model = Provider.of<TodoListModel>(context);
    model.getTasks();

    Future createTask() async {
      TaskData taskData = await DatabaseHandler()
          .insertTask(new TaskData(name: _textFieldController.text));
      model.refresh();
    }

    return Scaffold(
      appBar: AppBar(
        title: Text(
          'TODO List',
        ),
      ),
      body: Column(
        children: <Widget>[
          Container(
            height: 150,
            child: ListView.builder(
              itemBuilder: (BuildContext context, int index) {
                return Text(model.tasks[index].name);
              },
              itemCount: model.tasks.length,
            ),
          ),
          Text(
            'Add',
          ),
          Form(
            child: Column(
              children: <Widget>[
                TextFormField(
                  controller: _textFieldController,
                ),
                RaisedButton(
                  onPressed: () {
                    print('onPressed');
                    print(_textFieldController.text);
                    createTask();
                  },
                  child: Text('New'),
                ),
              ],
            ),
          )
        ],
      ),
    );
  }
}

Answer 1

您可以使用 FutureBuilder里面StatefulWidget :

class TodoListPage extends StatefulWidget {
  @override 
  _TodoListPageState createState() => _TodoListPageState();
}

class _TodoListPageState extends State<TodoListPage> {
  TodoListModel model;
  Future<List<Tasks>> _getTasks;

  @override
  void didChangeDependencies() {
    model = Provider.of<TodoListModel>(context);
    _getTasks = model.getTasks();
  }

  @override
  Widget build() {
    FutureBuilder<List<Tasks>>(
      future: _getTasks,
      builder: (context, snapshot) {
        if (snapshot.connectionState != ConnectionState.done) {
          return Text("Loading tasks...");
        }

        final tasks = snapshot.data;

        // ...
      }
    );
  }
}

在你的模型中:

Future<List<Tasks>> getTasks() async {
  if (tasks == null) {
    tasks = await loadFromDatabase();
  }

  return tasks;
}