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 树。 - 示例代码：
classmainpageextendsStatelessWidget{@overrideWidgetbuild(BuildContextcontext){returnMaterialApp(home:Scaffold(appBar:AppBar(title:Text('爱吃大芒果')),body:Center(child:Text('爱吃大西瓜')),),);}}
4. 有状态组件StatefulWidget
- 特点：包含可变状态（
State），状态变化时会触发组件重新构建，实现动态交互。 - 适用场景：需要动态更新的组件，如计数器、表单输入。
- 核心结构：
分为StatefulWidget类和对应的State类，前者负责创建State，后者管理状态和构建 UI。 - 示例代码：
classmainpageextendsStatefulWidget{@overrideState<mainpage>createState()=>_mainpagestate();}class_mainpagestateextendsState<mainpage>{@overrideWidgetbuild(BuildContextcontext){returnMaterialApp(home:Scaffold(appBar:AppBar(title:Text('爱吃大芒果')),body:Center(child:Text('爱吃大西瓜')),),);}}
总结
- 组件关系：
MaterialApp是应用的根，Scaffold是页面的骨架，二者结合构成了 Flutter 应用的基础结构。 - 组件选型：静态内容用
StatelessWidget，动态交互用StatefulWidget，可有效提升性能和代码可维护性。 - 避坑提示：使用
Color时，直接调用Color.fromARGB()或Colors.xxx即可，无需额外用Color()包裹。
