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

• 个人首页： VON

• 鸿蒙系列专栏： 鸿蒙开发小型案例总结

• 综合案例 ：鸿蒙综合案例开发

• 鸿蒙6.0：从0开始的开源鸿蒙6.0.0

• 鸿蒙5.0：鸿蒙5.0零基础入门到项目实战

• Electron适配开源鸿蒙专栏：Electron for OpenHarmony

• 本文章所属专栏：Flutter for OpenHarmony

🌟 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文件

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!') 是最终显示在屏幕中央的文字。

🧩 核心概念总结

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

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

基础组件部分

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('我是按钮'),
              )
            ],
          ),
        ),
      )
    );
  }
}

🧱 整体结构概览

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

这是典型的 Flutter 页面结构：

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

🔍 各组件详细解析

1. MaterialApp

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

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

2. Scaffold

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

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

3. Center

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

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

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

4. Column

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

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

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

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

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

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

6. SizedBox(height: 50)

SizedBox(height: 50)

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

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

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）

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

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

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

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

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

📌 总结：各组件角色