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(‘自适应内容’),);},)这样页面在手机、折叠屏或平板场景下更容易继续扩展。