所选图像未显示在 showModalBottomSheet 上答案

【问题标题】：selected image not showing on showModalBottomSheet所选图像未显示在 showModalBottomSheet 上
【发布时间】：2020-02-01 14:45:49
【问题描述】：

我在showModalBottomSheet 中使用了imagePicker。当用户选择图像时需要在另一个小部件上显示图像。

问题：从相机/图库中捕获图像后，现在显示所选图像。需要关闭并重新打开底部工作表。

这是我的应用结构的样子：

PostPage > Scaffold > BottomAppBar > RaisedButton(onPressed:()=> showModelSheet

class _PostPageState extends State<PostPage> {

 List<File> camera = [];

  updateImage(File updateCamera) {
        setState(() {
          print(updateCamera);
          camera.add(updateCamera);
        });
      }
...
Scaffold(
     body: PostList(),
     bottomNavigationBar: BottomAppBar(
     ...
    onPressed: () =>showModelSheet(context, widget.subPost);
}

}//关闭的构建方法

那么，

  void showModelSheet(BuildContext context, PostModel subPost) {
    showModalBottomSheet(
        context: context,
        isScrollControlled: true,
        builder: (builder) {
          return StatefulBuilder(
              builder: (BuildContext context, StateSetter setModelState) {
            return SingleChildScrollView(
              child: Container(
                child: Padding(
                  padding: EdgeInsets.only(...),
                  child: Column(
                    children: <Widget>[
                      TopLayer(context, subPost, setModelState),
                      line(context),
                        child: Row(
                          mainAxisAlignment: MainAxisAlignment.spaceBetween,
                          children: <Widget>[
                            Camera(camera: updateImage),
                            Gallery(camera: updateImage),

                            camera != null
                                ? Container(
                                child: ListView.builder(
                                scrollDirection: Axis.horizontal,
                                itemCount: camera.length,
                                itemBuilder: (context, index) {
                                  return Container(
                                    child: Image.file(
                                      camera[index],
                                      fit: BoxFit.fill,
                                    ),
                                  );
                                }))
                                : Container(
                                    height: 43,
                                    width: 45,
                                    color: Colors.red,
                                  )

相机类

class Camera extends StatefulWidget {
  var camera;
  Camera({this.camera});
  @override
  _CameraState createState() => _CameraState();
}

class _CameraState extends State<Camera> with SingleTickerProviderStateMixin {
  final FocusNode myFocusNode = FocusNode();
  File _image;
  String profilePath;

  Future getImage() async {
    File image = await ImagePicker.pickImage(source: ImageSource.camera);
    setState(() {
      widget.camera(_image);
    });
  }

【问题讨论】：

标签： flutter dart

【解决方案1】：

这是因为showModalBottomSheet 没有状态。当您在父类中调用 set state 时，它不会重建。所以它不会触发到camera != null。解决方案是您需要将有状态小部件传递到 showModalBottomSheet。

void showDigiemosBottomSheet(context) {
showModalBottomSheet(
  context: context,
  builder: (BuildContext buildContext) => NewStatefulWidget());
}

然后您可以更改 NewStatefulWidget 内部的状态，这将在状态更改时重建。也可以通过其构造函数NewStatefulWidget(camera)将参数从父级传递给NewStatefulWidget

【讨论】：