Question

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

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

这是我的应用程序结构，如下所示：

PostPage>脚手架> 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,
                                  )

CAMERA类

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);
    });
  }

Answer 1

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

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

，然后您可以在NewStatefulWidget内更改状态，该状态将根据状态更改而重建。您还可以通过其构造函数NewStatefulWidget(camera)

将参数从父对象传递给NewStatefulWidget。

所选图像未显示在showModalBottomSheet上

1 个答案: