Flutter MobX Observer 不会在 @action 时触发答案

【问题标题】：Flutter MobX Observer does not fire upon @actionFlutter MobX Observer 不会在 @action 时触发
【发布时间】：2020-05-02 18:06:19
【问题描述】：

我正在使用一个 MultiProvider 来包装我的整个应用程序。我已经在使用另一个 Store/Observer 进行身份验证/登录，并且该部分可以正常工作。我刚刚添加了另一个商店，它反映了用户拍摄的照片，然后在上传之前显示在两个不同的地方。

“拍照”和“将它们插入商店”工作正常。然后应该反应性地显示照片的部分......不是那么多。

相关代码：

import 'dart:io';

import 'package:mobx/mobx.dart';
import 'package:image_picker/image_picker.dart';

part 'photoview_store.g.dart';

class PhotoviewStore = _PhotoviewStore with _$PhotoviewStore;

abstract class _PhotoviewStore with Store {
  @observable
  List<File> images = [];

  @computed
  int get length => images.length;

  @action
  Future getImage({bool fromGallery: true}) async {
    ImageSource source = fromGallery ? ImageSource.gallery : ImageSource.camera;
    File _image;
    try {
      _image = await ImagePicker.pickImage(source: source);
      if(images.length >= 3) images.removeLast();
      images.insert(0, _image);
      print('New length: ${images.length}');
    } catch(_) {
      print('Error getting image');
    }
  }

  @action
  void removePicture(int index) {
    images.removeAt(index);
  }
}

我添加了@computed，因为我认为在观察者中访问images.length 可能会出现问题。不过什么也没做。

class NeuesAnliegen extends StatefulWidget {
  @override
  _NeuesAnliegenState createState() => _NeuesAnliegenState();
}

class _NeuesAnliegenState extends State<NeuesAnliegen> with AutomaticKeepAliveClientMixin{
[...]
@override
  Widget build(BuildContext context) {
    final photoStore = Provider.of<PhotoviewStore>(context);
    super.build(context);
    [...]
       Row(
                children: <Widget>[
                  Expanded(
                    flex: 1,
                    child: Observer(builder: (_) {
                      print(photoStore.length);
                      if(photoStore.length < 1) return Container();
                      return GestureDetector(
                        child: Image.file(photoStore.images[0], height: 100),
                        onTap: () { },
                      );
                    },)
                  ),
                  Expanded(
                    flex: 1,
                    child: Observer(builder: (_) {
                      if(photoStore.length < 2) return Container();
                      return GestureDetector(
                        child: Image.file(photoStore.images[1], height: 100),
                        onTap: () { },
                      );
                    },)
                  ),
                  Expanded(
                    flex: 1,
                    child: Observer(builder: (_) {
                      if(photoStore.length < 3) return Container();
                      return GestureDetector(
                        child: Image.file(photoStore.images[2], height: 100),
                        onTap: () { },
                      );
                    },)                  )
                ],
              ),
    [...]
                  Expanded(
                      child: RaisedButton.icon(
                        onPressed: () => photoStore.getImage(fromGallery: false,),
                        icon: Icon(Icons.camera),
                        label: Text('Foto aufnehmen')
                      ),
                    ),

所以，我可以很好地拍照，它确实会添加到 images 列表中，但 Observable 永远不会触发。

【问题讨论】：

标签： flutter mobx

【解决方案1】：

好，好像是这部分

@observable
List<File> images = [];

不起作用（目前？）

替换为

final images = ObservableList<File>.of([]);

会产生想要的结果

【讨论】：

确实，这不是错误。当 instance 发生变化时触发可观察对象，当它是列表时，这是同一个实例，因此它不会重建。
您可以创建一个ObservableList（在我看来这是更简洁的方式），或者您可以重新创建一个新实例：images = [file_1, file_2, ];

【解决方案2】：

@observable
List<File> images = new List<File>().asObservable();

对我有用。

【讨论】：