试图从小部件访问状态，可能使用了错误的设计

Posted 2023-02-23

【中文标题】试图从小部件访问状态，可能使用了错误的设计

【英文标题】：Trying to access state from widget, probably using wrong design

【发布时间】：2020-08-08 07:14:00

【问题描述】：

我正在学习颤振并尝试制作一种 MutableImage 小部件。这个想法是制作一个 MutableImage StatefulWidget，它会在提供新图像时重建。每次更改图像时，我都会尽量避免重建整个小部件树，因为这似乎有点矫枉过正，我计划每秒更新几次图像。所以我只想重建那个 MutableImage 小部件。

所以这是我的代码，用 cmets 来解释我卡在哪里：

class MutableImage extends StatefulWidget 
  @override
  State<StatefulWidget> createState() 
    return MutableImageState();
  

  void updateImage(List<int> bytes) 
    // !!!!!! Would like to call this method here, but state is not available from Widget, which means I want to do something wrong, but not sure exactly how I should do it...
    // this.state.updateImage(bytes);
  

class MutableImageState extends State<MutableImage> 
  List<int> _bytes;
  void updateImage(List<int> bytes) 
    setState(() 
      _bytes=bytes;
    );
  

  @override
  Widget build(BuildContext context) 
    if ((_bytes==null)||(_bytes.length==0)) 
      return Center(child: CircularProgressIndicator());
    
    return Image.memory(_bytes);
  

然后的想法是在另一个有状态的小部件中使用这样的小部件

MutableImage _mutableImage;
@override
Widget build(BuildContext context) 
  if (_mutableImage == null) _mutableImage=MutableImage();
  return : Row( //using Row as an example, the idea is that the mutable Image is deep into a tree of widgets, and I want to rebuild only _mutableImage when image changes, not all widgets.
    children : <Widget>[
      child0, child1, _mutableImage, child3, child4
    ]
  );


void updateImage(List<int> bytes) 
  _mutableImage?.updateImage(bytes);

那么有什么好的方法可以做到这一点吗？我很困惑，谢谢任何帮助/提示。

【参考方案1】：

这是申请GlobalKey 的地方。在MutableImage 的父窗口小部件中创建一个全局键并将其传递给MutableImage。使用该密钥，您可以通过在密钥上使用.currentState 并调用updateImage 来访问MutableImage 状态。

您必须添加键作为MutableImage 构造函数的参数并调用super(key: key)。 updateImage 也应该移动到MutableImage 的状态。

键：

final GlobalKey<MutableImageState> _imageKey = GlobalKey<MutableImageState>();

传递密钥：

MutableImage(key: _imageKey);

访问状态：

_imageKey.currentState.updateImage();

【讨论】：

哦，好的，谢谢，这看起来确实是一个非常好的解决方案。让我测试一下，我会接受答案。 edit 似乎 GlobalKey 变量应该使用 MutableImageState 而不是 MutableImage （编辑你的答案）。

@jptsetung 是的，很抱歉应该是状态。