第 1 课：Widget 与最小界面结构

日期：2026-08-28
课程序号：第 1 课
知识点：Widget、runApp() 与最小 Flutter 页面

知识点

理解 Flutter 界面由 Widget 组合而成，并用 runApp() 启动一个最小应用。

用途

Widget 是 Flutter UI 的基本单元。文本、布局、按钮乃至整个页面都通过 Widget 树进行组合。

核心概念

main() 是 Dart 程序入口。
runApp() 接收根 Widget，并把它挂载到屏幕。
MaterialApp 提供 Material Design 应用结构。
Scaffold 提供页面骨架，Center 和 Text 分别负责居中与显示文字。

示例代码

dart

import 'package:flutter/material.dart';

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

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

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      home: Scaffold(
        body: Center(
          child: Text('Flutter 第 1 课'),
        ),
      ),
    );
  }
}

5 分钟练习

把示例中的文字改成“我开始学习 Flutter”，并在 Scaffold 中增加标题为“学习计划”的 AppBar。

参考答案

dart

return MaterialApp(
  home: Scaffold(
    appBar: AppBar(title: const Text('学习计划')),
    body: const Center(
      child: Text('我开始学习 Flutter'),
    ),
  ),
);

与上一课的联系

这是 Flutter 路线的第一课。下一课将继续拆解 StatelessWidget 与 build() 的职责。