英文:
ListView dosen't render widget when using riverpod provider
问题
我正在使用Flutter编写一个应用程序,该应用程序使用SimpleDialog将项目添加到列表中,并在添加项目时在ListView中显示这些项目。
问题是,只有当我切换到另一页然后再回到列表页面时,列表才会更新,所以数据已经存在。我只是不明白如何使列表重新渲染...
这是我声明的Provider:
@riverpod
List<Task> tasks(TasksRef ref) => [];
这是我的小部件如何设置列表(tasks):
class TasksScreen extends StatefulHookConsumerWidget {
const TasksScreen({super.key});
@override
ConsumerState<TasksScreen> createState() => _TasksScreenState();
}
class _TasksScreenState extends ConsumerState<TasksScreen> {
@override
Widget build(BuildContext context) {
List<model.Task> tasks = ref.read(tasksProvider);
List<Task> list = [];
list = [...test(tasks)];
return ProviderScope(
child: Scaffold(
body: ListView.builder(
itemBuilder: (context, index) {
return Task(task: ref.read(tasksProvider)[index]);
},
itemCount: ref.read(tasksProvider).length,
),
));
}
List<Task> test(List<model.Task> list) {
List<Task> tasks = [];
for (var i = 0; i < list.length; i++) {
tasks.add(Task(task: list[i]));
}
return tasks;
}
}
非常感谢帮助!
我期望Provider的更改会导致列表重新渲染页面并显示列表。
英文:
I writing an app using flutter that add item to list (using simpleDialog) and show thus items in ListView when you add on.
The problem is that the list only update when I move to another page and them get to the list page, so the data is there. I just don't understand how to make the list to re-render...
This is the provider I declare
@riverpod
List<Task> tasks(TasksRef ref) => [];
This is my widget how preset the list (tasks)
class TasksScreen extends StatefulHookConsumerWidget {
const TasksScreen({super.key});
@override
ConsumerState<TasksScreen> createState() => _TasksScreenState();
}
class _TasksScreenState extends ConsumerState<TasksScreen> {
@override
Widget build(BuildContext context) {
List<model.Task> tasks = ref.read(tasksProvider);
List<Task> list = [];
list = [...test(tasks)];
return ProviderScope(
child: Scaffold(
body: ListView.builder(
itemBuilder: (context, index) {
return Task(task: ref.read(tasksProvider)[index]);
},
itemCount: ref.read(tasksProvider).length,
),
));
}
List<Task> test(List<model.Task> list) {
List<Task> tasks = [];
for (var i = 0; i < list.length; i++) {
tasks.add(Task(task: list[i]));
}
return tasks;
}
}
Thanks a lot for helpers !
I expecting that the changing of the provider lead to the list that render the page and show the list
答案1
得分: 1
你应该使用 watch
而不是 read
,因为根据文档的描述,read
在状态更改时不会重新构建小部件。
class TaskListNotifier extends StateNotifier<List<model.Task>> {
TaskListNotifier() : super([]); // 初始状态
void add(model.Task) {
state.add(model.Task);
state = [...state]; // 这将通知并重建 UI
}
}
final tasksProvider = StateNotifierProvider<TaskListNotifier, List<model.Task>>((ref) {
return TaskListNotifier();
});
class TasksScreen extends StatefulHookConsumerWidget {
const TasksScreen({super.key});
@override
ConsumerState<TasksScreen> createState() => _TasksScreenState();
}
class _TasksScreenState extends ConsumerState<TasksScreen> {
@override
Widget build(BuildContext context) {
List<model.Task> tasks = ref.watch(tasksProvider);
return ProviderScope(
child: Scaffold(
body: ListView.builder(
itemBuilder: (context, index) {
return GestureDetector(
onTap: () {
ref.read(tasksProvider.notifier).add(tasks[index]);
},
child: Task(task: tasks[index]),
);
},
itemCount: tasks.length,
),
));
}
}
英文:
You should use watch
instead of read since read
does not rebuild the widget when the state change as describe in the document
class TaskListNotifier extends StateNotifier<List<model.Task>> {
TaskListNotifier() : super([]); // initial state
void add(model.Task) {
state.add(model.Task);
state = [...state]; // this will notify and rebuild the UI
}
}
final tasksProvider = StateNotifierProvider<TaskListNotifier, List<model.Task>>((ref) {
return TaskListNotifier();
});
class TasksScreen extends StatefulHookConsumerWidget {
const TasksScreen({super.key});
@override
ConsumerState<TasksScreen> createState() => _TasksScreenState();
}
class _TasksScreenState extends ConsumerState<TasksScreen> {
@override
Widget build(BuildContext context) {
List<model.Task> tasks = ref.watch(tasksProvider);
return ProviderScope(
child: Scaffold(
body: ListView.builder(
itemBuilder: (context, index) {
return GestureDetector(
onTap: () {
ref.read(tasksProvider.notifier).add(tasks[index]);
},
child: Task(task: tasks[index]),
);
},
itemCount: tasks.length,
),
));
}
}
答案2
得分: 0
抱歉,我以前没有使用过riverpod包,所以不能直接为您提供关于这个的建议,您可能需要等待其他答案。
但是对于您想要触发重建的构建方法,您应该使用watch
而不是read
。
我不知道riverpod是否也有一些包装器或帮助类似于ChangeNotifier
,您需要将列表包装在其中。
转换为默认的provider包,您的代码片段的工作示例如下:
import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
import 'dart:collection';
class TaskStorage with ChangeNotifier {
List<ModelTask> _myTasks = [];
void add(ModelTask newTask) {
_myTasks.add(newTask);
notifyListeners();
}
UnmodifiableListView<ModelTask> get tasks => UnmodifiableListView<ModelTask>(_myTasks);
}
class ModelTask {
int someData = 10;
}
class Task extends StatelessWidget {
final ModelTask task;
const Task({
required this.task,
});
@override
Widget build(BuildContext context) {
return Text("task: ${task.someData}");
}
}
class TasksScreen extends StatefulWidget {
const TasksScreen({Key? key});
@override
State createState() => _TasksScreenState();
}
class _TasksScreenState extends State<TasksScreen> {
@override
Widget build(BuildContext context) {
return Column(
children: [
Expanded(
child: ListView.builder(
itemBuilder: (context, index) {
return Task(task: context.watch<TaskStorage>().tasks[index]);
},
itemCount: context.watch<TaskStorage>().tasks.length,
),
),
ElevatedButton(
onPressed: () => context.read<TaskStorage>().add(ModelTask()),
child: Text("ADD"),
),
],
);
}
}
void main() => runApp(
MaterialApp(
home: Scaffold(
backgroundColor: Colors.green,
appBar: AppBar(),
body: ChangeNotifierProvider<TaskStorage>(
create: (BuildContext context) {
return TaskStorage();
},
child: const TasksScreen(),
),
),
),
);
也许这仍然可以帮助您。我建议查看riverpod包的文档。
英文:
Sorry, i have never used the riverpod package before, so i can't directly give you advice on this and you might have to wait for a different answer.
But for the build method where you want to trigger rebuilds, you should use watch
instead of read
.
And i don't know if riverpod also has some wrapper, or helper class like a ChangeNotifier
that you need to wrap your list in.
Converted to the default provider package, a working example for your code snippet would look like:
import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
import 'dart:collection';
class TaskStorage with ChangeNotifier {
List<ModelTask> _myTasks = [];
void add(ModelTask newTask) {
_myTasks.add(newTask);
notifyListeners();
}
UnmodifiableListView<ModelTask> get tasks => UnmodifiableListView<ModelTask>(_myTasks);
}
class ModelTask {
int someData = 10;
}
class Task extends StatelessWidget {
final ModelTask task;
const Task({
required this.task,
});
@override
Widget build(BuildContext context) {
return Text("task: ${task.someData}");
}
}
class TasksScreen extends StatefulWidget {
const TasksScreen({super.key});
@override
State createState() => _TasksScreenState();
}
class _TasksScreenState extends State<TasksScreen> {
@override
Widget build(BuildContext context) {
return Column(
children: [
Expanded(
child: ListView.builder(
itemBuilder: (context, index) {
return Task(task: context.watch<TaskStorage>().tasks[index]);
},
itemCount: context.watch<TaskStorage>().tasks.length,
),
),
ElevatedButton(
onPressed: () => context.read<TaskStorage>().add(ModelTask()),
child: Text("ADD"),
),
],
);
}
}
void main() => runApp(
MaterialApp(
home: Scaffold(
backgroundColor: Colors.green,
appBar: AppBar(),
body: ChangeNotifierProvider<TaskStorage>(
create: (BuildContext context) {
return TaskStorage();
},
child: const TasksScreen(),
),
),
),
);
Maybe this could still help you. I would recommend looking at the documentation of the riverpod package.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库,让每个人都能够通过互相帮助和分享经验来进步。
评论