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