临沂网站建设有哪些,那些网站权重高,网站策划书案例,网站标识描述可以填关键词吗Flutter 的导航页面跳转#xff0c;是通过组件Navigator 和 组件MaterialPageRoute来实现的#xff0c;Navigator提供了很多个方法#xff0c;但是目前#xff0c;我只记录我学习过程中接触到的方法#xff1a; Navigator.push(), 跳转下一个页面Navigator.pop(), 返回上一…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 ListProduct 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(添加导航栏的事件),),);}
}
效果图如下
