Flutter使用image_picker选图后预览容器未实时更新问题问询

问题根因 #

你当前的状态管理逻辑存在问题：你在 _ExpandedPanelBodyState 中调用 setState 只会刷新 ExpandedPanelBody 组件自身，而渲染图片预览的 buildImageMedia(_image) 方法是在父组件 _AddPostBodyState 中执行的，父组件没有收到状态更新通知，所以不会重新渲染预览区，只有重新进入页面时才会加载最新的全局_image值。

修复步骤 #

步骤1：将图片状态移到父组件管理 #

删掉你定义的全局 PickedFile _image 变量，把状态放到 _AddPostBodyState 中，同时新增更新图片的方法：

class _AddPostBodyState extends State<AddPostBody> {
  PickedFile _image; // 将图片状态移到父组件维护

  // 新增更新选中图片的方法
  void updateSelectedImage(PickedFile selectedImage) {
    setState(() {
      _image = selectedImage;
    });
    mediaFileType = "IMAGE";
  }

  @override
  Widget build(BuildContext context) {
    return SlidingUpPanel(
      // 其余原有属性保持不变
      panel: ExpandedPanelBody(onImageSelected: updateSelectedImage), // 给子组件传递状态更新回调
      // 其余原有代码保持不变
    );
  }
}

步骤2：给ExpandedPanelBody新增回调参数 #

class ExpandedPanelBody extends StatefulWidget {
  // 新增图片选中回调参数
  final Function(PickedFile) onImageSelected;
  const ExpandedPanelBody({Key key, this.onImageSelected}) : super(key: key);

  @override
  _ExpandedPanelBodyState createState() => _ExpandedPanelBodyState();
}

步骤3：修改子组件选图逻辑，调用父组件回调 #

删除 _ExpandedPanelBodyState 中给全局_image赋值的逻辑，改为调用父组件传入的回调触发状态更新：

class _ExpandedPanelBodyState extends State<ExpandedPanelBody> {
  _imgFromCamera() async {
    PickedFile image = await imagePicker.getImage(
        source: ImageSource.camera, imageQuality: 100);
    // 调用父组件回调更新状态，不需要再调用子组件的setState
    widget.onImageSelected(image);
  }

  _imgFromGallery() async {
    PickedFile image = await imagePicker.getImage(
        source: ImageSource.gallery, imageQuality: 100);
    // 调用父组件回调更新状态，不需要再调用子组件的setState
    widget.onImageSelected(image);
  }

  // 其余原有代码保持不变
}

额外优化建议 #

你的mediaFileType和_panelController也建议放到对应的状态类中管理，不要使用全局变量，避免后续出现更多状态不同步的问题。

内容的提问来源于stack exchange，提问作者Thorvald