柚子快報激活碼778899分享：Flutter 初識：導(dǎo)航控件
Flutter導(dǎo)航控件小結(jié)
路由與導(dǎo)航Navigator核心方法屬性示例基本導(dǎo)航示例替換當(dāng)前頁面并推入新頁面使用命名路由動態(tài)生成路由額外的導(dǎo)航功能
完整示例代碼
MaterialPageRoute屬性示例
CupertinoPageRoute屬性示例
應(yīng)用欄與底部導(dǎo)航AppBar屬性解析示例
BottomNavigationBar屬性解析示例
Drawer屬性解析示例
示例
路由與導(dǎo)航
Navigator
Navigator 用于管理應(yīng)用程序的路由，通過堆棧結(jié)構(gòu)來實(shí)現(xiàn)頁面的進(jìn)出。它支持頁面的推入（push）和彈出（pop）操作，允許在應(yīng)用中進(jìn)行復(fù)雜的導(dǎo)航模式。
核心方法
Navigator.push: 將新頁面推入導(dǎo)航堆棧。Navigator.pop: 從導(dǎo)航堆棧中彈出當(dāng)前頁面。Navigator.pushReplacement: 替換當(dāng)前頁面，并將新頁面推入導(dǎo)航堆棧。Navigator.pushNamed: 使用命名路由推入新頁面。Navigator.popUntil: 彈出導(dǎo)航堆棧中的頁面直到滿足特定條件。Navigator.pushAndRemoveUntil: 推入新頁面并移除所有先前的頁面，直到滿足特定條件。Navigator.maybePop: 嘗試從導(dǎo)航堆棧中彈出當(dāng)前頁面，如果沒有更多頁面可以彈出，則返回false。
屬性
initialRoute: 應(yīng)用啟動時的初始路由。onGenerateRoute: 動態(tài)生成路由的回調(diào)函數(shù)。onUnknownRoute: 當(dāng)無法找到匹配路由時調(diào)用的回調(diào)函數(shù)。
示例
基本導(dǎo)航示例
Navigator.push(
context,
MaterialPageRoute(builder: (context) => SecondPage()),
);
Navigator.pop(context);
替換當(dāng)前頁面并推入新頁面
Navigator.pushReplacement(
context,
MaterialPageRoute(builder: (context) => SecondPage()),
);
使用命名路由
定義命名路由：
void main() {
runApp(MaterialApp(
initialRoute: '/',
routes: {
'/': (context) => FirstPage(),
'/second': (context) => SecondPage(),
},
));
}
使用命名路由導(dǎo)航：
Navigator.pushNamed(context, '/second');
動態(tài)生成路由
void main() {
runApp(MaterialApp(
onGenerateRoute: (settings) {
if (settings.name == '/second') {
return MaterialPageRoute(
builder: (context) => SecondPage(),
);
}
// Define other routes here
assert(false, 'Need to implement ${settings.name}');
return null;
},
));
}
額外的導(dǎo)航功能
推入新頁面并移除所有先前的頁面，直到滿足特定條件
Navigator.pushAndRemoveUntil(
context,
MaterialPageRoute(builder: (context) => SecondPage()),
ModalRoute.withName('/'),
);
嘗試從導(dǎo)航堆棧中彈出當(dāng)前頁面
bool popped = await Navigator.maybePop(context);
if (!popped) {
// Handle the case where there are no more pages to pop
}
完整示例代碼
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
initialRoute: '/',
routes: {
'/': (context) => FirstPage(),
'/second': (context) => SecondPage(),
'/third': (context) => ThirdPage(),
},
);
}
}
class FirstPage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text("First Page")),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
ElevatedButton(
onPressed: () {
Navigator.push(
context,
MaterialPageRoute(builder: (context) => SecondPage()),
);
},
child: Text('Push to Second Page'),
),
ElevatedButton(
onPressed: () {
Navigator.pushReplacement(
context,
MaterialPageRoute(builder: (context) => SecondPage()),
);
},
child: Text('PushReplace to Second Page'),
),
ElevatedButton(
onPressed: () {
Navigator.pushNamed(context, '/third');
},
child: Text('Go to Third Page with Named Route'),
),
],
),
),
);
}
}
class SecondPage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text("Second Page")),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
ElevatedButton(
onPressed: () {
Navigator.pop(context, 'Data from Second Page');
},
child: Text('Pop and Return Data'),
),
ElevatedButton(
onPressed: () {
Navigator.popUntil(context, ModalRoute.withName('/'));
},
child: Text('Pop Until First Page'),
),
ElevatedButton(
onPressed: () {
Navigator.pushAndRemoveUntil(
context,
MaterialPageRoute(builder: (context) => ThirdPage()),
ModalRoute.withName('/'),
);
},
child: Text('Push and Remove Until First Page'),
),
],
),
),
);
}
}
class ThirdPage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text("Third Page")),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
ElevatedButton(
onPressed: () {
Navigator.pop(context);
},
child: Text('Back to Previous Page'),
),
ElevatedButton(
onPressed: () async {
bool popped = await Navigator.maybePop(context);
if (!popped) {
ScaffoldMessenger.of(context).showSnackBar(
SnackBar(content: Text('No more pages to pop')),
);
}
},
child: Text('Maybe Pop'),
),
],
),
),
);
}
}
? ?
MaterialPageRoute
MaterialPageRoute 是一個材料設(shè)計風(fēng)格的頁面路由，用于在安卓平臺上提供一致的導(dǎo)航體驗(yàn)。它繼承自PageRoute，并且實(shí)現(xiàn)了TransitionRoute用于處理頁面切換時的過渡動畫。
屬性
builder: 構(gòu)建路由頁面的回調(diào)函數(shù)。settings: 路由的配置信息，如名稱、參數(shù)等。maintainState: 是否在頁面離開視圖但未完全移除時保持狀態(tài)。fullscreenDialog: 是否將頁面展示為全屏對話框。
示例
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => SecondPage(),
settings: RouteSettings(name: '/second'),
),
);
在SecondPage中接收傳遞的參數(shù)：
class SecondPage extends StatelessWidget {
@override
Widget build(BuildContext context) {
final RouteSettings settings = ModalRoute.of(context)!.settings;
final String? data = settings.arguments as String?;
return Scaffold(
appBar: AppBar(title: Text("Second Page")),
body: Center(child: Text(data ?? 'No data')),
);
}
}
? ?
CupertinoPageRoute
CupertinoPageRoute 是一個iOS風(fēng)格的頁面路由，用于在iOS平臺上提供一致的導(dǎo)航體驗(yàn)。它同樣繼承自PageRoute，并實(shí)現(xiàn)了TransitionRoute用于處理頁面切換時的過渡動畫。
屬性
builder: 構(gòu)建路由頁面的回調(diào)函數(shù)。settings: 路由的配置信息，如名稱、參數(shù)等。maintainState: 是否在頁面離開視圖但未完全移除時保持狀態(tài)。fullscreenDialog: 是否將頁面展示為全屏對話框。
示例
Navigator.push(
context,
CupertinoPageRoute(
builder: (context) => SecondPage(),
settings: RouteSettings(name: '/second'),
),
);
在SecondPage中接收傳遞的參數(shù)：
class SecondPage extends StatelessWidget {
@override
Widget build(BuildContext context) {
final RouteSettings settings = ModalRoute.of(context)!.settings;
final String? data = settings.arguments as String?;
return CupertinoPageScaffold(
navigationBar: CupertinoNavigationBar(
middle: Text("Second Page"),
),
child: Center(child: Text(data ?? 'No data')),
);
}
}
? ?
應(yīng)用欄與底部導(dǎo)航
AppBar
AppBar 是頂部應(yīng)用欄，通常用于顯示標(biāo)題、導(dǎo)航按鈕等。
屬性解析
AppBar({
super.key,
this.leading,
this.automaticallyImplyLeading = true,
this.title,
this.actions,
this.flexibleSpace,
this.bottom,
this.elevation,
this.scrolledUnderElevation,
this.notificationPredicate = defaultScrollNotificationPredicate,
this.shadowColor,
this.surfaceTintColor,
this.shape,
this.backgroundColor,
this.foregroundColor,
this.iconTheme,
this.actionsIconTheme,
this.primary = true,
this.centerTitle,
this.excludeHeaderSemantics = false,
this.titleSpacing,
this.toolbarOpacity = 1.0,
this.bottomOpacity = 1.0,
this.toolbarHeight,
this.leadingWidth,
this.toolbarTextStyle,
this.titleTextStyle,
this.systemOverlayStyle,
this.forceMaterialTransparency = false,
this.clipBehavior,
})
key：用于標(biāo)識控件的唯一值。leading：可選參數(shù)，類型為 Widget，表示前導(dǎo)控件，通常是導(dǎo)航圖標(biāo)。automaticallyImplyLeading：可選參數(shù)，類型為 bool，默認(rèn)為 true，是否自動根據(jù)路由生成前導(dǎo)控件。title：可選參數(shù)，類型為 Widget，表示標(biāo)題控件。actions：可選參數(shù)，類型為 List，表示操作控件列表，通常是一些圖標(biāo)按鈕。flexibleSpace：可選參數(shù)，類型為 Widget，表示靈活空間控件。bottom：可選參數(shù)，類型為 PreferredSizeWidget，表示底部控件，通常是 TabBar。elevation：可選參數(shù)，類型為 double，表示陰影高度。scrolledUnderElevation：可選參數(shù)，類型為 double，表示滑動時的陰影高度。notificationPredicate：可選參數(shù)，類型為 ScrollNotificationPredicate，表示通知謂詞。shadowColor：可選參數(shù)，類型為 Color，表示陰影顏色。surfaceTintColor：可選參數(shù)，類型為 Color，表示表面顏色。shape：可選參數(shù)，類型為 ShapeBorder，表示形狀。backgroundColor：可選參數(shù)，類型為 Color，表示背景顏色。foregroundColor：可選參數(shù)，類型為 Color，表示前景顏色。iconTheme：可選參數(shù)，類型為 IconThemeData，表示圖標(biāo)主題。actionsIconTheme：可選參數(shù)，類型為 IconThemeData，表示操作圖標(biāo)主題。primary：可選參數(shù)，類型為 bool，默認(rèn)為 true，表示是否為主 AppBar。centerTitle：可選參數(shù)，類型為 bool，表示標(biāo)題是否居中。excludeHeaderSemantics：可選參數(shù)，類型為 bool，表示是否排除頭部語義。titleSpacing：可選參數(shù)，類型為 double，表示標(biāo)題間距。toolbarOpacity：可選參數(shù)，類型為 double，表示工具欄不透明度，默認(rèn)為 1.0。bottomOpacity：可選參數(shù)，類型為 double，表示底部控件不透明度，默認(rèn)為 1.0。toolbarHeight：可選參數(shù)，類型為 double，表示工具欄高度。leadingWidth：可選參數(shù)，類型為 double，表示前導(dǎo)控件寬度。toolbarTextStyle：可選參數(shù)，類型為 TextStyle，表示工具欄文字樣式。titleTextStyle：可選參數(shù)，類型為 TextStyle，表示標(biāo)題文字樣式。systemOverlayStyle：可選參數(shù)，類型為 SystemUiOverlayStyle，表示系統(tǒng)覆蓋層樣式。forceMaterialTransparency：可選參數(shù)，類型為 bool，表示是否強(qiáng)制材料透明度。clipBehavior：可選參數(shù)，類型為 Clip，表示剪切行為。
示例
class ExamplePage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
home: Scaffold(
appBar: AppBar(
leading: IconButton(
icon: Icon(Icons.menu),
onPressed: () {
// handle menu button press
},
),
title: Text('AppBar Example'),
actions:
IconButton(
icon: Icon(Icons.search),
onPressed: () {
// handle search button press
},
),
IconButton(
icon: Icon(Icons.more_vert),
onPressed: () {
// handle more button press
},
),
],
flexibleSpace: Container(
decoration: BoxDecoration(
gradient: LinearGradient(
colors: [Colors.blue, Colors.purple],
begin: Alignment.topLeft,
end: Alignment.bottomRight,
),
),
),
bottom: PreferredSize(
preferredSize: Size.fromHeight(50.0),
child: Container(
color: Colors.orange,
height: 50.0,
child: Center(child: Text('Bottom Widget')),
),
),
elevation: 4.0,
backgroundColor: Colors.red,
foregroundColor: Colors.white,
centerTitle: true,
),
body: Center(child: Text('Hello, world!')),
),
);
}
}
? ?
BottomNavigationBar
BottomNavigationBar 是底部導(dǎo)航欄，用于在底部展示多個導(dǎo)航項(xiàng)。
屬性解析
BottomNavigationBar({
super.key,
required this.items, // 必需參數(shù)，導(dǎo)航欄項(xiàng)列表
this.onTap, // 點(diǎn)擊事件回調(diào)
this.currentIndex = 0, // 當(dāng)前選中的索引
this.elevation, // 陰影高度
this.type, // 導(dǎo)航欄類型
Color? fixedColor, // 固定顏色（已廢棄，請使用 selectedItemColor）
this.backgroundColor, // 背景顏色
this.iconSize = 24.0, // 圖標(biāo)大小
Color? selectedItemColor, // 選中項(xiàng)顏色
this.unselectedItemColor, // 未選中項(xiàng)顏色
this.selectedIconTheme, // 選中圖標(biāo)主題
this.unselectedIconTheme, // 未選中圖標(biāo)主題
this.selectedFontSize = 14.0, // 選中標(biāo)簽字體大小
this.unselectedFontSize = 12.0, // 未選中標(biāo)簽字體大小
this.selectedLabelStyle, // 選中標(biāo)簽樣式
this.unselectedLabelStyle, // 未選中標(biāo)簽樣式
this.showSelectedLabels, // 是否顯示選中標(biāo)簽
this.showUnselectedLabels, // 是否顯示未選中標(biāo)簽
this.mouseCursor, // 鼠標(biāo)指針樣式
this.enableFeedback, // 是否啟用反饋
this.landscapeLayout, // 橫向布局
this.useLegacyColorScheme = true, // 是否使用舊顏色方案
});
key：用于標(biāo)識控件的唯一值。items：必需參數(shù)，類型為 List，表示導(dǎo)航欄項(xiàng)列表。onTap：可選參數(shù)，類型為 ValueChanged?，點(diǎn)擊事件回調(diào)，當(dāng)導(dǎo)航欄項(xiàng)被點(diǎn)擊時調(diào)用。currentIndex：可選參數(shù)，類型為 int，默認(rèn)為 0，表示當(dāng)前選中的索引。elevation：可選參數(shù)，類型為 double?，表示陰影高度。type：可選參數(shù)，類型為 BottomNavigationBarType?，表示導(dǎo)航欄類型，可以是 fixed 或 shifting。backgroundColor：可選參數(shù)，類型為 Color?，表示背景顏色。iconSize：可選參數(shù)，類型為 double，表示圖標(biāo)大小，默認(rèn)為 24.0。selectedItemColor：可選參數(shù)，類型為 Color?，表示選中項(xiàng)顏色。unselectedItemColor：可選參數(shù)，類型為 Color?，表示未選中項(xiàng)顏色。selectedIconTheme：可選參數(shù)，類型為 IconThemeData?，表示選中圖標(biāo)主題。unselectedIconTheme：可選參數(shù)，類型為 IconThemeData?，表示未選中圖標(biāo)主題。selectedFontSize：可選參數(shù)，類型為 double，表示選中標(biāo)簽字體大小，默認(rèn)為 14.0。unselectedFontSize：可選參數(shù)，類型為 double，表示未選中標(biāo)簽字體大小，默認(rèn)為 12.0。selectedLabelStyle：可選參數(shù)，類型為 TextStyle?，表示選中標(biāo)簽樣式。unselectedLabelStyle：可選參數(shù)，類型為 TextStyle?，表示未選中標(biāo)簽樣式。showSelectedLabels：可選參數(shù)，類型為 bool?，表示是否顯示選中標(biāo)簽。showUnselectedLabels：可選參數(shù)，類型為 bool?，表示是否顯示未選中標(biāo)簽。mouseCursor：可選參數(shù)，類型為 MouseCursor?，表示鼠標(biāo)指針樣式。enableFeedback：可選參數(shù)，類型為 bool?，表示是否啟用反饋。landscapeLayout：可選參數(shù)，類型為 BottomNavigationBarLandscapeLayout?，表示橫向布局方式。useLegacyColorScheme：可選參數(shù)，類型為 bool，表示是否使用舊顏色方案，默認(rèn)為 true。
示例
class BottomPage extends StatefulWidget {
@override
_BottomPageState createState() => _BottomPageState();
}
class _BottomPageState extends State
int _selectedIndex = 0;
static const List
Text('Home Page',
style: TextStyle(fontSize: 35, fontWeight: FontWeight.bold)),
Text('Search Page',
style: TextStyle(fontSize: 35, fontWeight: FontWeight.bold)),
Text('Profile Page',
style: TextStyle(fontSize: 35, fontWeight: FontWeight.bold)),
];
void _onItemTapped(int index) {
setState(() {
_selectedIndex = index;
});
}
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(title: Text('BottomNavigationBar Example')),
body: Center(
child: _widgetOptions.elementAt(_selectedIndex),
),
bottomNavigationBar: BottomNavigationBar(
items: const
BottomNavigationBarItem(
icon: Icon(Icons.home),
label: 'Home',
),
BottomNavigationBarItem(
icon: Icon(Icons.search),
label: 'Search',
),
BottomNavigationBarItem(
icon: Icon(Icons.person),
label: 'Profile',
),
],
currentIndex: _selectedIndex,
selectedItemColor: Colors.amber[800],
onTap: _onItemTapped,
),
),
);
}
}
? ?
Drawer
Drawer 是抽屜導(dǎo)航，一般從屏幕左側(cè)滑入，包含導(dǎo)航菜單項(xiàng)。
屬性解析
const Drawer({
super.key,
this.backgroundColor, // 抽屜的背景顏色
this.elevation, // 陰影高度
this.shadowColor, // 陰影顏色
this.surfaceTintColor, // 表面顏色
this.shape, // 形狀
this.width, // 寬度
this.child, // 子控件
this.semanticLabel, // 語義標(biāo)簽
this.clipBehavior, // 剪切行為
});
key：用于標(biāo)識控件的唯一值。backgroundColor：可選參數(shù)，類型為 Color?，表示抽屜的背景顏色。elevation：可選參數(shù)，類型為 double?，表示陰影高度。shadowColor：可選參數(shù)，類型為 Color?，表示陰影顏色。surfaceTintColor：可選參數(shù)，類型為 Color?，表示表面顏色。shape：可選參數(shù)，類型為 ShapeBorder?，表示形狀。width：可選參數(shù)，類型為 double?，表示寬度。child：可選參數(shù)，類型為 Widget?，表示子控件。semanticLabel：可選參數(shù)，類型為 String?，表示語義標(biāo)簽。clipBehavior：可選參數(shù)，類型為 Clip?，表示剪切行為。
示例
class ExamplePage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
home: Scaffold(
appBar: AppBar(
title: Text('Drawer Example'),
),
body: Center(
child: Text(
'Swipe from the left or click on the menu icon to open the drawer.'),
),
drawer: Drawer(
backgroundColor: Colors.white,
elevation: 16.0,
child: ListView(
padding: EdgeInsets.zero,
children:
DrawerHeader(
decoration: BoxDecoration(
color: Colors.blue,
),
child: Text(
'Drawer Header',
style: TextStyle(
color: Colors.white,
fontSize: 24,
),
),
),
ListTile(
leading: Icon(Icons.home),
title: Text('Home'),
onTap: () {
// Handle the tap event here
Navigator.pop(context);
},
),
ListTile(
leading: Icon(Icons.settings),
title: Text('Settings'),
onTap: () {
// Handle the tap event here
Navigator.pop(context);
},
),
ListTile(
leading: Icon(Icons.contacts),
title: Text('Contacts'),
onTap: () {
// Handle the tap event here
Navigator.pop(context);
},
),
],
),
),
),
);
}
}
? ?
示例
class FirstPage extends StatefulWidget {
@override
_FirstPageState createState() => _FirstPageState();
}
class _FirstPageState extends State
int _selectedIndex = 0;
void _onItemTapped(int index) {
setState(() {
_selectedIndex = index;
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("First Page"),
),
drawer: Drawer(
child: ListView(
padding: EdgeInsets.zero,
children:
DrawerHeader(
decoration: BoxDecoration(
color: Colors.blue,
),
child: Text(
'Drawer Header',
style: TextStyle(
color: Colors.white,
fontSize: 24,
),
),
),
ListTile(
leading: Icon(Icons.message),
title: Text('Messages'),
onTap: () {
// Handle navigation
},
),
ListTile(
leading: Icon(Icons.account_circle),
title: Text('Profile'),
onTap: () {
// Handle navigation
},
),
ListTile(
leading: Icon(Icons.settings),
title: Text('Settings'),
onTap: () {
// Handle navigation
},
),
],
),
),
body: Center(
child: ElevatedButton(
onPressed: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) =>
SecondPage(data: 'Hello from First Page')),
);
},
child: Text('Go to Second Page'),
),
),
bottomNavigationBar: BottomNavigationBar(
items: const
BottomNavigationBarItem(
icon: Icon(Icons.home),
label: 'Home',
),
BottomNavigationBarItem(
icon: Icon(Icons.business),
label: 'Business',
),
BottomNavigationBarItem(
icon: Icon(Icons.school),
label: 'School',
),
],
currentIndex: _selectedIndex,
selectedItemColor: Colors.amber[800],
onTap: _onItemTapped,
),
);
}
}
class SecondPage extends StatelessWidget {
final String data;
SecondPage({required this.data});
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text("Second Page")),
body: Center(child: Text(data)),
);
}
}
柚子快報激活碼778899分享：Flutter 初識：導(dǎo)航控件
好文推薦
本文內(nèi)容根據(jù)網(wǎng)絡(luò)資料整理，出于傳遞更多信息之目的，不代表金鑰匙跨境贊同其觀點(diǎn)和立場。
轉(zhuǎn)載請注明，如有侵權(quán)，聯(lián)系刪除。
Lazada樂淘族
