在跨平台开发中，掌握基本 UI 组件的使用是迈向专业开发的第一步。对于初学者而言，一个清晰、结构化的界面不仅能提升用户体验，更能帮助开发者建立良好的工程思维。本文将以一段在 OpenHarmony 模拟器中可直接运行的基础 Flutter 代码为例，系统讲解如何利用 MaterialApp、Scaffold、AppBar、Container 和 Text 等核心组件，构建一个典型的“三段式”页面布局。

⚠️ 注意：本文不涉及环境配置，假设你已具备 Flutter for OpenHarmony 开发能力，并能将代码部署至模拟器验证运行效果。

---

完整代码展示

首先，请看你在 IDE 中编写的原始代码：

// lib/main.dart
import 'package:flutter/material.dart';

void main() {
  runApp(MaterialApp(
    title: "Flutter",
    home: Scaffold(
      appBar: AppBar(
        title: Text("上面组件"),
        centerTitle: true,
      ),
      body: Container(
        child: Center(
          child: Text("中部组件"),
        ),
      ),
      bottomNavigationBar: Container(
        height: 80,
        child: Center(
          child: Text("底部组件"),
        ),
      ),
    ),
  ));
}

这段代码虽短，却涵盖了 Flutter 应用中最常见的三大区域划分：顶部导航栏、主内容区、底部栏。它不仅适用于手机端，在 OpenHarmony 的多种设备形态上也能通过响应式设计适配良好。

---

一、应用入口：MaterialApp 的角色与职责

runApp(MaterialApp(
  title: "Flutter",
  home: Scaffold(...),
));

MaterialApp 是 Flutter 推荐的应用根组件，它提供了 Material Design 规范所需的基础功能，如主题、导航、路由管理等。

关键属性说明：

• title：设置应用标题（用于系统任务栏显示）；
• home：指定首页页面（必须是 Widget）；
• theme：全局主题设置（可选）；

💡 提示：在 OpenHarmony 上，MaterialApp 会自动适配系统主题（如深色模式），无需额外处理。

---

二、页面骨架：Scaffold 的区域划分艺术

Scaffold 是 Flutter 中最常用的页面容器，它提供了一套标准的 Material Design 页面结构，包括：

• 顶部导航栏（appBar）
• 主体内容区（body）
• 底部导航栏（bottomNavigationBar）

在你的代码中，我们仅使用了前三个部分，这已经足够构成一个完整的界面。

实践建议：

• 如果你需要支持多语言，可在 appBar.title 中使用 Localizations；
• bottomNavigationBar 不限于 Container，也可使用 BottomNavigationBar 组件实现标签切换；
• 若需响应式布局，可结合 MediaQuery 动态调整 height 或 padding。

---

三、顶部导航：AppBar 的简洁设计

AppBar(
  title: Text("上面组件"),
  centerTitle: true,
)

AppBar 是位于页面顶部的导航条，通常包含标题、返回按钮、菜单图标等。

参数解析：

• title：显示文本或图标，推荐使用 Text 或 Row 组合；
• centerTitle：是否居中显示标题，默认为 false；
• backgroundColor：背景颜色（默认为蓝色）；
• elevation：阴影高度，影响视觉层级；

📱 OpenHarmony 适配提示：在手表或小屏设备上，建议简化 AppBar 内容，避免信息过载。

---

四、主体内容：Container 与 Center 的协作

Container(
  child: Center(
    child: Text("中部组件"),
  ),
)

Container 是 Flutter 中最基础也最强大的布局组件之一。它可以包裹任意子组件，并提供丰富的样式控制能力。

常用属性：

属性	说明
width, height	固定尺寸（单位：逻辑像素）
color	背景色
decoration	边框、圆角、渐变等装饰
margin, padding	外边距与内边距
child	子组件（只能有一个）

🔍 小技巧：Container 默认会尽可能大，若要限制大小，需显式设置 width/height 或使用 ConstrainedBox。

---

五、底部栏：灵活的 Container 应用

Container(
  height: 80,
  child: Center(
    child: Text("底部组件"),
  ),
)

此处使用 Container 包裹 Center，确保底部文字居中显示。height: 80 设置固定高度，适合静态信息展示。

可扩展方向：

• 使用 BottomNavigationBar 实现标签切换；
• 添加 Icon 图标增强视觉表达；
• 结合 GestureDetector 实现点击事件。

---

六、在 OpenHarmony 模拟器中的验证建议

1. 在手机模拟器运行，观察界面是否正常加载；
2. 检查顶部标题是否居中；
3. 确认中部文字是否水平垂直居中；
4. 查看底部文字是否在 80px 高度内正确显示。

✅ 结果：界面结构清晰，各组件位置正确，无布局错乱。

---

七、总结：从基础到进阶

本文以一段简单代码为基础，详细解析了 Flutter 中常用组件的使用方法。虽然代码功能有限，但它为后续学习打下了坚实基础。你可以在此基础上逐步添加：

• 状态管理（StatefulWidget）；
• 页面跳转（Navigator）；
• 数据请求（http）；
• 自定义组件封装。

这些功能将逐步让你掌握 Flutter for OpenHarmony 的完整开发流程。

完整代码已托管于 AtomGit：
https://gitcode.com/yuji66666/flutter/setting

欢迎加入开源鸿蒙跨平台社区：https://openharmonycrossplatform.csdn.net/