flutter页面导航和返回

RaisedButton组件有两个最基本的属性：

• child：可以放入容器，图标，文字。让你构建多彩的按钮。
• onPressed：点击事件的响应，一般会调用Navigator组件。

Navigator.push和Navigator.pop

• Navigator.push：是跳转到下一个页面，它要接收两个参数，一个是上下文context，另一个是要跳转的函数。

• Navigator.pop：是返回到上一个页面，使用时传递一个context（上下文）参数，使用时要注意的是，你必须是有上级页面的，也就是说上级页面使用了Navigator.push。

import 'package:flutter/material.dart';

void main() {
    runApp(MaterialApp(
        title: '',
        home: FirstScreen()
    ));
}

class FirstScreen extends StatelessWidget {
    @override 
    Widget build(BuildContext context) {
        return Scaffold(
            appBar: AppBar(title: Text('导航页面'),),
            body: Center(
                child: RaisedButton(
                    child: Text('查看详情页'),
                    onPressed: (){
                        Navigator.push(context, MaterialPageRoute(
                            builder: (context) => SecondScreen()
                        ));
                    }
                ),
                
            ),
        );
    }
}

class SecondScreen extends StatelessWidget {
    @override 
    Widget build(BuildContext context) {
        return Scaffold(
            appBar: AppBar(title: Text('详情页'),),
            body: Center(
                child: RaisedButton(
                    child: Text('返回'),
                    onPressed: (){
                        Navigator.pop(context);
                    }
                    
                )
            ),
        );
    }
}

 导航参数的传递和接收

　　声明数据结构类：Dart中可以使用类来抽象一个数据，比如一个商品信息，有商品标题和描述，定义一个Product类，里边有2个字符型变量，title和description。

• title:是商品标题；
• description: 商品详情描述；

class Product {
  final String title;
  final String description;
  Product(this.title, this.description);
}

　　构建一个商品列表：

import 'package:flutter/material.dart';

class Product {
  final String title;
  final String description;
  Product(this.title, this.description);
}

void main(List<String> args) {
  runApp(MaterialApp(
        title: '导航参数的传递和接收',
        home: ProductList(products: List.generate(10, (index) => Product('商品标题 $index', '商品描述 $index')))
    ));
}

class ProductList extends StatelessWidget {
  final List<Product> products;
  const ProductList({Key key, @required this.products}) : super(key: key);

  @override
  Widget 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({Key key, @required this.product}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('${product.title}'),),
      body: Center(
        child: Text('${product.description}')
      ),
    );
  }
}

 传参和跳转：

import 'package:flutter/material.dart';

class Product {
  final String title;
  final String description;
  Product(this.title, this.description);
}

void main(List<String> args) {
  runApp(MaterialApp(
        title: '导航参数的传递和接收',
        home: ProductList(products: List.generate(10, (index) => Product('商品标题 $index', '商品描述 $index')))
    ));
}

class ProductList extends StatelessWidget {
  final List<Product> products;
  const ProductList({Key key, @required this.products}) : super(key: key);

  @override
  Widget 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({Key key, @required this.product}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('${product.title}'),),
      body: Center(
        child: Text('${product.description}')
      ),
    );
  }
}