如何在不重建整个页面的情况下使用 mobx 更改 ListTile 数据 #Flutter

编程问答 2022-05-25

问题描述

我正在使用 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 (将#修改为@）

dartmobxmobxmobxmobxproviderprovider