[英]How can I use Provider for async data? (Flutter)
我正在構建超級簡單的 TODO 列表應用程序來練習 Flutter。 如果您輸入一個字符串並單擊“添加”,則該文本將顯示在上方的列表中。
我應該何時以及如何調用model.getTasks()
(= 異步更新數據)和model.refresh()
(= notifyListeners
)?
我發現該列表沒有立即更新,因為我不使用await
for model.getTasks()
。 我嘗試了這些,但我想知道是否有更好的方法。
await model.getTasks()
並build
異步 function。 --> 編譯錯誤await model.getTasks()
model.refresh()
。 --> model.tasks
在打開應用程序時渲染ListView
之前不會更新。 model.getTasks()
在創建新任務時被調用兩次。model.tasks
是List<Task>
,用於存儲從 DB ( sqflite
) 獲取的任務。model.getTasks()
是一個異步 function 從 DB 獲取數據並覆蓋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'),
),
],
),
)
],
),
);
}
}
您可以在StatefulWidget
中使用FutureBuilder
:
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;
// ...
}
);
}
}
在您的 model 中:
Future<List<Tasks>> getTasks() async {
if (tasks == null) {
tasks = await loadFromDatabase();
}
return tasks;
}
當您設置ChangeNotifierProvider
時,它只會在TodoListModel()
中調用一次refreshTasks()
,這與 Widget build() 中的 model.getTastks() 類似
然后我將一個消費者盡可能深地放置在小部件樹中,當我按下 RaiseButton 或notifyListeners();
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
class TodoList extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MultiProvider(
providers: [
ChangeNotifierProvider(create: (context) => TodoListModel()),
],
child: TodoListPage()
);
}
}
class TodoListPage extends StatelessWidget {
final TextEditingController _textFieldController = TextEditingController();
@override
Widget build(BuildContext context) {
print('TodoListPage.build');
// listen: false, if the provider sends e notify, this part is not refreshing
final model = Provider.of<TodoListModel>(context, listen: false);
// i place this future in the TodoListModel Class
/*Future createTask() async {
//TaskData taskData = await DatabaseHandler().insertTask(new TaskData(name: _textFieldController.text));
model.refreshTasks();
}*/
return Scaffold(
appBar: AppBar(
title: Text(
'TODO List',
),
),
body: Column(
children: <Widget>[
Container(
height: 150,
child: new Consumer<TodoListModel>(
builder: (context, prov2, child) {
// this part is updating every notifyListeners
// it's better when you place the consumer,as deep as possible in the widget tree
print("Consumer build");
return 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();
model.createTask(new TaskData(name: _textFieldController.text));
},
child: Text('New'),
),
],
),
)
],
),
);
}
}
class TaskData {
final String name;
TaskData({this.name});
}
class TodoListModel extends ChangeNotifier {
// this Function only calls when the Provider is set at ChangeNotifierProvider like initTodoListModel
TodoListModel () {
print("TodoListModel Class");
refreshTasks();
}
// define TaskData, with getter
List<TaskData> _tasks = [new TaskData(name: "test"), new TaskData(name: "test2")];
List<TaskData> get tasks => _tasks;
// getTasks async
Future refreshTasks() async {
// fetch something in the Database
// _tasks = await await DatabaseHandler().getTasks();
notifyListeners();
}
Future createTask(TaskData newTask) async {
// add Task with DatabseHandler, or in this example a simple list.add
_tasks.add(newTask);
//refreshing with notifyListeners
refreshTasks();
}
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.