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.dart

App 入口

import'package:flutter/material.dart';import'pages/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});@overrideState<HomePage>createState()=>_HomePageState();}class_HomePageStateextendsState<HomePage>{int _index=0;finalList<Widget>_pages=const[Center(child:Text('首页')),Center(child:Text('列表')),Center(child:Text('我的')),];@overrideWidgetbuild(BuildContextcontext){returnScaffold(body:_pages[_index],bottomNavigationBar:NavigationBar(selectedIndex:_index,onDestinationSelected:(value){setState(()=>_index=value);},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){finalitems=List.generate(20,(index)=>'第${index+1}条内容');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，列表页只维护自己的加载状态。不要在父页面和子页面里同时维护相同状态，否则刷新时容易不一致。

classPageState<T>{finalbool loading;finalT?data;finalObject?error;constPageState({this.loading=false,this.data,this.error,});}

这个小类可以让页面状态更清楚：加载中、成功、失败分别对应不同字段。

页面尺寸适配

鸿蒙设备可能有不同尺寸，布局时尽量少写死宽度。优先使用：

LayoutBuilder(builder:(context,constraints){finalcompact=constraints.maxWidth<420;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(‘自适应内容’),
);
},
)

这样页面在手机、折叠屏或平板场景下更容易继续扩展。