面试题：Flutter有状态Widget之StatefulWidget的常规使用

Question

请描述如何创建一个继承自StatefulWidget的自定义有状态组件，在这个组件中，有一个按钮，点击按钮后文本内容会发生改变，并写出关键代码示例。

Answer 1

1. 创建继承自StatefulWidget的自定义组件：
   • 首先创建一个类继承自StatefulWidget，重写createState方法返回对应的State类实例。
2. 创建对应的State类：
   • 在State类中定义一个变量来存储文本内容。
   • 定义一个方法用于更新文本内容。
   • 在build方法中构建界面，包含一个按钮和显示文本的Text组件。

以下是关键代码示例（以Flutter为例）：

import 'package:flutter/material.dart';

// 继承自StatefulWidget的自定义组件
class MyStatefulWidget extends StatefulWidget {
  @override
  _MyStatefulWidgetState createState() => _MyStatefulWidgetState();
}

// 对应的State类
class _MyStatefulWidgetState extends State<MyStatefulWidget> {
  String _text = '初始文本';

  // 点击按钮更新文本的方法
  void _updateText() {
    setState(() {
      _text = '文本已改变';
    });
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        Text(_text),
        ElevatedButton(
          onPressed: _updateText,
          child: Text('点击我'),
        ),
      ],
    );
  }
}

在使用时，可以像这样：

void main() {
  runApp(MaterialApp(
    home: Scaffold(
      body: MyStatefulWidget(),
    ),
  ));
}