Flutter学习笔记03-StatelessWidget和St

2020-09-11 本文已影响0人 zombie

1.StatelessWidget

StatelessWidget用于不需要维护状态的场景，它通常在build方法中通过嵌套其它Widget来构建UI，在构建过程中会递归的构建其嵌套的Widget。
代码示例：

class Echo extends StatelessWidget {
  const Echo({
    Key key,
    @required this.text,
    this.backgroundColor: Colors.lightBlue,
    this.fontSize: 20,
  }) : super(key: key);

  final String text;
  final Color backgroundColor;
  final double fontSize;

  @override
  Widget build(BuildContext context) {
    return Center(
      child: Container(
        color: backgroundColor,
        child: Text(
          text,
          style: TextStyle(fontSize: fontSize),
        ),
      ),
    );
  }
}

ps：Widget的构造函数参数应使用命名参数，命名参数中的必要参数要添加@required标注，这样有利于静态代码分析器进行检查。在继承Widget时，第一个参数通常应该是Key，如果Widget需要接子Widget，child或children参数通常应被放在参数列表的最后。

2. StatefulWidget

一个StatefulWidget类会对应一个State类，State表示与其对应的StatefulWidget要维护的状态。
State中的保存的状态信息可以在Widget构建时可以被同步读取。在Widget生命周期中可以被改变，当State被改变时，可以手动调用其setState()方法通知Flutter framework状态发生改变，Flutter framework在收到消息后，会重新调用其build方法重新构建Widget树，从而达到更新UI的目的。

2.1 State生命周期

创建一个计数器Widget，点击它可以使计数器加1，在方法中打印观察State的生命周期，代码示例如下：

class StateLifeCycleWidget extends StatefulWidget {
  const StateLifeCycleWidget({
    Key key,
    this.initValue: 0,
  }) : super(key: key);

  final int initValue;

  @override
  _StateLifeCycleWidgetState createState() => _StateLifeCycleWidgetState();
}

class _StateLifeCycleWidgetState extends State<StateLifeCycleWidget> {
  int _counter;

  @override
  void initState() {
    super.initState();
    // 初始化状态
    _counter = widget.initValue;
    print('initState');
  }

  @override
  Widget build(BuildContext context) {
    print("build");
    return Center(
      child: FlatButton(
        onPressed: () {
          setState(() {
            // 点击后计数器自增
            ++_counter;
          });
        },
        child: Text('$_counter'),
      ),
    );
  }

  @override
  void didUpdateWidget(StateLifeCycleWidget oldWidget) {
    super.didUpdateWidget(oldWidget);
    print('didUpdateWidget');
  }

  @override
  void deactivate() {
    super.deactivate();
    print('deactivate');
  }

  @override
  void reassemble() {
    super.reassemble();
    print('reassemble');
  }

  @override
  void didChangeDependencies() {
    super.didChangeDependencies();
    print('didChangeDependencies');
  }
}

运行项目控制台输出如下：

flutter: initState
flutter: didChangeDependencies
flutter: build
flutter: reassemble
flutter: didUpdateWidget
flutter: build

点击⚡️按钮热重载，控制台输出如下：

flutter: reassemble
flutter: didUpdateWidget
flutter: build

此时initState 和didChangeDependencies都没有被调用，而此时didUpdateWidget被调用。
接下来，移除StateLifeCycleWidget，将其替换成Text('测试')，热重载控制台输出如下：

flutter: reassemble
flutter: deactivate
flutter: dispose

StateLifeCycleWidget移除时，deactivate和dispose会依次被调用。

initState
当Widget第一次插入到Widget树时会被调用，对于每一个State对象，Flutter framework只会调用一次该回调，所以，通常在该回调中做一些一次性的操作，如状态初始化、订阅子树的事件通知等。
didChangeDependencies()
当State对象的依赖发生变化时会被调用；典型的场景是当系统语言Locale或应用主题改变时，Flutter framework会通知Widget调用此回调。
build()
它主要是用于构建Widget子树的，会在如下场景被调用：
在调用initState()之后。
在调用didUpdateWidget()之后。
在调用setState()之后。
在调用didChangeDependencies()之后。
在State对象从树中一个位置移除后（会调用deactivate）又重新插入到树的其它位置之后。
reassemble()
此回调是专门为了开发调试而提供的，在热重载(hot reload)时会被调用，此回调在Release模式下永远不会被调用。
didUpdateWidget()
在Widget重新构建时，Flutter framework会调用Widget.canUpdate来检测Widget树中同一位置的新旧节点，然后决定是否需要更新，如果Widget.canUpdate返回true则会调用此回调。Widget.canUpdate会在新旧Widget的key和runtimeType同时相等时会返回true，也就是说在在新旧Widget的key和runtimeType同时相等时didUpdateWidget()就会被调用。
deactivate()
当State对象从树中被移除时，会调用此回调。在一些场景下，Flutter framework会将State对象重新插到树中，如包含此State对象的子树在树的一个位置移动到另一个位置时（可以通过GlobalKey来实现）。如果移除后没有重新插入到树中则紧接着会调用dispose()方法。
dispose()
当State对象从树中被永久移除时调用；通常在此回调中释放资源。

StatefulWidget生命周期如图所示：

2.2 在Widget树中获取State对象

由于StatefulWidget的的具体逻辑都在其State中，有时我们需要获取StatefulWidget对应的State对象来调用一些方法。context对象有一个findAncestorStateOfType()方法，该方法可以从当前节点沿着widget树向上查找指定类型的StatefulWidget对应的State对象。代码示例如下：

Scaffold(
  appBar: AppBar(
    title: Text("子树中获取State对象"),
  ),
  body: Center(
    child: Builder(builder: (context) {
      return RaisedButton(
        onPressed: () {
          // 查找父级最近的Scaffold对应的ScaffoldState对象
          ScaffoldState _state = context.findAncestorStateOfType<ScaffoldState>();
          //调用ScaffoldState的showSnackBar来弹出SnackBar
          _state.showSnackBar(
            // 页底部提示条
            SnackBar(
              content: Text("提示提示"),
            ),
          );
        },
        child: Text("显示SnackBar"),
      );
    }),
  ),
);

如果StatefulWidget的状态是私有的，那么代码中就不应该去直接获取其State对象；如果StatefulWidget的状态是希望暴露出的，我们则可以去直接获取其State对象。但是通过context.findAncestorStateOfType获取StatefulWidget的状态的方法是通用的，并不能在语法层面指定StatefulWidget的状态是否私有，所以在Flutter开发中便有了一个默认的约定：如果StatefulWidget的状态是希望暴露出的，应当在StatefulWidget中提供一个of静态方法来获取其State对象，开发者便可直接通过该方法来获取；如果State不希望暴露，则不提供of方法。这个约定在Flutter SDK里随处可见。所以，上面示例中的Scaffold也提供了一个of方法，代码示例：

// 直接通过of静态方法来获取ScaffoldState 
ScaffoldState _state=Scaffold.of(context); 
_state.showSnackBar(
  SnackBar(
    content: Text("我是SnackBar"),
  ),
);

代码传送门

Flutter学习笔记03-StatelessWidget和St

1.StatelessWidget

2. StatefulWidget

2.1 State生命周期

2.2 在Widget树中获取State对象

猜你喜欢

热点阅读