编写 StatefulWidget

本课属于 Coddy Flutter 学习旅程的“让应用具有交互性”单元。第 12 课，共 34 课。

这次你要自己编写 StatefulWidget。屏幕上显示 I feel Sleepy，按下 Drink coffee 后，应该变成 I feel Awake。作为 StatelessWidget，它永远无法做到这一点。

将 StatelessWidget 转换为 StatefulWidget 分为三个步骤：

将 extends StatelessWidget 改为 extends StatefulWidget，并将它的 build 替换为 createState。
在它下面编写 State 类，并将 build 移到这个类中，保持不变。
将会变化的变量从 build 中移出，放到 State 类的顶部。

class HomePage extends StatefulWidget {
  const HomePage({super.key});

  @override
  State<HomePage> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  String _mood = 'Sleepy';

  @override
  Widget build(BuildContext context) {
    ...
  }
}

第 3 步很重要。放在 build 顶部的变量会在每次运行 build 时重新创建，所以调用 setState 后，它会变回 'Sleepy'。放在 State 类顶部的变量只会创建一次，并会保留你赋给它的值。

挑战

中等

将 HomePage 改为带有 _HomePageState 类的 StatefulWidget。在 State 顶部用 String _mood = 'Sleepy'; 保存心情，并让 Drink coffee 使用 setState 将它改为 'Awake'。

亲手试试

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: HomePage(),
    );
  }
}

class HomePage extends StatelessWidget {
  const HomePage({super.key});

  @override
  Widget build(BuildContext context) {
    String mood = 'Sleepy';
    return Scaffold(
      appBar: AppBar(title: Text('Mood')),
      body: Center(
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: [
            Text('I feel $mood', style: TextStyle(fontSize: 32)),
            SizedBox(height: 16),
            ElevatedButton(
              onPressed: () {},
              child: Text('Drink coffee'),
            ),
          ],
        ),
      ),
    );
  }
}