07-Flutter鸿蒙页面开发基础：路由、底部导航和常用组件-北京尧图网络

07. Flutter鸿蒙页面开发基础路由、底部导航和常用组件项目跑起来后就可以开始写 Flutter 页面。入门阶段不需要马上引入复杂状态管理先把入口、页面拆分、底部导航、列表、详情页和通用组件写清楚就能支撑大多数小型业务页面。页面目录推荐目录lib ├─ main.dart ├─ app.dart ├─ pages │ ├─ home_page.dart │ ├─ list_page.dart │ ├─ detail_page.dart │ └─ profile_page.dart └─ widgets └─ feature_card.dartApp 入口importpackage:flutter/material.dart;importpages/home_page.dart;voidmain(){runApp(constDemoApp());}classDemoAppextendsStatelessWidget{constDemoApp({super.key});overrideWidgetbuild(BuildContextcontext){returnMaterialApp(debugShowCheckedModeBanner:false,title:Flutter Ohos Demo,theme:ThemeData(colorSchemeSeed:Colors.blue,useMaterial3:true,),home:constHomePage(),);}}底部导航classHomePageextendsStatefulWidget{constHomePage({super.key});overrideStateHomePagecreateState()_HomePageState();}class_HomePageStateextendsStateHomePage{int _index0;finalListWidget_pagesconst[Center(child:Text(首页)),Center(child:Text(列表)),Center(child:Text(我的)),];overrideWidgetbuild(BuildContextcontext){returnScaffold(body:_pages[_index],bottomNavigationBar:NavigationBar(selectedIndex:_index,onDestinationSelected:(value){setState(()_indexvalue);},destinations:const[NavigationDestination(icon:Icon(Icons.home_outlined),label:首页),NavigationDestination(icon:Icon(Icons.list_alt),label:列表),NavigationDestination(icon:Icon(Icons.person_outline),label:我的),],),);}}列表与详情classDemoListPageextendsStatelessWidget{constDemoListPage({super.key});overrideWidgetbuild(BuildContextcontext){finalitemsList.generate(20,(index)第${index1}条内容);returnListView.separated(padding:constEdgeInsets.all(16),itemCount:items.length,separatorBuilder:(_,__)constSizedBox(height:10),itemBuilder:(context,index){returnListTile(shape:RoundedRectangleBorder(borderRadius:BorderRadius.circular(12)),tileColor:Colors.blue.withOpacity(0.08),title:Text(items[index]),trailing:constIcon(Icons.chevron_right),onTap:(){Navigator.of(context).push(MaterialPageRoute(builder:(_)DetailPage(title:items[index]),),);},);},);}}classDetailPageextendsStatelessWidget{finalStringtitle;constDetailPage({super.key,requiredthis.title});overrideWidgetbuild(BuildContextcontext){returnScaffold(appBar:AppBar(title:Text(title)),body:Center(child:Text(详情内容$title)),);}}组件拆分页面稳定后把重复 UI 抽成组件classFeatureCardextendsStatelessWidget{finalIconDataicon;finalStringtitle;finalStringdesc;finalVoidCallback?onTap;constFeatureCard({super.key,requiredthis.icon,requiredthis.title,requiredthis.desc,this.onTap,});overrideWidgetbuild(BuildContextcontext){returnInkWell(borderRadius:BorderRadius.circular(14),onTap:onTap,child:Container(padding:constEdgeInsets.all(16),decoration:BoxDecoration(color:Colors.white,borderRadius:BorderRadius.circular(14),border:Border.all(color:Colors.black12),),child:Row(children:[Icon(icon,size:32,color:Colors.blue),constSizedBox(width:12),Expanded(child:Column(crossAxisAlignment:CrossAxisAlignment.start,children:[Text(title,style:constTextStyle(fontSize:17,fontWeight:FontWeight.w600)),constSizedBox(height:4),Text(desc,style:constTextStyle(color:Colors.black54)),],),),],),),);}}页面状态不要散落在多个地方页面简单时可以用setState但状态变量要集中管理。例如底部导航只维护一个_index列表页只维护自己的加载状态。不要在父页面和子页面里同时维护相同状态否则刷新时容易不一致。classPageStateT{finalbool loading;finalT?data;finalObject?error;constPageState({this.loadingfalse,this.data,this.error,});}这个小类可以让页面状态更清楚加载中、成功、失败分别对应不同字段。页面尺寸适配鸿蒙设备可能有不同尺寸布局时尽量少写死宽度。优先使用LayoutBuilder(builder:(context,constraints){finalcompactconstraints.maxWidth420;returnPadding(padding:EdgeInsets.all(compact?12:20),child:constText(自适应内容),);},)这样页面在手机、折叠屏或平板场景下更容易继续扩展。(context, constraints) {final compact constraints.maxWidth 420;return Padding(padding: EdgeInsets.all(compact ? 12 : 20),child: const Text(‘自适应内容’),);},)这样页面在手机、折叠屏或平板场景下更容易继续扩展。

07-Flutter鸿蒙页面开发基础：路由、底部导航和常用组件

相关推荐

如何解决React Native Text Input Mask常见问题：兼容性、性能优化与测试策略终极指南

10分钟上手highcharter：从安装到绘制第一个交互式图表的完整教程

HarmonyOS7 ArkUI 歌词滚动播放器 - 歌词同步高亮、进度控制与翻译切换实战：从状态到页面反馈

更多资讯

从npx skills add到多平台复用：Agent Skills完整实战指南

Unity Addressable Assets 全面解析：资源管理基建指南

数学动画中的像素跳动：原理、根源与工程抑制方案

毕业论文文本修改与整理：一套高效可复核的实操方法

Python PM2.5数据采集与AQI计算闭环系统

提示词工程实战：10个技巧让大语言模型输出更精准

今日更新

基于高阶循环谱的MPSK载波频率估计与MATLAB实现

MiniPdf方：.NET开源Office转PDF的高效解决方案

Solon AI v3.10：Java全栈智能体开发框架解析

本周精选

AI驱动的自动化专利分析平台技术解析

LeetCode-Go 题解：1252. Cells with Odd Values in a Matrix（奇数值单元格计数）双解法剖析

在线答疑系统Java毕设实战：Spring Boot前后端分离与状态流转

本月热门

基于YOLO的焊缝缺陷检测：从数据标注到工业部署全流程实践

分布式服务的决策记录

创业产品的首版范围

读完文章，想聊聊您的网站？