面试题：Flutter中Widget的状态管理机制

Question

请阐述在Flutter中，StatefulWidget和StatelessWidget的区别，并且举例说明何时应该使用StatefulWidget，何时使用StatelessWidget。在StatefulWidget的状态管理过程中，setState方法的作用是什么，它是如何触发UI更新的？

Answer 1

StatelessWidget 和 StatefulWidget 的区别

1. 定义与性质
   • StatelessWidget：是不可变的，它的状态在创建后不能改变。一旦创建，其属性就固定下来，适用于展示的数据不随时间或用户交互改变的场景。
   • StatefulWidget：可变，其状态可以在widget的生命周期内改变。当状态改变时，会触发UI的重新构建。
2. 实现方式
   • StatelessWidget：只需实现build方法，在该方法中根据传入的属性构建UI。
   • StatefulWidget：需要创建一个继承自StatefulWidget的类，同时还需创建一个继承自State类的内部类来管理状态。State类包含build方法以及其他生命周期方法，如initState、dispose等。

适用场景

1. 使用StatelessWidget的场景 例如展示一个静态的文本标签，像应用的标题栏，其内容在应用运行期间不会改变，此时使用StatelessWidget。示例代码如下：

class StaticTitle extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Text('My App Title');
  }
}

2. 使用StatefulWidget的场景 比如一个计数器，用户点击按钮时数字会增加，这种数据会随用户交互而改变的场景，就需要使用StatefulWidget。示例代码如下：

class Counter extends StatefulWidget {
  @override
  _CounterState createState() => _CounterState();
}

class _CounterState extends State<Counter> {
  int _count = 0;

  void _increment() {
    setState(() {
      _count++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        Text('Count: $_count'),
        ElevatedButton(
          onPressed: _increment,
          child: Text('Increment'),
        )
      ],
    );
  }
}

setState 方法的作用及触发UI更新的原理

1. 作用 setState方法用于通知Flutter框架状态发生了变化，需要重新构建UI。只有通过setState方法改变状态，Flutter才会认为状态改变并触发UI更新。例如在上述计数器的例子中，点击按钮调用setState使_count变量增加，进而触发UI更新显示新的计数。
2. 触发UI更新原理 当调用setState时，它会标记State对象为脏（dirty）。在下一帧绘制时，Flutter框架会检查哪些State对象是脏的，并重新调用这些State对象的build方法，从而重新构建对应的UI部分，实现UI的更新。