Flutter for OpenHarmony前置知识《Flutter 基础组件初探：第一章》

个人首页： VON
鸿蒙系列专栏：鸿蒙开发小型案例总结
综合案例：鸿蒙综合案例开发
鸿蒙6.0：从0开始的开源鸿蒙6.0.0
鸿蒙5.0：鸿蒙5.0零基础入门到项目实战
Electron适配开源鸿蒙专栏：Electron for OpenHarmony
本文章所属专栏：Flutter for OpenHarmony

Flutter 基础组件初探

[🌟 Flutter 入门：从一行 "Hello, World!" 开始](#🌟 Flutter 入门：从一行 “Hello, World!” 开始)
- [📄 完整代码示例](#📄 完整代码示例)
- [🔍 逐行解析：理解每一部分的作用](#🔍 逐行解析：理解每一部分的作用)
- - [1. `import 'package:flutter/material.dart';`](#1. import 'package:flutter/material.dart';)
  - [2. `void main() { runApp(MyApp()); }`](#2. void main() { runApp(MyApp()); })
  - [3. `class MyApp extends StatelessWidget`](#3. class MyApp extends StatelessWidget)
  - [4. `@override Widget build(BuildContext context)`](#4. @override Widget build(BuildContext context))
  - [5. `MaterialApp`](#5. MaterialApp)
  - [6. `debugShowCheckedModeBanner: false`](#6. debugShowCheckedModeBanner: false)
  - [7. `home: Scaffold(...)`](#7. home: Scaffold(...))
  - [8. `AppBar(title: Text('Hello, World!'))`](#8. AppBar(title: Text('Hello, World!')))
  - [9. `body: Center(child: Text('Hello, World!'))`](#9. body: Center(child: Text('Hello, World!')))
- [🧩 核心概念总结](#🧩 核心概念总结)
- [🖼️ 对比图示：代码与界面的对应关系](#🖼️ 对比图示：代码与界面的对应关系)
- 基础组件部分
- - [🧱 整体结构概览](#🧱 整体结构概览)
- [🔍 各组件详细解析](#🔍 各组件详细解析)
- - [1. `MaterialApp`](#1. MaterialApp)
  - [2. `Scaffold`](#2. Scaffold)
  - [3. `Center`](#3. Center)
  - [4. `Column`](#4. Column)
  - [5. 第一个子项：`Container`（蓝色方块）](#5. 第一个子项：Container（蓝色方块）)
  - [6. `SizedBox(height: 50)`](#6. SizedBox(height: 50))
  - [7. 第二个子项：`Container`（绿色方块 + Row）](#7. 第二个子项：Container（绿色方块 + Row）)
  - [8. 第三个子项：`Container`（红色方块 + Column）](#8. 第三个子项：Container（红色方块 + Column）)
  - [9. 第四个子项：`Expanded` + `ListView`](#9. 第四个子项：Expanded + ListView)
  - [10. 最后一个子项：`ElevatedButton`](#10. 最后一个子项：ElevatedButton)
- [📌 总结：各组件角色](#📌 总结：各组件角色)

🌟 Flutter 入门：从一行 "Hello, World!" 开始

Flutter 是 Google 推出的跨平台 UI 工具包，可用于构建高性能、高保真的 iOS、Android、Web 和桌面应用。它的核心思想是"一切皆 Widget（组件）"。今天，我们就从最经典的 "Hello, World!" 程序出发，一步步拆解 Flutter 应用的基本结构。

有同学反应配置好环境后不会用，VON这里就保姆级教学，确保大家可以使用Flutter来实现跨平台开发

将你们之前拉取的项目用vscode或者trae打开，为了照顾萌新我这里尽量描述的详细点

没有拉取过项目的可以参考我之前的文章：

Flutter for HarmonyOS 6 全环境配置教程（2025最新版）

Flutter 项目成功运行后，如何正确迁移到 OpenHarmony？常见疑问与跳转失效问题解析

直接将桌面的文件夹拉过去

📄 完整代码示例

这里直接可以复制到你的main.dart文件

dart 复制代码

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        appBar: AppBar(
          title: Text('Hello, World!'),
        ),
        body: Center(
          child: Text('Hello, World!'),
        ),
      ),
    );
  }
}

运行这段代码，你会看到一个带有顶部标题栏、中央显示文字的简洁界面（如下图所示）：

可以看到运行成功，成功后就可以去看下面的组件部分了

✅ 这就是你的第一个 Flutter 应用！

🔍 逐行解析：理解每一部分的作用

1. `import 'package:flutter/material.dart';`

导入 Flutter 的 Material Design 组件库。
Material Design 是 Android 风格的设计规范，包含按钮、卡片、列表等常用 UI 元素。
几乎所有 Flutter 应用都会用到这个库。

2. `void main() { runApp(MyApp()); }`

main() 是 Dart 语言的程序入口函数，应用启动时首先执行这里。
runApp() 是 Flutter 的核心方法，用于将根 Widget（这里是 MyApp）挂载到屏幕上。
从此刻起，Flutter 引擎开始渲染 UI。

3. `class MyApp extends StatelessWidget`

定义一个名为 MyApp 的类，继承自 StatelessWidget。
StatelessWidget 表示这是一个无状态组件：一旦创建，其内容不会随内部数据变化而更新（适用于静态 UI）。
如果你需要动态交互（如点击计数），则应使用 StatefulWidget。

4. `@override Widget build(BuildContext context)`

重写 build 方法，这是每个 Widget 必须实现的核心函数。
它返回一个 Widget 树，描述了当前组件的 UI 结构。
BuildContext 用于定位当前 Widget 在树中的位置，常用于导航、主题获取等。

5. `MaterialApp`

提供符合 Material Design 规范的应用基础框架。
包含主题管理、路由系统、国际化支持等高级功能。
所有 Material 风格的 App 都应以 MaterialApp 作为根组件。

6. `debugShowCheckedModeBanner: false`

调试模式下，Flutter 默认会在右上角显示一个红色的 "DEBUG" 横幅。
设置为 false 可隐藏该标识，让界面更干净，更适合演示或截图。

7. `home: Scaffold(...)`

home 指定应用启动时显示的默认页面。
Scaffold 是 Material Design 的页面骨架组件 ，它提供了标准布局结构：
- appBar：顶部应用栏
- body：主内容区域
- floatingActionButton：悬浮操作按钮（可选）
- bottomNavigationBar：底部导航栏（可选）

8. `AppBar(title: Text('Hello, World!'))`

创建一个顶部导航栏。
title 属性接受任意 Widget，通常使用 Text 显示页面标题。

9. `body: Center(child: Text('Hello, World!'))`

body 是页面的主体内容区域。
Center 是一个布局组件，用于将其子组件在父容器中水平和垂直居中。
Text('Hello, World!') 是最终显示在屏幕中央的文字。

🧩 核心概念总结

概念	说明
Widget	Flutter 中一切皆 Widget，包括布局、文本、按钮、甚至应用本身。
StatelessWidget	无状态组件，UI 不会随数据变化而更新。
MaterialApp + Scaffold	构建标准 Material 风格应用的黄金组合。
build 方法	每个 Widget 的 UI 都通过 `build` 方法返回一棵 Widget 树来定义。

🖼️ 对比图示：代码与界面的对应关系

蓝色区域 ：MaterialApp ------ 应用容器
绿色区域 ：Scaffold ------ 页面骨架
紫色区域 ：AppBar ------ 顶部标题栏
橙色区域 ：body 中的 Center + Text ------ 居中文本

基础组件部分

dart 复制代码

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        appBar: AppBar(
          title: Text('Hello, Title!'),
        ),
      
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              // 容器
              Container(
                width: 100.0,
                height: 100.0,
                color: Colors.blue,
                child: Center(
                  child: Text('Hello Container'),
                ),
              ),
              SizedBox(height: 50), // 添加间距
              // 行
              Container(
                width: 100.0,
                height: 100.0,
                color: Colors.green,
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: [
                    Text('Row 1'),
                    SizedBox(width: 8), // 添加水平间距
                    Text('Row 2'),
                  ],
                ),
              ),
              SizedBox(height: 50),
              // 列
              Container(
                width: 100.0,
                height: 100.0,
                color: Colors.red,
                child: Column(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: [
                    Text('Column 1'),
                    SizedBox(height: 8), // 添加垂直间距
                    Text('Column 2'),
                  ],
                ),
              ),
              SizedBox(height: 50),
              // 列表视图
              Expanded(
                child: Container(
                  color: const Color.fromARGB(255, 105, 17, 221),
                  child: ListView(
                    shrinkWrap: true,
                    children: [
                      ListTile(title: Text('1'), leading: Icon(Icons.map)),
                      ListTile(title: Text('2'), leading: Icon(Icons.photo)),
                      ListTile(title: Text('3'), leading: Icon(Icons.photo)),
                      ListTile(title: Text('4'), leading: Icon(Icons.photo)),
                      ListTile(title: Text('5'), leading: Icon(Icons.photo)),
                    ],
                  ),
                ),
              ),
              // 按钮
              SizedBox(height: 50),
              // 按钮
              ElevatedButton(
                onPressed: () => print('Clicked!'),
                style: ElevatedButton.styleFrom(
                  minimumSize: Size(150, 40),
                  backgroundColor: Colors.yellow,
                ),
                child: Text('我是按钮'),
              )
            ],
          ),
        ),
      )
    );
  }
}

🧱 整体结构概览

dart 复制代码

MaterialApp → Scaffold → AppBar + body (Center → Column → 多个子组件)

这是典型的 Flutter 页面结构：

MaterialApp：提供 Material Design 主题和路由支持
Scaffold：页面骨架（含 AppBar、body、BottomNavigationBar 等）
body：页面主要内容区域

🔍 各组件详细解析

1. `MaterialApp`

dart 复制代码

MaterialApp(
  debugShowCheckedModeBanner: false,
  home: Scaffold(...),
)

作用：Flutter 应用的根组件，启用 Material Design 风格。
debugShowCheckedModeBanner: false：隐藏右上角的"DEBUG"水印。
home：指定应用启动时显示的首页（这里是 Scaffold）。

2. `Scaffold`

dart 复制代码

Scaffold(
  appBar: AppBar(...),
  body: Center(...),
)

作用：提供标准的页面结构（顶部栏、主体内容、底部栏等）。
appBar：顶部导航栏，显示标题 'Hello, Title!'。
body：页面主要内容区域，这里放了一个 Center。

3. `Center`

dart 复制代码

Center(
  child: Column(...),
)

作用：将子组件在其父容器中水平+垂直居中。
它的子组件是 Column，所以整个列会居中显示在屏幕中央。

⚠️ 注意：虽然叫 Center，但它只影响直接子组件的位置，不影响内部布局。

4. `Column`

dart 复制代码

Column(
  mainAxisAlignment: MainAxisAlignment.center,
  crossAxisAlignment: CrossAxisAlignment.start,
  children: [...],
)

作用：垂直排列多个子组件（从上到下）。
mainAxisAlignment: MainAxisAlignment.center：
→ 让所有子组件在主轴（垂直方向）上居中对齐（即上下留白相等）。
crossAxisAlignment: CrossAxisAlignment.start：
→ 让子组件在交叉轴（水平方向）上左对齐（不是居中！）。

✅ 所以整体效果是：整列内容垂直居中，但每行文字靠左对齐。

5. 第一个子项：`Container`（蓝色方块）

dart 复制代码

Container(
  width: 100.0,
  height: 100.0,
  color: Colors.blue,
  child: Center(child: Text('Hello Container')),
)

作用：一个带样式的盒子。
设置了固定宽高（100×100），背景色为蓝色。
内部用 Center 让文字居中。
展示了 Container 的基本用法：尺寸 + 背景 + 子组件布局。

6. `SizedBox(height: 50)`

dart 复制代码

SizedBox(height: 50)

作用：创建一个不可见的占位空间，高度为 50 像素。
用于在垂直布局中添加间距 ，比 Padding 更语义清晰。

7. 第二个子项：`Container`（绿色方块 + Row）

dart 复制代码

Container(
  width: 100, height: 100,
  color: Colors.green,
  child: Row(
    mainAxisAlignment: MainAxisAlignment.center,
    children: [Text('Row 1'), SizedBox(width: 8), Text('Row 2')],
  ),
)

作用：展示水平布局。
Row：水平排列子组件。
mainAxisAlignment: MainAxisAlignment.center：让两个文本在绿色方块内水平居中。
中间用 SizedBox(width: 8) 添加水平间距，避免文字粘连。

8. 第三个子项：`Container`（红色方块 + Column）

dart 复制代码

Container(
  width: 100, height: 100,
  color: Colors.red,
  child: Column(
    mainAxisAlignment: MainAxisAlignment.center,
    children: [Text('Column 1'), SizedBox(height: 8), Text('Column 2')],
  ),
)

作用：展示嵌套的垂直布局。
内部 Column 将两个文本垂直居中 排列，并用 SizedBox 分隔。

💡 这展示了：Column 里可以嵌套 Column 或 Row，实现复杂布局。

9. 第四个子项：`Expanded` + `ListView`

dart 复制代码

Expanded(
  child: Container(
    color: Color(105, 17, 221),
    child: ListView(
      shrinkWrap: true,
      children: [ListTile(...), ...],
    ),
  ),
)

Expanded ：
- 关键作用 ：让子组件占据 Column 中剩余的所有垂直空间。
- 解决了之前 ListView 溢出的问题。
ListView ：
- 可滚动列表。
- shrinkWrap: true：让列表高度根据内容自适应（配合 Expanded 使用时其实可省略，但保留无害）。
ListTile ：
- Material Design 风格的列表项，自带图标 + 标题布局。

✅ 这是推荐做法 ：在 Column 中使用 Expanded 包裹 ListView，避免溢出。

10. 最后一个子项：`ElevatedButton`

dart 复制代码

ElevatedButton(
  onPressed: () => print('Clicked!'),
  style: ElevatedButton.styleFrom(
    minimumSize: Size(150, 40),
    backgroundColor: Colors.yellow,
  ),
  child: Text('我是按钮'),
)

作用：一个带阴影的 Material 风格按钮。
onPressed：点击回调（目前只是打印日志）。
style：自定义样式：
- minimumSize：最小宽高（150×40）
- backgroundColor：背景色为黄色

🔜 你可以将其改为弹窗（如前面建议的 showDialog）。

📌 总结：各组件角色

组件	角色
`MaterialApp`	应用入口，提供主题
`Scaffold`	页面骨架
`AppBar`	顶部标题栏
`Center`	整体内容居中
`Column`	垂直排列子项
`Container`	带样式的盒子（尺寸/颜色/边距等）
`Row` / `Column`（嵌套）	实现水平/垂直布局
`SizedBox`	添加固定间距
`Expanded`	占据剩余空间（解决 ListView 溢出）
`ListView` + `ListTile`	可滚动列表项
`ElevatedButton`	交互按钮

Flutter for OpenHarmony前置知识《Flutter 基础组件初探：第一章》

Flutter 基础组件初探

🌟 Flutter 入门：从一行 "Hello, World!" 开始

📄 完整代码示例

🔍 逐行解析：理解每一部分的作用

1. import 'package:flutter/material.dart';

2. void main() { runApp(MyApp()); }

3. class MyApp extends StatelessWidget

4. @override Widget build(BuildContext context)

5. MaterialApp

6. debugShowCheckedModeBanner: false

7. home: Scaffold(...)

8. AppBar(title: Text('Hello, World!'))

9. body: Center(child: Text('Hello, World!'))

🧩 核心概念总结

🖼️ 对比图示：代码与界面的对应关系

基础组件部分

🧱 整体结构概览

🔍 各组件详细解析

1. MaterialApp

2. Scaffold

3. Center

4. Column

5. 第一个子项：Container（蓝色方块）

6. SizedBox(height: 50)

7. 第二个子项：Container（绿色方块 + Row）

8. 第三个子项：Container（红色方块 + Column）

9. 第四个子项：Expanded + ListView

10. 最后一个子项：ElevatedButton

📌 总结：各组件角色

1. `import 'package:flutter/material.dart';`

2. `void main() { runApp(MyApp()); }`

3. `class MyApp extends StatelessWidget`

4. `@override Widget build(BuildContext context)`

5. `MaterialApp`

6. `debugShowCheckedModeBanner: false`

7. `home: Scaffold(...)`

8. `AppBar(title: Text('Hello, World!'))`

9. `body: Center(child: Text('Hello, World!'))`

1. `MaterialApp`

2. `Scaffold`

3. `Center`

4. `Column`

5. 第一个子项：`Container`（蓝色方块）

6. `SizedBox(height: 50)`

7. 第二个子项：`Container`（绿色方块 + Row）

8. 第三个子项：`Container`（红色方块 + Column）

9. 第四个子项：`Expanded` + `ListView`

10. 最后一个子项：`ElevatedButton`