StatefulBuilder 与 StatefulWidget

Posted 2023-02-23

【中文标题】StatefulBuilder 与 StatefulWidget

【英文标题】：StatefulBuilder vs StatefulWidget

【发布时间】：2019-10-20 02:29:19

【问题描述】：

StatefulBuilder 和 StatefulWidget 有什么区别？什么时候应该使用一个来代替另一个？ 乍一看，它们看起来很相似。StatefulBuilder 已定义：

一个既具有状态又调用闭包来获取其子小部件的柏拉图式小部件

虽然StatefulBuilder 已定义：

具有可变状态的小部件

【参考方案1】：

在build 方法中创建小部件树时，通常使用Builder 内联。当您需要访问小部件子树中的 context 时，这通常很有帮助。例如：另见SO question

 @override
 Widget build(BuildContext context) 
   return Scaffold(
       appBar: AppBar(
         title: Text("Home"),
       ),
       body: Builder(builder: (thisLowerContext) 
         return RaisedButton(
             onPressed: () => Scaffold.of(thisLowerContext)
                 .showSnackBar(SnackBar(content: Text("button was clicked"))));
       ));
 

当您需要访问该子树的setState 时，请使用StatefulBuilder。这将仅重建 StatefulBuilder 及其子树。

class _SomeWidgetState extends State<HomeScreen> 
  Data data;

  @override
  Widget build(BuildContext context) 
    return Scaffold(
        appBar: AppBar(
          title: Text("Home"),
        ),
        body: StatefulBuilder(builder: (thisLowerContext, innerSetState) 
          if (data == null) 
            return RaisedButton(
                child: Text("Load data"),
                onPressed: () async 
                  Scaffold.of(thisLowerContext)
                      .showSnackBar(SnackBar(content: Text("Loading data...")));
                  var loadedData = await _loadData();
                  innerSetState(() => data = loadedData);
                );
           else 
            return RaisedButton(
                child: Text("Reload data"),
                onPressed: () async 
                  Scaffold.of(thisLowerContext).showSnackBar(
                      SnackBar(content: Text("Reloading data...")));
                  var loadedData = await _reloadData();
                  innerSetState(() => data = loadedData);
                );
          
        ));
  

【讨论】：

不太推荐使用StatefulBuilder这种方式。考虑改用 InheritedWidgets 或 ValueNotifier。