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 树。
• 示例代码：

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

总结

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