flutter自定义控件 - StatefulWidget获取当前State

Posted 2022-08-29 一叶飘舟

问题描述

StatefulWidget作为一种状态可变的控件，其状态的改变通常是由State.setState进行的，但当我们需要在StatefulWidget之外改变它的状态时，因Widget的重新构造并不一定使得State重新构造，所以我们难以直接获取当前Widget所绑定的State，从而改变StatefulWidget的状态。

解决方案

常规方案

我们可以为StatefulWidget设置一个GlobalKey()，通过GlobalKey.currentState来获取当前绑定的State实例。示例如下：
 

class _Widget extends StatefulWidget 
  final GlobalKey _key;
  final double width;
  final double height;

  const _Widget(this.width, this.height, this._key) : super(key: _key);

  @override
  State<StatefulWidget> createState() => _State();

  void setSize(double width, double height) 
    var state = _key.currentState;
    if (state is _State) 
      state.setSize(width, height);
    
  


class _State extends State<_Widget> 
  ...
  void setSize(double width, double height) 
    setState(() 
      _width = width;
      _height = height;
    );
  
  ...

此时就可以通过_Widget.setSize来改变该StatefulWidget的状态。

与此类似的方案可以参考：flutter通过GlobalKey在自定义Widget外部获取其state刷新页面_一叶飘舟的博客-CSDN博客

 另辟蹊径

只适用于使用StatefulWidget的一个实例。

对于一个StatefulWidget，其Widget实例可以有多个，但其State实例只有一个。因此当只使用该StatefulWidget的一个实例时（即页面上只有一个该自定义的StatefulWidget控件），可以通过静态字段来引用State实例。示例如下：
 

class _Widget extends StatefulWidget 
  final double width;
  final double height;

  const _Widget(this.width, this.height, Key? key) : super(key: key);

  @override
  State<StatefulWidget> createState() 
    return _State();
  

  void setSize(double width, double height) 
    _State.state?.setSize(width, height);
  


class _State extends State<_Widget> 
  static _State? state;

  _State() 
    state = this;
  

  void setSize(double width, double height) 
    setState(() 
      _width = width;
      _height = height;
    );
  

  @override
  void dispose() 
    super.dispose();
    state = null;
  

  ...