路由及导航
页面跳转基本使用
-
说明:移动应用通常通过称为“屏幕"或“页面”的全屏元素显示其内容,在flutter中,这些元素称为路由,它们由导航器Navigator组件管理。导航器管理一组路由Route对象,并提供了管理堆栈的方法,例如Navigator.push和Navigator.pop.
-
例子:查看商品详情页的跳转示例
新建第一个页面加FirstScreen,添加一个跳转的按钮;再添加一个名为SecondScreen,在该页面里添加一个“返回页面”按钮,按下则放回第一个页面。如下代码:
main.dart
import 'package:flutter/material.dart'; import 'package:route_page/page_jumps.dart'; void main() { runApp( new MaterialApp( title: "导航页面示例", home: new FirstScreen(), ) ); }
page_jumps.dart
import 'package:flutter/material.dart'; class FirstScreen extends StatelessWidget{ @override Widget build(BuildContext context) { // TODO: implement build return Scaffold( appBar: AppBar( title: Text("导航页面示例"), ), body: Center( child: RaisedButton( child: Text("查看商品详情页面"), onPressed: (){ Navigator.push(context, new MaterialPageRoute(builder: (context) => new SecondScreen())); }, ), ), ); } } class SecondScreen extends StatelessWidget{ @override Widget build(BuildContext context) { // TODO: implement build return Scaffold( appBar: AppBar( title: Text("导航页面示例"), ), body: new Center( child:RaisedButton( child: Text("返回页面"), onPressed: (){ Navigator.pop(context); }, ) ), ); } }
来到第二个页面
回到第一个页面
页面跳转发送数据
-
说明:页面跳转经常会遇到需要发送数据给其他页面的情况,比如从订单列表到商品详情页面时,通常要发送商品id参数。接下来,我们就以这个为示例,来学习一下发送数据的操作。
-
例子:
-
新建一个页面为productList,使用list.generate方法构造20条模拟数据。
-
当按下商品列表中的某一项时,页面会跳转到商品详情页面(ProductDetail)里面.
main.dart
import 'package:flutter/material.dart'; import 'package:route_page/page_jumps.dart'; import 'package:route_page/send_message.dart'; void main() { runApp( // new MaterialApp( // title: "导航页面示例", // home: new FirstScreen(), // ) new MaterialApp( title: "传递数据示例", home: new ProductList( products: new List.generate(20, (i) => new Product('商品 $i', "这是一个商品详情 $i"))), ) ); }
Send_message.dart
import 'package:flutter/material.dart'; class Product{ final String title; final String description; Product(this.title,this.description); } class ProductList extends StatelessWidget{ final List<Product> products; // 构造函数 ProductList({Key key,@required this.products}):super(key:key); @override Widget build(BuildContext context) { // TODO: implement build return Scaffold( appBar: AppBar( title: new Text("商品列表"), ), body: new ListView.builder( itemCount: products.length, // 遍历 itemBuilder: (context,index){ return new ListTile( title: new Text(products[index].title), onTap: (){ Navigator.push(context, new MaterialPageRoute(builder: (context)=>new ProductDetail(product:products[index])),); }, ); } ), ); } } class ProductDetail extends StatelessWidget{ final Product product; ProductDetail({Key key,@required this.product}):super(key:key); @override Widget build(BuildContext context) { // TODO: implement build return new Scaffold( appBar: new AppBar( title: new Text("${product.title}"), ), body: new Padding( padding: new EdgeInsets.all(16.0), child: new Text("${product.description}"), ), ); } }
页面跳转返回数据
-
说明:页面跳转有时,涉及到要从第二个页面返回数据到第一个页面,下面我们通过一个简单的例子,来练习一下怎么实现。
-
例子:
-
新建第一个页面,并设置跳转按钮。并设置提示语,来检验是否拿到了数据(⚠️这里的跳转事件要设置成异步的,这样才能保证拿到返回数据后,才进行下面的语句执行)
-
第二个页面设置了两个按钮,按下不同的按钮,都会回到第一个页面,但是返回的值不同
代码:
main.dart
import 'package:flutter/material.dart'; import 'package:route_page/page_jumps.dart'; import 'package:route_page/return_message.dart'; import 'package:route_page/send_message.dart'; void main() { runApp( // new MaterialApp( // title: "导航页面示例", // home: new FirstScreen(), // ) // new MaterialApp( // title: "传递数据示例", // home: new ProductList( // products: // new List.generate(20, (i) => new Product('商品 $i', "这是一个商品详情 $i"))), // ) new MaterialApp( title: '页面跳转发、返回数据', home: new FirstPage(), ) ); }
return_message.dart
import 'package:flutter/material.dart'; class FirstPage extends StatelessWidget{ @override Widget build(BuildContext context) { // TODO: implement build return Scaffold( appBar: AppBar( title: Text("页面跳转返回数据示例"), ), body: new Center( child:new RouteButton(), ), ); } } class RouteButton extends StatelessWidget{ @override Widget build(BuildContext context) { // TODO: implement build return RaisedButton( child: Text("跳转到第二个页面"), onPressed: (){ _navigateToSecondPage(context); }, ); } //异步请求---要等await语句的拿到返回值后,才能往下执行 _navigateToSecondPage(BuildContext context) async { final reslut = await Navigator.push(context, new MaterialPageRoute(builder: (context)=>new Secondage()),); //弹出提示信息 Scaffold.of(context).showSnackBar(new SnackBar(content: new Text("${reslut}"))); } } class Secondage extends StatelessWidget{ @override Widget build(BuildContext context) { // TODO: implement build return Scaffold( appBar: AppBar( title: Text("选择一条数据"), ), body: new Center( child: Column( mainAxisAlignment: MainAxisAlignment.center, children: <Widget>[ //Padding可以为其子节点留白(填充) Padding( padding:const EdgeInsets.all(8.0),//留白 child: RaisedButton( child: Text('hi,google!'), onPressed: (){ Navigator.pop(context,'hi google'); }, ), ), Padding( padding:const EdgeInsets.all(8.0),//留白 child: RaisedButton( child: Text('hi,flutter!'), onPressed: (){ Navigator.pop(context,'hi flutter'); }, ), ), ], ), ), ); } }
-
-
-
总结
今天主要记录的是基础的页面跳转、还有具有返回数据和发送数据的页面跳转哈~
好啦!今天的分享就到这里了哦~