面试题：Flutter中如何自定义一个包含状态的Widget并在其中实现基本的交互逻辑

Question

请描述在Flutter中自定义一个StatefulWidget的完整步骤，并在这个Widget中添加一个按钮，点击按钮后改变一个文本显示的内容，写出关键代码片段及解释。

Answer 1

1. 创建StatefulWidget类：

   • 继承StatefulWidget，重写createState方法返回对应的State类实例。

   class MyStatefulWidget extends StatefulWidget {
     const MyStatefulWidget({super.key});
   
     @override
     State<MyStatefulWidget> createState() => _MyStatefulWidgetState();
   }
   

   • 解释：MyStatefulWidget是自定义的StatefulWidget，createState方法用于创建与之关联的State对象，super.key用于在Flutter的Element树中标识和管理Widget。

2. 创建State类：

   • 继承State<MyStatefulWidget>，这里MyStatefulWidget是与之关联的StatefulWidget类型。
   • 定义状态变量，例如用于显示文本的变量。
   • 实现build方法构建UI。

   class _MyStatefulWidgetState extends State<MyStatefulWidget> {
     String displayText = '初始文本';
   
     @override
     Widget build(BuildContext context) {
       return Column(
         children: [
           Text(displayText),
           ElevatedButton(
             onPressed: () {
               setState(() {
                 displayText = '按钮点击后文本';
               });
             },
             child: const Text('点击我'),
           )
         ],
       );
     }
   }
   

   • 解释：displayText是状态变量，用于存储显示的文本。build方法返回一个包含Text和ElevatedButton的Column。ElevatedButton的onPressed回调中使用setState方法，setState会通知Flutter框架状态发生了变化，从而触发build方法重新构建UI，更新Text显示的内容。

3. 使用自定义的StatefulWidget： 在其他地方，例如main函数的MaterialApp中使用该自定义Widget。

void main() {
  runApp(MaterialApp(
    home: Scaffold(
      appBar: AppBar(title: const Text('自定义StatefulWidget示例')),
      body: const MyStatefulWidget(),
    ),
  ));
}

解释：将MyStatefulWidget作为Scaffold的body，这样就可以在应用中显示该自定义的有状态Widget。