如何解决如何在不重建整个页面的情况下使用 mobx 更改 ListTile 数据 #Flutter
我正在使用 mobx 学习 Flutter 状态管理,我想在不重建整个页面的情况下更改动态列表的上下文,我尝试了 Mobx 商店中的可观察列表,但我的示例在这里似乎不起作用。
此示例我想单击名称更改为单击的项目而不重建屏幕,当我单击时没有任何反应,但是当我返回另一个页面并返回时,我发现动物的名称已更改。
这是我的无状态小部件
Class AnimalPagelist extends StatelessWidget{
@override
Widget build(BuildContext context){
var animalStore = context.watch<AnimalStore>();
var animals = animalStore.animalsList;
return Scaffold(
appBar: AppBar(
title: Text("Animals Page"),),body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,children: <Widget>[
Observer(builder: (_) =>
ListView.builder(
scrollDirection: Axis.vertical,shrinkWrap: true,itemCount: animals.length,itemBuilder: (BuildContext context,int index) {
var pet = animalStore.getAnimal(index);
//final petName = context.select((ObservableList<Animal> animals)=>animals[index].name);
return ListTile(
key: ValueKey(pet.id),enabled: true,onTap: () async {
var rename = animals[index].name +" clicked";
animals[index].name = rename;
},title: Observer(builder: (_) => Text(pet.name)),);
},],);
这是我与商店的模型
class Animal {
final int id;
@observable
String name;
Animal({this.id,this.name});
factory Animal.fromJson(Map<dynamic,dynamic> json) {
return new Animal(
id: json['id'],name: json['name'],);
}
Map<dynamic,dynamic> toJson() {
final Map<dynamic,dynamic> data = new Map<dynamic,dynamic>();
data['id'] = this.id;
data['name'] = this.name;
return data;
}
}
class AnimalStore = _AnimalStore with _$AnimalStore;
abstract class _AnimalStore with Store{
@observable
ObservableList animalsList = ObservableList<Animal>.of(
[
Animal(id: 1,name: 'cat'),Animal(id: 2,name: 'dog'),Animal(id: 3,name: 'mouse'),Animal(id: 4,name: 'horse'),Animal(id: 5,name: 'frog'),]
);
@action
getAnimal(int i){
return animalsList[i];
}
}
我可以用哪种方式来安排模型、商店和屏幕小部件,这样如果我点击一个按钮,它就会根据需要更改名称,而无需重建整个屏幕。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。