Flutter for OpenHarmony核心组件学习: MaterialApp、Scaffold 两大基础组件以及有无状态组件

Flutter for OpenHarmony核心组件学习: MaterialApp、Scaffold 两大基础组件以及有无状态组件

作者：爱吃大芒果

个人主页 爱吃大芒果

本文所属专栏Flutter

更多专栏
Ascend C 算子开发教程（进阶）
鸿蒙集成
OpenAgents
openJiuwen
从0到1自学C++

---

前言

本次学习主要掌握 Flutter 中 MaterialApp、Scaffold 两大基础组件的用法，以及无状态组件（StatelessWidget）和有状态组件（StatefulWidget）的定义与区别。

---

核心知识点梳理

1. 根组件 MaterialApp

• 作用：作为 Flutter 应用的入口，是 Material Design 风格应用的全局配置中心。
• 核心配置项 ：
  • title：应用标题，会显示在任务管理器或应用切换列表中。
  • theme：全局主题配置，可统一设置 scaffoldBackgroundColor 等样式。
  • home：应用启动后显示的第一个页面，通常是 Scaffold 组件。
• 踩坑记录 ：
  最初错误地用 Color(const Color.fromARGB(...)) 设置主题色，导致类型不匹配。
  正确做法是直接使用 Color.fromARGB(255, 173, 186, 189) 或 Colors.blue。
  

2. 页面骨架 Scaffold

• 作用：封装了常见的页面结构元素，快速搭建符合 Material Design 规范的页面。
• 常用属性 ：
  • appBar：顶部导航栏，可设置标题、图标和操作按钮。
  • body：页面主体内容区域，承载主要业务组件。
  • bottomNavigationBar：底部导航栏，适合实现多页面切换。
• 实践效果 ：
  通过 Scaffold 快速搭建了包含顶部标题栏、居中内容和底部导航的完整页面，开发效率显著提升。
  

3. 无状态组件 StatelessWidget

• 特点 ：组件内容固定，初始化后数据不可变，仅依赖传入的 final 类型参数构建。

• 适用场景：静态展示类组件，如标题、文本标签。

• 核心方法 ：仅需实现 build 方法，返回要渲染的 Widget 树。

• 示例代码 ：

  class mainpage extends StatelessWidget {
    @override
    Widget build(BuildContext context) {
      return MaterialApp(
        home: Scaffold(
          appBar: AppBar(title: Text('爱吃大芒果')),
          body: Center(child: Text('爱吃大西瓜')),
        ),
      );
    }
  }

4. 有状态组件 StatefulWidget

• 特点 ：包含可变状态（State），状态变化时会触发组件重新构建，实现动态交互。

• 适用场景：需要动态更新的组件，如计数器、表单输入。

• 核心结构 ：
  分为 StatefulWidget 类和对应的 State 类，前者负责创建 State，后者管理状态和构建 UI。

• 示例代码 ：

  class mainpage extends StatefulWidget {
    @override
    State<mainpage> createState() => _mainpagestate();
  }
  
  class _mainpagestate extends State<mainpage> {
    @override
    Widget build(BuildContext context) {
      return MaterialApp(
        home: Scaffold(
          appBar: AppBar(title: Text('爱吃大芒果')),
          body: Center(child: Text('爱吃大西瓜')),
        ),
      );
    }
  }

---

总结

1. 组件关系 ：MaterialApp 是应用的根，Scaffold 是页面的骨架，二者结合构成了 Flutter 应用的基础结构。
2. 组件选型 ：静态内容用 StatelessWidget，动态交互用 StatefulWidget，可有效提升性能和代码可维护性。
3. 避坑提示 ：使用 Color 时，直接调用 Color.fromARGB() 或 Colors.xxx 即可，无需额外用 Color() 包裹。

---

欢迎加入开源鸿蒙跨平台社区：开源鸿蒙跨平台开发者社区