FLUTTER学习笔记--路由与导航
文章目录
- 一、匿名路由
-
- 1.Navigator
- 2.代码
- 3.效果
- 二、命名路由
-
- 1.声明路由
- 2.跳转到命名路由
- 3.代码
- 4.效果
- 三、动态路由
-
- 1.动态路由是指，通过onGeneratedRoute属性指定的路由
- 2.代码
- 3.效果
- 四、匿名路由
-
- 1.匿名路由
- 2.命名路由
- 3.代码
- 4.效果
- 五、Drawer导航
-
- 1.Scaffold
- 2.UserAccountDrawerHeader
- 3.AboutListTitle
- 4.代码
- 5.效果
- 六、BottomNavigationBar导航
-
- 1.items
- 2.currentIndex
- 3.type
- 4.onTap（）
- 5.代码
- 6.效果
- 七、Tab导航
-
- 1.DefaultTabController（整个Tab导航的容器）
- 2.TabBar（导航菜单）
- 3.TabBarView（导航页面）
- 4.代码
- 5.效果
一、匿名路由
1.Navigator
- push（跳转到指定组件）
- Navigator.push(
context, MaterialPageRoute(builder: (context) => 组件名称()) )
- Navigator.push(
- pop（回退）
- Navigator.pop（context）
2.代码
class anonyMousDemo extends StatelessWidget {
const anonyMousDemo({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Center(
child: Center(
child: ElevatedButton(
onPressed: () {
Navigator.push(
context, MaterialPageRoute(builder: (context) => Product()));
},
child: Text('跳转到商品页面'),
),
),
);
}
}
class Product extends StatelessWidget {
const Product({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text("商品页面"),
leading: Icon(Icons.menu),
actions: [Icon(Icons.settings)],
elevation: 10.0,
centerTitle: true,
),
body: Center(
child: Center(
child: ElevatedButton(
onPressed: () => Navigator.pop(context),
child: Text('返回'),
),
),
));
}
}
3.效果
二、命名路由
1.声明路由
- routes路由表（Map类型）
- initialRoute（初始路由）
- onUnknownRoute（未知路由-404）
2.跳转到命名路由
- Navigator.pushNamed（context，‘路由名字’）
3.代码
main() {
runApp(nameRoute());
}
class nameRoute extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
//home: HomePage(),
//声明命名路由
routes: {
'homePage': (context) => homePage(),
'product': (context) => product(),
},
initialRoute: 'homePage',
onUnknownRoute: (RouteSettings setting) =>
MaterialPageRoute(builder: (context) => UnknowPage()),
);
}
}
class homePage extends StatelessWidget {
const homePage({super.key});
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text("首页"),
leading: Icon(Icons.menu),
actions: [Icon(Icons.settings)],
elevation: 10.0,
centerTitle: true,
),
body: Center(
child: Column(
children: [
ElevatedButton(
onPressed: () => Navigator.pushNamed(context, 'product'),
child: Text('跳转'),
),
ElevatedButton(
onPressed: () => Navigator.pushNamed(context, 'user'),
child: Text('未知路由'),
)
],
),
));
}
}
class product extends StatelessWidget {
const product({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text("商品页面"),
leading: Icon(Icons.menu),
actions: [Icon(Icons.settings)],
elevation: 10.0,
centerTitle: true,
),
body: Center(
child: Center(
child: ElevatedButton(
onPressed: () => Navigator.pop(context),
child: Text('返回'),
),
),
));
}
}
class UnknowPage extends StatelessWidget {
const UnknowPage({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text("404"),
leading: Icon(Icons.menu),
actions: [Icon(Icons.settings)],
elevation: 10.0,
centerTitle: true,
),
body: Center(
child: Center(
child: ElevatedButton(
onPressed: () => Navigator.pop(context),
child: Text('返回'),
),
),
));
}
}
4.效果
三、动态路由
1.动态路由是指，通过onGeneratedRoute属性指定的路由
2.代码
main() {
runApp(onGenerateRoute());
}
class onGenerateRoute extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
onGenerateRoute: (RouteSettings setting) {
//匹配首页 /
print('当前路径${setting.name}');
if (setting.name == '/') {
return MaterialPageRoute(builder: (context) => _homePage());
}
if (setting.name == '/product') {
return MaterialPageRoute(builder: (context) => product());
}
//匹配 /product/:id
var uri = Uri.parse(setting.name.toString());
print(uri.pathSegments);
if (uri.pathSegments.length == 2 &&
uri.pathSegments.first == 'product') {
var id = uri.pathSegments[1];
return MaterialPageRoute(builder: (context) => productDetail(id: id));
}
return MaterialPageRoute(builder: (context) => UnknowPage());
},
);
}
}
class _homePage extends StatelessWidget {
const _homePage({super.key});
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text("首页"),
leading: Icon(Icons.menu),
actions: [Icon(Icons.settings)],
elevation: 10.0,
centerTitle: true,
),
body: Center(
child: Column(
children: [
ElevatedButton(
onPressed: () => Navigator.pushNamed(context, '/product'),
child: Text('跳转'),
),
ElevatedButton(
onPressed: () => Navigator.pushNamed(context, '/product/1'),
child: Text('商品1'),
),
ElevatedButton(
onPressed: () => Navigator.pushNamed(context, '/product/2'),
child: Text('商品2'),
),
ElevatedButton(
onPressed: () => Navigator.pushNamed(context, 'user'),
child: Text('未知路由'),
)
],
),
));
}
}
class productDetail extends StatelessWidget {
final String id;
const productDetail({Key? key, required this.id}) : super(key: key);
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text("商品详情页"),
leading: Icon(Icons.menu),
actions: [Icon(Icons.settings)],
elevation: 10.0,
centerTitle: true,
),
body: Center(
child: Column(children: [
Text('当前商品的id是${this.id}'),
ElevatedButton(
onPressed: () => Navigator.pop(context),
child: Text('返回'),
)
]),
),
);
}
}
class product extends StatelessWidget {
const product({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text("商品页面"),
leading: Icon(Icons.menu),
actions: [Icon(Icons.settings)],
elevation: 10.0,
centerTitle: true,
),
body: Center(
child: Center(
child: ElevatedButton(
onPressed: () => Navigator.pop(context),
child: Text('返回'),
),
),
));
}
}
class UnknowPage extends StatelessWidget {
const UnknowPage({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text("404"),
leading: Icon(Icons.menu),
actions: [Icon(Icons.settings)],
elevation: 10.0,
centerTitle: true,
),
body: Center(
child: Center(
child: ElevatedButton(
onPressed: () => Navigator.pop(context),
child: Text('返回'),
),
),
));
}
}
3.效果
四、匿名路由
1.匿名路由
- 路由中声明参数
- Navigator.push
- 组件中接受参数
2.命名路由
- 路由中声明参数
- Navigator.pushNamed(context, routename, {arguments}),
- 组件中接受参数
- ModalRoute.of（context）.settings.arguments
3.代码
class arguments extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
routes: {
'homePage': (context) => homePage_(),
'product': (context) => _product(),
'productDetail': (context) => _productDetail(),
},
initialRoute: 'homePage',
onUnknownRoute: (RouteSettings setting) =>
MaterialPageRoute(builder: (context) => UnknowPage()),
);
}
}
class homePage_ extends StatelessWidget {
const homePage_({super.key});
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text("首页"),
leading: Icon(Icons.menu),
actions: [Icon(Icons.settings)],
elevation: 10.0,
centerTitle: true,
),
body: Center(
child: Column(
children: [
ElevatedButton(
onPressed: () =>
Navigator.pushNamed(context, 'product',
arguments: {'title': '我是主页传来的参数'}),
child: Text('跳转到商品页面'),
),
ElevatedButton(
onPressed: () =>
Navigator.pushNamed(context, 'productDetail',
arguments: {'id': 1}),
child: Text('商品1'),
),
ElevatedButton(
onPressed: () =>
Navigator.pushNamed(context, 'productDetail',
arguments: {'id': 2}),
child: Text('商品2'),
),
ElevatedButton(
onPressed: () => Navigator.pushNamed(context, 'user'),
child: Text('未知路由'),
)
],
),
));
}
}
class _productDetail extends StatelessWidget {
const _productDetail({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
final Map arguments = ModalRoute
.of(context)
?.settings
.arguments as Map;
return Scaffold(
appBar: AppBar(
title: const Text("商品详情页"),
leading: Icon(Icons.menu),
actions: [Icon(Icons.settings)],
elevation: 10.0,
centerTitle: true,
),
body: Center(
child: Column(children: [
Text('当前商品的id是' + arguments['id'].toString()),
ElevatedButton(
onPressed: () => Navigator.pop(context),
child: Text('返回'),
)
]),
),
);
}
}
class _product extends StatelessWidget {
const _product({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
final Map arguments = ModalRoute
.of(context)
?.settings
.arguments as Map;
return Scaffold(
appBar: AppBar(
title: const Text("商品页面"),
leading: Icon(Icons.menu),
actions: [Icon(Icons.settings)],
elevation: 10.0,
centerTitle: true,
),
body: Center(
child: Column(
children: [
Text('接受的参数是' + arguments['title']),
ElevatedButton(
onPressed: () => Navigator.pop(context),
child: Text('返回'),
)
],
),
),
);
}
}
4.效果
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-xTfzpG18-1673541095447)(https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/2c94c4bd0ae2429a8741af9be2381e8a~tplv-k3u1fbpfcp-watermark.image?)]
五、Drawer导航
1.Scaffold
- drawer（左侧抽屉菜单）
- endDrawer（右侧抽屉菜单）
2.UserAccountDrawerHeader
- 抽屉菜单头部组件
3.AboutListTitle
- 关于弹窗
4.代码
class drawer extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
home: Home(),
);
}
}
class Home extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text("Drawer"),
leading: Icon(Icons.menu),
actions: [Icon(Icons.settings)],
elevation: 0.0,
centerTitle: true,
),
body: homepage(),
drawer: DrawerList(),
endDrawer: DrawerList(),
);
}
}
class homepage extends StatelessWidget {
const homepage({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Container(
child: Center(
child: Text('Home'),
),
);
}
}
class DrawerList extends StatelessWidget {
const DrawerList({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Drawer(
child: ListView(
padding: EdgeInsets.all(0),
children: [
UserAccountsDrawerHeader(
accountName: Text('hhh'),
accountEmail: Text('[email protected]'),
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage('images/1.png'),
fit: BoxFit.cover,
),
),
currentAccountPicture: CircleAvatar(
backgroundImage: AssetImage('images/2.png'),
),
),
Divider(
thickness: 2,
),
ListTile(
leading: Icon(Icons.settings),
title: Text('设置'),
trailing: Icon(Icons.arrow_forward_ios),
),
Divider(
thickness: 2,
),
ListTile(
leading: Icon(Icons.account_balance),
title: Text('余额'),
trailing: Icon(Icons.arrow_forward_ios),
),
Divider(
thickness: 2,
),
ListTile(
leading: Icon(Icons.person),
title: Text('我的'),
trailing: Icon(Icons.arrow_forward_ios),
),
Divider(
thickness: 2,
),
ListTile(
leading: Icon(Icons.person),
title: Text('回退'),
onTap: () => Navigator.pop(context),
trailing: Icon(Icons.arrow_forward_ios),
),
AboutListTile(
child: Text('关于'),
applicationName: '你的应用名称',
applicationVersion: '1.0.0',
icon: CircleAvatar(
child: Text('aaa'),
),
applicationLegalese: '你的应用名称',
aboutBoxChildren: [
Text('条例一：'),
Text('条例一：'),
],
applicationIcon: Image.asset(
'images/3.jpg',
width: 50,
height: 50,
),
)
],
));
}
}
5.效果
六、BottomNavigationBar导航
1.items
- 包含导航（BottomNavigationBarItem）的列表
2.currentIndex
- 当前导航索引
3.type
- 导航类型（BottomNavigationBarType）
4.onTap（）
- 导航的点击事件（一般会更新导航索引）
5.代码
class bottomNavigatorBar extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
home: hOme(),
);
}
}
class hOme extends StatefulWidget {
const hOme({Key? key}) : super(key: key);
@override
State<hOme> createState() => _hOmeState();
}
class _hOmeState extends State<hOme> {
final List<BottomNavigationBarItem> bottomNavItems = [
BottomNavigationBarItem(
backgroundColor: Colors.blue,
icon: Icon(Icons.home),
label: '首页',
),
BottomNavigationBarItem(
backgroundColor: Colors.green,
icon: Icon(Icons.message),
label: '消息',
),
BottomNavigationBarItem(
backgroundColor: Colors.amber,
icon: Icon(Icons.shopping_cart),
label: '购物车',
),
BottomNavigationBarItem(
backgroundColor: Colors.red,
icon: Icon(Icons.person),
label: '我的',
),
];
final pages = [
Center(
child: Text('Home', style: TextStyle(fontSize: 50),),
),
Center(
child: Text('Message', style: TextStyle(fontSize: 50),),
),
Center(
child: Text('Shopping cart', style: TextStyle(fontSize: 50),),
),
Center(
child: Text('Profile', style: TextStyle(fontSize: 50),),
)
];
late int currentIndex;
@override
void initState() {
// TODO: implement initState
super.initState();
currentIndex = 0;
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text("底部导航"),
leading: Icon(Icons.menu),
actions: [Icon(Icons.settings)],
elevation: 0.0,
centerTitle: true,
),
bottomNavigationBar: BottomNavigationBar(
items: bottomNavItems,
currentIndex: currentIndex,
//type: BottomNavigationBarType.fixed,
type: BottomNavigationBarType.shifting,
onTap: (index) {
_changePage(index);
},
),
body: pages[currentIndex],
);
}
void _changePage(int index) {
if (index != currentIndex) {
setState(() {
currentIndex = index;
});
}
}
}
6.效果
七、Tab导航
1.DefaultTabController（整个Tab导航的容器）
- length（声明导航数量）
- child（指定子组件）
2.TabBar（导航菜单）
- tabs（导航菜单数组）
3.TabBarView（导航页面）
- children（多个导航页面内容）
4.代码
class tabDemo extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
home: tabhome(),
);
}
}
class tabhome extends StatelessWidget {
//菜单数组
final List<Widget> _tabs = [
Tab(text: '首页', icon: Icon(Icons.home)),
Tab(text: '添加', icon: Icon(Icons.add)),
Tab(text: '搜索', icon: Icon(Icons.search)),
];
//页面数组
final List<Widget> _tabViews = [
Icon(Icons.home, size: 120, color: Colors.red),
Icon(Icons.add, size: 120, color: Colors.green),
Icon(Icons.search, size: 120, color: Colors.black),
];
@override
Widget build(BuildContext context) {
return DefaultTabController(
length: _tabs.length,
child: Scaffold(
appBar: AppBar(
title: const Text("Tab"),
leading: Icon(Icons.menu),
actions: [Icon(Icons.settings)],
elevation: 10.0,
centerTitle: true,
bottom: TabBar(
tabs: _tabs,
labelColor: Colors.yellow,
unselectedLabelColor: Colors.black45,
indicatorSize: TabBarIndicatorSize.tab,
indicatorColor: Colors.yellow,
indicatorWeight: 10,
),
),
body:TabBarView(
children: _tabViews,
),
bottomNavigationBar: TabBar(
tabs: _tabs,
labelColor: Colors.blue,
unselectedLabelColor: Colors.black45,
),
)
);
}
}
5.效果
