Flutter Demo 解析

– 文章信息 –

Author: Jack Lee (jcLee95)
Visit me at: jclee95.blog.csdn.net
Email: 291148484@163.com.
Shenzhen China
Address of this article:blog.csdn.net/qq_28550263…

【介绍】：本文带你阅读 Flutter Demo，并全面解析其间涉及的相关知识点。

【提示】：作用演示在本文末尾

目 录

• [**

  1. 概述

  **](editor.csdn.net/md/?article…)

• [**

  2. 榜首部分：Material 导入 和主函数

  **](editor.csdn.net/md/?article…)

• [

  2.1 看代码

  ](editor.csdn.net/md/?article…)

• [

  2.2 导入 Material

  ](editor.csdn.net/md/?article…)

• [

  2.2 main函数

  ](editor.csdn.net/md/?article…)

• 程序进口

• runApp 函数

• [**

  3. 第二部分：无状况组件 MyApp 类

  **](editor.csdn.net/md/?article…)

• [

  3.1 看代码

  ](editor.csdn.net/md/?article…)

• [

  3.2 承继 StatelessWidget 类

  ](editor.csdn.net/md/?article…)

• [

  3.3 StatelessWidget 类的 build 办法

  ](editor.csdn.net/md/?article…)

• [

  3.4 Dart 语言中的 @override 注解

  ](editor.csdn.net/md/?article…)

• [

  3.5 MaterialApp 顶层组件

  ](editor.csdn.net/md/?article…)

• [

  3.6 色彩方案：ColorScheme 类

  ](editor.csdn.net/md/?article…)

• [**

  4. 第三部分：有状况组件 MyHomePage

  **](editor.csdn.net/md/?article…)

• [

  4.1 看代码

  ](editor.csdn.net/md/?article…)

• [

  4.2 承继于 StatefulWidget 类

  ](editor.csdn.net/md/?article…)

• [

  4.3 title 特点

  ](editor.csdn.net/md/?article…)

• [

  4.4 createState 办法

  ](editor.csdn.net/md/?article…)

• [**

  5. 状况类 _MyHomePageState

  **](editor.csdn.net/md/?article…)

• [

  5.1 看代码

  ](editor.csdn.net/md/?article…)

• [

  5.2 State 类

  ](editor.csdn.net/md/?article…)

• [

  5.3 提升按钮：ElevatedButton组件

  ](editor.csdn.net/md/?article…)

• [**

  F. 附录

  **](editor.csdn.net/md/?article…)

• [

  F.1 Flutter Demo 完好源代码

  ](editor.csdn.net/md/?article…)

• [

  F.2 作用演示

  ](editor.csdn.net/md/?article…)

1. 概述

2. 榜首部分：Material 导入 和主函数

2.1 看代码

这部分代码为：

import 'package:flutter/material.dart';
void main() {
  runApp(const MyApp());
}

2.2 导入 Material

import 'package:flutter/material.dart';

这行代码导入了 Flutter 的 Material 库，它供给了很多的预界说 UI 组件和款式，使咱们能够快速构建具有 Material Design 风格的运用程序。

2.2 main函数

程序进口

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

main() 函数是 Dart 程序的进口点。在这个函数中，咱们调用了 runApp() 办法并传递了一个 MyApp 类的常量实例。runApp() 办法将传入的 Widget（组件）作为运用程序的根 Widget，并开端构建 Widget 树。在这儿，咱们将自界说的 MyApp Widget 作为运用程序的根 Widget。

runApp 函数

runApp() 函数是 Flutter 运用程序的发动函数。它承受一个 Widget 参数，作为运用程序的根 Widget。当调用 runApp() 函数时，Flutter 会将传入的 Widget 附加到烘托树中，并开端构建和显现整个 Widget 树。这个函数一般在运用程序的 main() 函数中调用，以便在运用程序发动时履行。

runApp() 函数的相关信息如下：

项目

描绘

参数

runApp() 函数承受一个 Widget 参数，这个 Widget 一般是一个自界说的根 Widget，它包括了运用程序的整个 UI 结构。

功用

runApp() 函数将传入的 Widget 作为根 Widget，附加到烘托树中。接着，Flutter 开端构建和显现整个 Widget 树，从根 Widget 开端，逐级向下构建各个子 Widget。

用法

runApp() 函数一般在运用程序的 main() 函数中调用，以便在运用程序发动时履行。

例如：

import 'package:flutter/material.dart';
void main() {
  runApp(MyApp());
}
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Hello World')),
        body: Center(child: Text('Welcome to my app!')),
      ),
    );
  }
}

在这个示例中，runApp() 函数在 main() 函数中被调用，并传入了一个 MyApp 类的实例。MyApp 是一个自界说的根 Widget，包括了整个运用程序的 UI 结构。

3. 第二部分：无状况组件 MyApp 类

3.1 看代码

这部分代码为：

class MyApp extends StatelessWidget {
  const MyApp({super.key});
  // 这个 widget 是您运用程序的根。
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        // 这是您运用程序的主题。
        //
        // 测验一下：测验运用 "flutter run" 运转您的运用程序。您会看到
        // 运用程序具有蓝色的工具栏。然后，在不退出运用的情况下，
        // 测验将下面 colorScheme 中的 seedColor 更改为 Colors.green，
        // 然后调用 "hot reload"（保存更改或按下 Flutter 支撑的 IDE 中的 "hot
        // reload" 按钮，或许假如您运用了命令行发动运用程序，则按 "r"）。
        //
        // 留意计数器没有重置为零；运用程序状况在从头加载期间不会丢掉。
        // 要重置状况，请运用热重启替代。
        //
        // 这对代码也相同适用，而不仅仅是值：大多数代码更改都能够
        // 通过热重载进行测试。
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const MyHomePage(title: 'Flutter演示主页'),
    );
  }
}

3.2 承继 StatelessWidget 类

以下是对 Flutter 代码的解析：

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

这段代码界说了一个名为 MyApp 的类，该类承继自 StatelessWidget。StatelessWidget 是一个不可变的 Widget，它描绘了运用程序的一部分 UI。MyApp 类有一个结构函数，它承受一个名为 key 的可选参数，并将其传递给父类 StatelessWidget 的结构函数。

3.3 StatelessWidget 类的 build 办法

  @override
  Widget build(BuildContext context) {

这儿咱们掩盖了 StatelessWidget 类中的 build 办法。build 办法是一个回来 Widget 的函数，它承受一个 BuildContext 参数。BuildContext 是一个表明当前 Widget 在 Widget 树中的方位的目标。当 Flutter 需求构建这个 Widget 时，会调用这个办法。

    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const MyHomePage(title: 'Flutter演示主页'),
    );
  }
}

在 build 办法中，咱们回来一个 MaterialApp Widget。MaterialApp 是一个方便的顶级 Widget，它包括了许多 Material Design 风格的运用程序所需的根本组件。它承受以下参数：

• title：运用程序的标题，一般用于使命管理器或窗口标题。

• theme：运用程序的主题数据。在这儿，咱们运用 ThemeData 类来创立一个自界说主题，其间：

  • colorScheme：运用 ColorScheme.fromSeed() 办法生成一个基于 Colors.deepPurple 的色彩方案。
  • useMaterial3：设置为 true，以便在运用程序中运用 Material 3 风格。

• home：运用程序的主屏幕 Widget。在这儿，咱们创立了一个名为 MyHomePage 的自界说 Widget，并设置了其标题为 “Flutter演示主页”。

在 StatelessWidget 类中，build 办法是一个描绘由该 Widget 表明的用户界面部分的办法。它通过构建其他 Widget 的组合来描绘用户界面，这些 Widget 以更具体的办法描绘用户界面。构建进程会递归进行，直到用户界面的描绘完全具体化。结构会在将此 Widget 刺进到给定的 BuildContext 中以及此 Widget 的依赖关系产生更改（例如，此 Widget 引证的 InheritedWidget 产生更改）时调用此办法。

在实践中，build 办法的首要作用是回来一个新的 Widget，该 Widget 描绘了运用程序的用户界面。一般，这个办法会包括一些条件逻辑，以便依据传入的参数或外部状况生成不同的 Widget。这使得 StatelessWidget 成为一个十分灵敏的构建块，能够用来创立杂乱的用户界面。

@override
Widget build(BuildContext context) {
  // 在此处回来一个新的 Widget，描绘运用程序的用户界面。
}

3.4 Dart 语言中的 @override 注解

关于 dart 语言的注解，能够参阅博文《Dart笔记：Dart语言中的注解》

@override注解用于表明子类的办法掩盖了父类的办法。这有助于在重构代码时确保正确地掩盖了父类办法。假如没有正确掩盖，Dart分析器会发出正告。

3.5 MaterialApp 顶层组件

MaterialApp 是一个方便的顶级 Widget，它封装了一些 Material Design 风格的运用程序所需的根本组件，如导航、主题和路由。它承继自 WidgetsApp 类，供给了一些与 Material Design 相关的功用。以下是 MaterialApp 的一些首要特点及其解释：

特点

类型

默许值

描绘

参阅链接

title

String

‘’

运用程序的标题，将显现在操作系统的使命切换器中。

MaterialApp.title

home

Widget

null

运用程序的默许页面，一般是显现在运用程序发动时的榜首个页面。

MaterialApp.home

theme

ThemeData

null

运用程序的大局主题。您能够界说自己的 ThemeData 目标，以自界说运用程序的色彩、字体、按钮款式等。

MaterialApp.theme

color

Color

null

运用程序在操作系统界面中运用的主色，如 Android 的使命切换器。假如未设置，则运用 ThemeData.primaryColor。

MaterialApp.color

routes

Map<String, WidgetBuilder>

null

运用程序的路由表，用于界说运用程序中的页面导航。路由表是一个字符串到 WidgetBuilder 的映射，其间字符串表明路由称号，WidgetBuilder 是一个承受 BuildContext 并回来 Widget 的函数。

MaterialApp.routes

initialRoute

String

null

运用程序的初始路由称号。假如设置了 initialRoute，则在发动时将导航至该路由，而不是运用 home 特点。

MaterialApp.initialRoute

onGenerateRoute

RouteFactory

null

一个回调函数，用于依据给定的路由设置生成路由。假如您需求在运用程序中运用动态路由或参数化路由，能够运用此特点。

MaterialApp.onGenerateRoute

onUnknownRoute

RouteFactory

null

一个回调函数，用于处理未在 routes 表中找到的路由。一般用于显现一个 “404 页面未找到” 的过错页面。

MaterialApp.onUnknownRoute

navigatorKey

GlobalKey

null

与运用程序的 Navigator 相相关的大局键。假如您需求从运用程序的其他部分访问 Navigator，能够运用此特点。

MaterialApp.navigatorKey

builder

TransitionBuilder

null

一个回调函数，能够在运用程序的路由之上刺进一个 Widget。这对于需求在整个运用程序范围内显现的 Widget（如对话框或掩盖层）十分有用。

MaterialApp.builder

localizationsDelegates

List<LocalizationsDelegate>

null

一个 LocalizationsDelegate 列表，用于设置运用程序的本地化资源。

MaterialApp.localizationsDelegates

supportedLocales

List

null

运用程序支撑的地区列表。

MaterialApp.supportedLocales

以下是一个简略的 MaterialApp 示例：

import 'package:flutter/material.dart';
void main() {
  runApp(MyApp());
}
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'My App',
      theme: ThemeData(primarySwatch: Colors.blue),
      home: MyHomePage(),
    );
  }
}

3.6 色彩方案：ColorScheme 类

官方文档坐落：api.flutter.dev/flutter/mat…

ColorScheme 是一个包括一组用于描绘运用程序色彩的特点的类。它是一个不可变的目标，用于界说运用程序中运用的色彩。在 Material Design 中，ColorScheme 用于界说主题的色彩。以下是 ColorScheme 的一些常用特点：

特点

描绘

primary

运用程序首要部分的布景色彩。例如，工具栏和浮动操作按钮。

primaryVariant

首要色彩的较暗版别。

secondary

运用程序非有必要部分的布景色彩。例如，选项卡栏。

secondaryVariant

非有必要色彩的较暗版别。

surface

卡片和抽屉等外表元素的布景色彩。

background

运用程序布景色彩。

error

过错状况和异常情况下运用的色彩。

onPrimary

显现在首要色彩上的文本和图标的色彩。

onSecondary

显现在非有必要色彩上的文本和图标的色彩。

onSurface

显现在外表色彩上的文本和图标的色彩。

onBackground

显现在布景色彩上的文本和图标的色彩。

onError

显现在过错色彩上的文本和图标的色彩。

brightness

运用程序的整体亮度。它是一个 Brightness 枚举，能够是 Brightness.light 或 Brightness.dark。

例如：

import 'package:flutter/material.dart';
void main() {
  runApp(MyApp());
}
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'ColorScheme Demo',
      theme: ThemeData(
        colorScheme: ColorScheme(
          primary: Colors.blue,
          primaryVariant: Colors.blue[700],
          secondary: Colors.orange,
          secondaryVariant: Colors.orange[700],
          surface: Colors.white,
          background: Colors.white,
          error: Colors.red,
          onPrimary: Colors.white,
          onSecondary: Colors.white,
          onSurface: Colors.black,
          onBackground: Colors.black,
          onError: Colors.white,
          brightness: Brightness.light,
        ),
      ),
      home: MyHomePage(),
    );
  }
}

4. 第三部分：有状况组件 MyHomePage

4.1 看代码

这部分代码如下：

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});
  // 这个 widget 是你的运用程序的主页。它是有状况的，这意味着它有一个 State 目标
  // （在下面界说），其间包括影响其外观的字段。
  // 这个类是 state 的装备。它保存了由父级（在本例中是 App widget）供给的值
  // （在本例中是标题），并被 State 的 build 办法运用。Widget 子类中的字段总是
  // 被标记为 "final"。
  final String title;
  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

4.2 承继于 StatefulWidget 类

这段代码界说了一个名为 MyHomePage 的 StatefulWidget 类，表明该类为一个 有状况组件。

class MyHomePage extends StatefulWidget {

这一行界说了一个名为 MyHomePage 的类，它承继自 StatefulWidget。StatefulWidget 是 Flutter 中的一种 Widget，它能够在其生命周期内坚持可变状况。

const MyHomePage({super.key, required this.title});

这是 MyHomePage 类的结构函数。它承受两个参数：

• super.key：这是传递给父类（StatefulWidget）结构函数的可选 key 参数。key 参数用于操控结构怎么将新的 Widget 与先前的 Widget 相关起来。一般情况下，您不需求处理 key，除非您在处理有状况的 Widget 或需求对 Widget 树进行优化。
• required this.title：这是一个必需的 title 参数，它是一个字符串。required 关键字表明调用结构函数时有必要供给此参数。this.title 表明将传入的参数值赋给类的 title 特点。

4.3 title 特点

final String title;

这一行界说了一个名为 title 的不可变字符串特点。final 关键字表明一旦初始化后，这个特点将无法更改。

4.4 createState 办法

  @override
  State<MyHomePage> createState() => _MyHomePageState();

这是 createState 办法，它是 StatefulWidget 类的必需办法。此办法用于创立与此 StatefulWidget 实例相关的状况目标。@override 关键字表明咱们在这儿重写了父类的办法。State<MyHomePage> createState() => _MyHomePageState(); 表明咱们将回来一个名为 _MyHomePageState 的新状况目标。

createState 办法是 StatefulWidget 类的中心办法，它用于创立与 StatefulWidget 实例相关的状况目标。当结构需求构建 StatefulWidget 时，它会调用此办法以创立一个新的状况目标。这个状况目标将在 StatefulWidget 的整个生命周期中坚持与之相关。

• @override：这是一个元数据注解，表明咱们将重写父类 StatefulWidget 的办法。在这种情况下，咱们重写 createState 办法。这样做的目的是为了供给一个自界说的状况目标，以便在构建咱们的 MyHomePage StatefulWidget 时运用。
• State<MyHomePage> createState()：这是咱们重写的办法。办法的回来类型是 State<MyHomePage>，表明咱们将回来一个与 MyHomePage 类型相关的状况目标。这个状况目标将担任管理与 MyHomePage 实例相关的状况。
• => _MyHomePageState();：这是一个简化的函数体，等同于 { return _MyHomePageState(); }。箭头函数表明咱们将创立一个名为 _MyHomePageState 的新状况目标，并将其作为结果回来。

要了解 createState 办法的重要性，咱们需求了解 StatefulWidget 的工作原理。StatefulWidget 是一个具有可变状况的 Widget。当 StatefulWidget 的状况产生改动时，结构会从头构建 Widget 树以反映这些更改。为了完成这一点，结构需求知道怎么创立与 StatefulWidget 实例相关的状况目标。这就是 createState 办法的作用：告知结构怎么创立状况目标。

在实践运用中，createState 办法一般会回来一个自界说的 State 子类，该子类包括了与 StatefulWidget 实例相关的状况数据和逻辑。这使得 StatefulWidget 能够在其生命周期内坚持状况，从而完成动态 UI、呼应事件和履行其他与状况相关的操作。

5. 状况类 _MyHomePageState

5.1 看代码

在上一节中，界说了一个名为 MyHomePage 的 有状况组件（承继于StatefulWidget 类）。其 createState 办法中运用了一个名为 _MyHomePageState 的 状况类，该类将在创立 MyHomePage 实例时与其相关。

_MyHomePageState 类是一个自界说的 State 子类，担任管理与 MyHomePage 实例相关的状况。它包括一个 _counter 特点，表明按下按钮的次数，以及一个 _incrementCounter 办法，用于更新 _counter 的值。它还完成了 build 办法，用于构建与 MyHomePage 实例相关的 UI。

_MyHomePageState 类的代码如下：

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;
  void _incrementCounter() {
    setState(() {
      // 这个对 setState 的调用告知 Flutter 结构，这个 State 中的某些内容现已产生了改动，
      // 这将导致它从头运转下面的 build 办法，以便显现能够反映更新后的值。假如咱们更改了
      // _counter 而没有调用 setState()，那么 build 办法将不会再次被调用，因而什么都不会产生。
      _counter++;
    });
  }
  @override
  Widget build(BuildContext context) {
    // 每次调用 setState 时，例如上面的 _incrementCounter 办法所做的，
    // 都会从头运转此办法。
    // Flutter 结构现已过优化，以使得从头运转 build 办法变得更快，
    // 因而你能够重建任何需求更新的内容，而不是有必要独自更改 widget 实例。
    return Scaffold(
      appBar: AppBar(
        // 测验一下：测验将这儿的色彩更改为特定色彩（例如 Colors.amber？），
        // 然后触发热重载以检查 AppBar 的色彩改动，而其他色彩坚持不变。
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        // 这儿咱们从由 App.build 办法创立的 MyHomePage 目标中获取值，
        // 并将其用于设置咱们的 appbar 标题。
        title: Text(widget.title),
      ),
      body: Center(
        // Center 是一个布局 widget。它承受一个子 widget，并将其定位
        // 在父 widget 的中央。
        child: Column(
          // Column 也是一个布局 widget。它承受一组子 widget，并笔直摆放它们。
          // 默许情况下，它会主动调整本身尺度以适应其子 widget 水平方向的尺度，
          // 并尽量与其父 widget 一样高。
          // Column 具有各种特点来操控它怎么调整本身尺度以及怎么定位其子 widget。
          // 在这儿，咱们运用 mainAxisAlignment 将子 widget 笔直居中；主轴在这儿
          // 是笔直轴，由于 Column 是笔直的（穿插轴将是水平的）。
          // 测验一下：调用 "debug painting"（在 IDE 中挑选 "Toggle Debug Paint"
          //操作，或许在操控台中按 "p"），以检查每个 widget 的线框。
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            const Text(
              '你现已按了这个按钮很多次了:',
            ),
            Text(
              '$_counter',
              style: Theme.of(context).textTheme.headlineMedium,
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: const Icon(Icons.add),
      ), // 这个跟随逗号使得主动格式化在构建办法中愈加美观。
    );
  }
}

_MyHomePageState 类应该承继自 State 类，并完成 build 办法以构建与 MyHomePage 实例相关的 UI。

5.2 State 类

State 类的官方文档地址为：api.flutter.dev/flutter/wid…

在Flutter中，State类是与StatefulWidget相关的一个重要概念。State目标存储了一个StatefulWidget的可变状况。当状况改动时，State目标会通知Flutter结构重建UI。

State类的生命周期包括以下几个阶段：

阶段

描绘

created

当State目标被创立时，State.initState办法会被调用。

initialized

当State目标被创立，但还没有预备构建时，State.didChangeDependencies在这个时分会被调用。

ready

State目标现已预备好了构建，State.dispose没有被调用的时分。

defunct

State.dispose被调用后，State目标不能够被构建。

要改动State目标的状况，能够运用setState办法。setState办法承受一个回调函数，该函数对状况进行修正。当回调函数履行完毕后，Flutter结构将安排重建UI。

下面是一个简略的比如，演示了怎么运用State类和setState办法：

class Counter extends StatefulWidget {
  @override
  _CounterState createState() => _CounterState();
}
class _CounterState extends State<Counter> {
  int _count = 0;
  void _incrementCounter() {
    setState(() {
      _count = _count + 1;
    });
  }
  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        Text('You have pushed the button this many times:'),
        Text('$_count', style: Theme.of(context).textTheme.headline4),
        ElevatedButton(
          onPressed: _incrementCounter,
          child: Text('Increment Counter'),
        ),
      ],
    );
  }
}

在这个比如中，_CounterState类维护了一个名为_count的状况。当用户点击按钮时，_incrementCounter办法会被调用，运用setState办法更新_count的值。这将触发Flutter结构重建UI，以显现更新后的计数值。

5.3 提升按钮：ElevatedButton组件

这是 Flutter 供给的诸多按钮中的一种，其前身为 凸起按钮：RaisedButton组件，RaisedButton现在现已被废弃，官方引荐运用 ElevatedButton 替代。

关于 Flutter 的各种按钮类组件及其详细用法的更多介绍，请参阅博文《Flutter 组件（三）按钮类组件》：blog.csdn.net/qq_28550263…

F. 附录

F.1 Flutter Demo 完好源代码

import 'package:flutter/material.dart';
void main() {
  runApp(const MyApp());
}
class MyApp extends StatelessWidget {
  const MyApp({super.key});
  // 这个 widget 是您运用程序的根。
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        // 这是您运用程序的主题。
        //
        // 测验一下：测验运用 "flutter run" 运转您的运用程序。您会看到
        // 运用程序具有蓝色的工具栏。然后，在不退出运用的情况下，
        // 测验将下面 colorScheme 中的 seedColor 更改为 Colors.green，
        // 然后调用 "hot reload"（保存更改或按下 Flutter 支撑的 IDE 中的 "hot
        // reload" 按钮，或许假如您运用了命令行发动运用程序，则按 "r"）。
        //
        // 留意计数器没有重置为零；运用程序状况在从头加载期间不会丢掉。
        // 要重置状况，请运用热重启替代。
        //
        // 这对代码也相同适用，而不仅仅是值：大多数代码更改都能够
        // 通过热重载进行测试。
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const MyHomePage(title: 'Flutter演示主页'),
    );
  }
}
class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});
  // 这个 widget 是你的运用程序的主页。它是有状况的，这意味着它有一个 State 目标
  // （在下面界说），其间包括影响其外观的字段。
  // 这个类是 state 的装备。它保存了由父级（在本例中是 App widget）供给的值
  // （在本例中是标题），并被 State 的 build 办法运用。Widget 子类中的字段总是
  // 被标记为 "final"。
  final String title;
  @override
  State<MyHomePage> createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;
  void _incrementCounter() {
    setState(() {
      // 这个对 setState 的调用告知 Flutter 结构，这个 State 中的某些内容现已产生了改动，
      // 这将导致它从头运转下面的 build 办法，以便显现能够反映更新后的值。假如咱们更改了
      // _counter 而没有调用 setState()，那么 build 办法将不会再次被调用，因而什么都不会产生。
      _counter++;
    });
  }
  @override
  Widget build(BuildContext context) {
    // 每次调用 setState 时，例如上面的 _incrementCounter 办法所做的，
    // 都会从头运转此办法。
    // Flutter 结构现已过优化，以使得从头运转 build 办法变得更快，
    // 因而你能够重建任何需求更新的内容，而不是有必要独自更改 widget 实例。
    return Scaffold(
      appBar: AppBar(
        // 测验一下：测验将这儿的色彩更改为特定色彩（例如 Colors.amber？），
        // 然后触发热重载以检查 AppBar 的色彩改动，而其他色彩坚持不变。
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        // 这儿咱们从由 App.build 办法创立的 MyHomePage 目标中获取值，
        // 并将其用于设置咱们的 appbar 标题。
        title: Text(widget.title),
      ),
      body: Center(
        // Center 是一个布局 widget。它承受一个子 widget，并将其定位
        // 在父 widget 的中央。
        child: Column(
          // Column 也是一个布局 widget。它承受一组子 widget，并笔直摆放它们。
          // 默许情况下，它会主动调整本身尺度以适应其子 widget 水平方向的尺度，
          // 并尽量与其父 widget 一样高。
          // Column 具有各种特点来操控它怎么调整本身尺度以及怎么定位其子 widget。
          // 在这儿，咱们运用 mainAxisAlignment 将子 widget 笔直居中；主轴在这儿
          // 是笔直轴，由于 Column 是笔直的（穿插轴将是水平的）。
          // 测验一下：调用 "debug painting"（在 IDE 中挑选 "Toggle Debug Paint"
          //操作，或许在操控台中按 "p"），以检查每个 widget 的线框。
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            const Text(
              '你现已按了这个按钮很多次了:',
            ),
            Text(
              '$_counter',
              style: Theme.of(context).textTheme.headlineMedium,
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: const Icon(Icons.add),
      ), // 这个跟随逗号使得主动格式化在构建办法中愈加美观。
    );
  }
}

F.2 作用演示