面试题：Flutter中StatelessWidget与StatefulWidget在构建方法上的差异

Question

请阐述在Flutter中StatelessWidget和StatefulWidget各自的构建方法有什么特点和不同，并且举例说明在什么场景下使用这两种不同的构建方式。

Answer 1

StatelessWidget构建方法特点

1. 单一build方法：StatelessWidget只有一个build方法，该方法根据传入的Widget的配置（final变量）构建并返回一个Widget树。
2. 不可变：一旦创建，其状态不能改变。构建方法在相同输入下总是返回相同的Widget树，因为它不依赖任何可变状态。

StatefulWidget构建方法特点

1. 创建State对象：StatefulWidget本身有一个createState方法，用于创建关联的State对象。这个State对象持有可变状态。
2. State的build方法：关联的State类有一个build方法，根据当前状态构建Widget树。状态变化时，build方法会被调用重新构建Widget树。

两者不同

1. 状态管理：StatelessWidget用于不需要改变状态的场景，而StatefulWidget用于状态会改变的场景。
2. 重建机制：StatelessWidget在其依赖的final变量变化时重建；StatefulWidget在其关联的State对象的状态变化时重建。

应用场景举例

1. StatelessWidget场景：
   • 显示固定文本的Text组件，如标题。例如一个应用的顶部固定标题栏：

class AppTitle extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Text(
      'My App',
      style: TextStyle(fontSize: 24, fontWeight: FontWeight.bold),
    );
  }
}

2. StatefulWidget场景：
   • 按钮点击计数功能。用户每次点击按钮，计数器增加。

class ClickCounter extends StatefulWidget {
  @override
  _ClickCounterState createState() => _ClickCounterState();
}

class _ClickCounterState extends State<ClickCounter> {
  int _count = 0;

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

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        Text('You have clicked $_count times'),
        ElevatedButton(
          onPressed: _incrementCounter,
          child: Text('Click me'),
        )
      ],
    );
  }
}