如何在状态更改后强制小部件重新创建自己？

Posted 2023-02-23

【中文标题】如何在状态更改后强制小部件重新创建自己？

【英文标题】：How to force a widget to recreate itself after a state changed?

【发布时间】：2021-03-05 06:52:56

【问题描述】：

我正在学习如何在 Flutter 中与图像进行交互，在尝试 photo_view 时，我遇到了一个奇怪的交互，这让我想知道小部件是如何工作的。

所以我有 2 张图片。第一个高度>宽度，第二个相反。 但我想将它们都显示在一个正方形中，所以这就是我的代码的样子：

 Widget _getPhotoView(String path) => AspectRatio(
    aspectRatio: 1,
    child: ClipRect(
      child: PhotoView(
        minScale: PhotoViewComputedScale.covered,
        imageProvider: AssetImage(path),
      ),
    ),
  );

它被放置在这个小部件树中：

 Widget build(BuildContext context) 
return Scaffold(
  body: ListView(
    children: [
      Container(
        height: MediaQuery.of(context).size.width,
        child: _onStart
            ? _getPhotoView("assets/images/ig3.jpg")
            : _getPhotoView("assets/images/ig4.jpg"),
      ),
      Container(
        color: Colors.yellow,
        child: FlatButton(
            onPressed: () 
              setState(() 
                _onStart = !_onStart;
              );
            ,
            child: Text("Switch images")),
      ),
      Container(
        height: MediaQuery.of(context).size.width,
        child: _onStart
            ? _getPhotoView("assets/images/ig4.jpg")
            : _getPhotoView("assets/images/ig3.jpg"),
      ),
      Container(
        color: Colors.yellow,
        child: FlatButton(
            onPressed: () 
              setState(() 
                _onStart = !_onStart;
              );
            ,
            child: Text("Switch images")),
      )
    ],
  ),
);

我在开始时得到了我想要的结果：

但是如果我点击按钮并切换图像的路径，我会得到这个：

（如果我再次切换，我会回到第一个屏幕）

当小部件的状态发生变化时，小部件不应该重新创建自己吗？ 我是 Flutter 的新手，我真的不明白为什么会发生这种情况以及如何解决它......

【参考方案1】：

强制重新创建小部件的最简单解决方案是使用键。这样的事情应该会有所帮助（如果我很好地理解了您的问题）：

  Widget _getPhotoView(String path) => AspectRatio(
        aspectRatio: 1,
        child: ClipRect(
          child: PhotoView(
            key: ValueKey(path),
            minScale: PhotoViewComputedScale.covered,
            imageProvider: AssetImage(path),
          ),
        ),
      );