父组件跳转子组件

  • Navigator.push 是跳转到下一个页面，它要接受两个参数一个是context（上下文），另一个是要跳转的函数。
  • Navigator.pop 是返回到上一个页面，使用时传递一个context（上下文）参数，使用时要注意的是，你必须是有上级页面的，也就是说上级页面使用了Navigator.push ```dart import ‘package:flutter/material.dart’;

//传递的数据结构,也可以理解为对商品数据的抽象 class Product { final String title; //商品标题 final String description; //商品描述 Product(this.title, this.description); }

// void main() { // runApp(MaterialApp( // title: ‘数据传递案例’, // // List.generate生成的。并且这个生成的List原型就是我们刚开始定义的Product这个类（抽象数据） // home: ProductList( // products: List.generate(20, (i) => Product(‘商品 $i’, ‘这是一个商品详情，编号为:$i’)), // ))); // }

//分离后的 void main() => runApp(MyApp()); class MyApp extends StatelessWidget { const MyApp({Key key}) : super(key: key); @override Widget build(BuildContext context) { return MaterialApp( title: ‘数据传递案例’, // List.generate生成的。并且这个生成的List原型就是我们刚开始定义的Product这个类（抽象数据） home: ProductList( products: List.generate(20, (i) => Product(‘商品 $i’, ‘这是一个商品详情，编号为:$i’)), )); } }

class ProductList extends StatelessWidget { final List products; ProductList({Key key, @required this.products}) : super(key: key); @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar(title: Text(‘商品列表’)), // 先接受了主方法传递过来的参数，接受后用ListView.builder方法，作了一个根据传递参数数据形成的动态列表。 body: ListView.builder( itemCount: products.length, itemBuilder: (context, index) { return ListTile( title: Text(products[index].title), onTap: () { Navigator.push( context, 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) { return new Scaffold( appBar: AppBar( title: Text(‘${product.title}’), ), body: Center( child: Text(‘${product.description}’), )); } }

  4. <a name="KMfF7"></a>
  5. ### 导航参数的传递和接收
  6. ```dart
  7. import 'package:flutter/material.dart';
  9. //传递的数据结构,也可以理解为对商品数据的抽象
  10. class Product {
  11.   final String title; //商品标题
  12.   final String description; //商品描述
  13.   Product(this.title, this.description);
  14. }
  16. void main() {
  17.   runApp(MaterialApp(
  18.       title: '数据传递案例',
  19.       home: ProductList(
  20.         products: List.generate(20, (i) => Product('商品 $i', '这是一个商品详情，编号为:$i')),
  21.       )));
  22. }
  24. class ProductList extends StatelessWidget {
  25.   final List<Product> products;
  26.   ProductList({Key key, @required this.products}) : super(key: key);
  27.   @override
  28.   Widget build(BuildContext context) {
  29.     return Scaffold(
  30.         appBar: AppBar(title: Text('商品列表')),
  31.         body: ListView.builder(
  32.           itemCount: products.length,
  33.           itemBuilder: (context, index) {
  34.             return ListTile(
  35.                 title: Text(products[index].title),
  36.                 onTap: () {
  37.                   Navigator.push(
  38.                       context,
  39.                       MaterialPageRoute(
  40.                           builder: (context) =>
  41.                               new ProductDetail(product: products[index])));
  42.                 });
  43.           },
  44.         ));
  45.   }
  46. }
  48. class ProductDetail extends StatelessWidget {
  49.   final Product product;
  50.   ProductDetail({Key key, @required this.product}) : super(key: key);
  52.   @override
  53.   Widget build(BuildContext context) {
  54.     return new Scaffold(
  55.         appBar: AppBar(
  56.           title: Text('${product.title}'),
  57.         ),
  58.         body: Center(
  59.           child: Text('${product.description}'),
  60.         ));
  61.   }
  62. }

页面跳转并返回数据

  1. import 'package:flutter/material.dart';
  3. void main(){
  4.   runApp(MaterialApp(
  5.     title:'页面跳转返回数据',
  6.     home:FirstPage()
  7.   ));
  8. }
  10. class FirstPage extends StatelessWidget {
  11.   @override
  12.   Widget build(BuildContext context) {
  13.     return Scaffold(
  14.       appBar:AppBar(title:Text("找小姐姐要电话")),
  15.       body:Center(
  16.         child: RouteButton(),
  17.       )
  18.     );
  19.   }
  20. }
  22. //跳转的Button
  23. class RouteButton extends StatelessWidget {
  24.   @override
  25.   Widget build(BuildContext context) {
  26.     return RaisedButton(
  27.       onPressed:(){
  28.           _navigateToXiaoJieJie(context);
  29.       },
  30.       child: Text('去找小姐姐'),
  31.     );
  32.   }
  34.   _navigateToXiaoJieJie(BuildContext context) async{ //async是启用异步方法
  36.     final result = await Navigator.push(//等待
  37.       context, 
  38.       MaterialPageRoute(builder: (context)=> XiaoJieJie())
  39.       );
  41.       Scaffold.of(context).showSnackBar(SnackBar(content:Text('$result')));
  42.   }
  43. }
  45. class XiaoJieJie extends StatelessWidget {
  46.   @override
  47.   Widget build(BuildContext context) {
  48.     return Scaffold(
  49.       appBar:AppBar(
  50.         title:Text('我是小姐姐')
  51.       ),
  52.       body:Center(
  53.         child:Column(
  54.           children: <Widget>[
  55.             RaisedButton(
  56.               child: Text('大长腿小姐姐'),
  57.               onPressed: (){
  58.                 Navigator.pop(context,'大长腿:1511008888');
  59.               },
  60.             ) ,
  61.             RaisedButton(
  62.               child: Text('小蛮腰小姐姐'),
  63.               onPressed: (){
  64.                 Navigator.pop(context,'小蛮腰:1511009999');
  65.               },
  66.             ) ,
  67.           ],
  68.         ) 
  69.       ) ,
  70.     );
  71.   }
  72. }

SnackBar的使用

SnackBar是用户操作后，显示提示信息的一个控件，类似Tost

Scaffold.of(context).showSnackBar(SnackBar(content:Text('$result')));

返回数据的方式

返回数据其实是特别容易的，只要在返回时带第二个参数就可以了。

Navigator.pop(context,'xxxx');  //xxx就是返回的参数

Navigator.pop()的源代码

@optionalTypeArgs
static void pop<T extends Object?>(BuildContext context, [ T? result ]) {
  Navigator.of(context).pop<T>(result);
}

Flutter 返回上一页并刷新

用flutter路由跳转页面时，主要用到的就是 Navigator.push() 和 Navigator.pop() 两个方法。
但是存在一个问题：
当我从主页跳转到另一个页面，再返回到主页时，主页并不能主动刷新。怎么解决呢？
答案时，当返回到主页时，监听到返回事件，然后主动触发主页刷新。

class PageOne extends StatefulWidget {
  @override
  _PageOneState createState() => new _PageOneState();
}

class _PageOneState extends State<PageOne> {    // 第一个页面
  _getRequests()async{  
        print('这里进行操作');
  }
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: RaisedButton(onPressed: ()=>
        Navigator.of(context).push(new MaterialPageRoute(builder: (_)=>PageTwo()),)
        .then((val)=>val?_getRequests():null), // 通过then进行监听回调参数
      ),
    ));
  }
}

class PageTwo extends StatelessWidget { // 第二个页面
  @override
  Widget build(BuildContext context) {
    //somewhere
    Navigator.pop(context,true); // 第二个就是需要传到参数
  }
}