当前位置：首页 > news >正文

Flutter_学习记录_导航和其他

news 2025/7/28 5:48:57

Flutter 的导航页面跳转，是通过组件Navigator 和组件MaterialPageRoute来实现的，Navigator提供了很多个方法，但是目前，我只记录我学习过程中接触到的方法：

Navigator.push(), 跳转下一个页面
Navigator.pop(), 返回上一个页面

1. 不带参数的页面跳转案例

代码如下：

import 'package:flutter/material.dart';void main() {runApp(MaterialApp(title: "导航演示",home: FirstScreen(),));
}class FirstScreen extends StatelessWidget {@overrideWidget build(BuildContext context) {return Scaffold(appBar: AppBar(title: Text("导航页面"),),body: Center(child: ElevatedButton(style: ElevatedButton.styleFrom(backgroundColor: Colors.blueAccent,foregroundColor: Colors.white),onPressed: (){Navigator.push(context, MaterialPageRoute(builder: (context) => SecondScreen()));}, child: Text("查看商品详情页"))),);}
}class SecondScreen extends StatelessWidget {@overrideWidget build(BuildContext context) {return Scaffold(appBar: AppBar(title: Text("商品详情页")),body: Center(child: ElevatedButton(onPressed: (){Navigator.pop(context);}, child: Text("点击返回")),),);}
}

效果图：
在这里插入图片描述

2. 导航常数的传递和接收

代码如下：

import 'package:flutter/material.dart';void main() {runApp(MaterialApp(title: "导航演示",home: ProductList(products: List.generate(20, (i) => Product("商品$i", "这是一个商品详情页，编号为:$i")))));
}class ProductList extends StatelessWidget {// 定义一个参数final List<Product> products;// 接收参数const ProductList({super.key, required this.products});@overrideWidget build(BuildContext context) {return Scaffold(appBar: AppBar( title: Text("商品列表")),body: ListView.builder(itemCount: products.length,itemBuilder: (context, index) {return ListTile(title: Text(products[index].title),onTap: (){Navigator.push(context, MaterialPageRoute(builder: (context) => ProductDetail(product:products[index])));},);}));}
}// 商品详情页
class ProductDetail extends StatelessWidget {// 定义一个参数final Product product;const ProductDetail({super.key, required this.product});@overrideWidget build(BuildContext context) {return Scaffold(appBar: AppBar(title: Text(product.title)),body: Center(child: Text(product.description),),);}
}// 定义一个商品的对象
class Product {final String title; // 商品标题final String description; // 商品描述Product(this.title, this.description);
}

效果图如下：
在这里插入图片描述

3. 子页面给父级页面返回数据

代码如下：

import 'package:flutter/material.dart';void main() {runApp(MaterialApp(title: "导航演示",home: FirstPage()));
}class FirstPage extends StatelessWidget {const FirstPage({super.key});@overrideWidget build(BuildContext context) {return Scaffold(appBar: AppBar(title: Text("子页面将数据回传给父视图")),body: Center(child: RouteButton(),),);}
}class RouteButton extends StatelessWidget {@overrideWidget build(BuildContext context) {return ElevatedButton(onPressed: (){_navigateDataToChildView(context);}, child: Text("传递数据"));}_navigateDataToChildView(BuildContext context) async {// 等待子视图返回时，回传的数据final result = await Navigator.push(context, MaterialPageRoute(builder: (context) => ChildView()));// 屏幕底部的小弹窗ScaffoldMessenger.of(context).showSnackBar(SnackBar(content: Text(result)));}
}// 子视图
class ChildView extends StatelessWidget {const ChildView({super.key});@overrideWidget build(BuildContext context) {return Scaffold(appBar: AppBar(title: Text("子视图")),body: Center(child: Column(children: [ElevatedButton(onPressed: (){Navigator.pop(context, "回传：这是第一个数据回传");}, style: ElevatedButton.styleFrom(backgroundColor: Colors.blueAccent,foregroundColor: Colors.white),child: Text("第一个数据回传")),ElevatedButton(onPressed: (){Navigator.pop(context, "回传：这是第二个数据回传");},style: ElevatedButton.styleFrom(backgroundColor: Colors.orangeAccent,foregroundColor: Colors.white), child: Text("第二个数据回传"))],),),);}
}

效果图如下：

Flutter_学习记录_数据回传

4. 设置导航栏的主题色

MaterialApp组件里面有个 theme属性，设置theme属性就可以设置导航栏的主题色，代码如下：

import 'package:flutter/material.dart';void main() {runApp(MyApp());
}class MyApp extends StatelessWidget {const MyApp({super.key});@overrideWidget build(BuildContext context) {return  MaterialApp(debugShowCheckedModeBanner: true,home: Contrainer(),// 设置导航栏的主题色theme: ThemeData(appBarTheme: AppBarTheme(backgroundColor: Colors.yellow, // 设置导航栏颜色为蓝色),),);}
}

5. 导航栏的左右两侧添加操作按钮

AppBar组件中的leading是可以添加左边一个按钮，actions是可以添加右边的一组按钮，代码实例如下：

import 'package:flutter/material.dart';void main() {runApp(MyApp());
}class MyApp extends StatelessWidget {const MyApp({super.key});@overrideWidget build(BuildContext context) {return  MaterialApp(debugShowCheckedModeBanner: true,home: Home(),theme: ThemeData(appBarTheme: AppBarTheme(backgroundColor: Colors.yellow, // 设置导航栏颜色为蓝色),),);}
}class Home extends StatelessWidget {const Home({super.key});@overrideWidget build(BuildContext context) {return Scaffold(appBar: AppBar(// 添加左边的操作按钮leading: IconButton(onPressed: () => debugPrint("navigation button is pressed."), icon: Icon(Icons.menu),tooltip: "Navigation",),// 添加右边的操作按钮actions: [IconButton(onPressed: () => debugPrint("navigation button is pressed."), icon: Icon(Icons.search),tooltip: "search",)],title: Text("App Demo"),elevation: 0.0),body: Center(child: Text("添加导航栏的事件"),),);}
}