编写自己的 Widget 类

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

你用过的每个组件，Text、Row、Scaffold，都是别人编写的类。你也可以编写自己的类，而且你已经有一个了：MyApp。

从现在起，你的应用有两个类。MyApp 使用 MaterialApp 设置应用，屏幕则有自己的类：HomePage：

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(child: Text('Hi')),
    );
  }
}

extends StatelessWidget 会让 HomePage 成为一个组件。const HomePage({super.key}); 这一行让你可以写 HomePage()：照原样复制这一行，并使用你的类名。build 会返回组件显示的内容。

像使用其他组件一样使用它：home: HomePage()。把屏幕放在自己的类中更容易阅读。在接下来的课程中，这样做还能让屏幕发生变化，同时应用的其他部分保持不变。

挑战

简单

HomePage 类写在文件底部，但应用仍显示旧的 Coming soon 屏幕。

给 HomePage 中的 Scaffold 添加一个标题为 Notes 的 AppBar。
让 MyApp 显示它：将 home: 后面的整个 Scaffold 替换为 HomePage()。

亲手试试

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: Scaffold(
        body: Center(child: Text('Coming soon')),
      ),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(child: Text('No notes yet')),
    );
  }
}