Flutter setState() 分析

Flutter 中的Widget组件分为有状态StatefulWidget和无状态StatelessWidget，

用户操作显示状态变化的都是有状态组件

比如TextField输入框就是有状态的组件，用户输入内容，UI显示对应的内容

再比如IconButton是一个图标按钮，但它是一个无状态的Widget

setState()要求其作用对象必须是一个有状态的组件。如果作用对象本身无状态,比如SimpleDialog()，那么setState()将无法起作用。

既然说到 SimpleDialog()中的子组件默认是无状态的，那怎么解决呢？

在SimpleDialog组件外部“套”一个StatefulBuilder组件即可

下面看一段代码示例，声明一个有状态组件，点击按钮，显示的数字会+1：

class SetStateWidget extends StatefulWidget{
  @override
  _SetStateWidget createState() => _SetStateWidget();
}


class _SetStateWidget extends State<SetStateWidget>{

  int count = 0;

  @override
  Widget build(BuildContext context) {
    return Container(
      alignment: Alignment.center,
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center, // 将控件放在垂直方向的中间位置
        children: <Widget>[
          Text(
            "计数器：${count} 次",
            style: TextStyle(
              fontSize: 20,
              color: Colors.red,
            ),
          ),
          ElevatedButton(
            child: Text("点我"),
            onPressed: (){
//              count++;   放在这里可以
              setState((){
                count++;  // 放在这里也可以
              });
            },
          ),
        ],
      )
    );
  }
}

看看效果图

1585e0f1144512caf6b128c226c2acb.png

当点击屏幕中的按钮时，数字就会递增，我们在setState前将变量+1，在setState执行+1也可以

当调用setState后，所在Widget会进行重新渲染，这样便实现了页面上显示数据的更新。

如果我们在修改变量的值后不调用setState，那么页面不会有改变。

例子中只是修改了简单类型Int，换做其他类型的变量同理，因为重新渲染跟变量类型并没有关系。

在实例化一个组件类时，会渲染类中的build方法所返回的组件

调用setState，会重新触发build函数，实现更新显示内容的目的

如何验证呢？

可以在build函数中print标识，在调用setState后，会重新调用build函数进行的页面再渲染

每个组件是靠重新实例化进行的再次渲染