我正在使用包装了整个应用程序的MultiProvider。我已经在使用另一个商店/观察员进行身份验证/登录,并且该部分可以正常工作。我刚刚添加了另一个商店,该商店反映了用户拍摄的照片,然后在上传之前在两个不同的地方显示。
“拍摄照片”并将其“插入商店”效果很好。然后应该用来反应显示照片的部分……不多。
相关代码:
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
永远不会触发。
好吧,似乎这部分
@observable
List<File> images = [];
当前不起作用?
替换为
final images = ObservableList<File>.of([]);
将产生想要的结果