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

作者：爱吃大芒果

个人主页爱吃大芒果

本文所属专栏Flutter

前言

本次学习主要掌握 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 树。

示例代码 ：

dart 复制代码

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。

示例代码 ：

dart 复制代码

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('爱吃大西瓜')),
      ),
    );
  }
}

总结

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

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

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

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

前言

核心知识点梳理

1. 根组件 MaterialApp

2. 页面骨架 Scaffold

3. 无状态组件 StatelessWidget

4. 有状态组件 StatefulWidget

总结

1. 根组件 `MaterialApp`

2. 页面骨架 `Scaffold`

3. 无状态组件 `StatelessWidget`

4. 有状态组件 `StatefulWidget`