第四章 导航和其他

简单导航

import 'package:flutter/material.dart';
void main(){
  runApp(MaterialApp(
    title: "导航条演示01",
    home: new FirstScreen(),
  ));
}
  class FirstScreen extends StatelessWidget{
    @override
    Widget build(BuildContext context){
      return Scaffold(
        appBar: AppBar(title: Text("导航页面")),
        body: Center(
          child: RaisedButton(
              child: Text('查看商品详情页'),
              onPressed: (){  //onPressed 点击事件
                Navigator.push(context, MaterialPageRoute(builder: (context)=>new SecondScreen()));//Navigator导航组件 MaterialPageRoute路由组件
              },),
        ),
  );
  }
}
class SecondScreen extends StatelessWidget{
  @override
  Widget build(BuildContext context){
    return Scaffold(
      appBar: AppBar(title: Text('WWt商品详情页'),),
      body: Center(
        child: RaisedButton(
          child: Text("返回"),
          onPressed: (){
            Navigator.pop(context);    //返回
          },
        ),
      ),
    );
  }
}

导航传递参数

import 'package:flutter/material.dart';
class Product{//商品对象
  final String title;//商品标题
  final String descriptiom;//商品描述
  Product(this.title,this.descriptiom);//构造函数
}
void main(){
  runApp(MaterialApp(
    title: "导航的数据传递和接收",
    home: ProductList(
      products:List.generate(20, (i) => Product("商品$i", "这是一个商品详情，编号$i"))//生成20个导航
    ),
  ));
}
class ProductList extends StatelessWidget {
  final List<Product> products;
  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;
  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.descriptiom}"),),
    );
  }
}

导航返回参数(异步请求和等待)

import 'package:flutter/material.dart';
void main(){
  runApp(MaterialApp(
    title: "页面跳转返回数据",
    home: FirstPage(),
  ));
}
class FirstPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("找电话"),),
      body: Center(
        child: RouteButton(),
      ),
    );
  }
}
class RouteButton extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return RaisedButton(
        onPressed: (){_navigateToPhone(context);},
        child: Text("去找人"),
    );
  }
  _navigateToPhone(BuildContext  context) async{
    final result = await Navigator.push(
        context, MaterialPageRoute(builder: (context)=>zhaoren()));
    Scaffold.of(context).showSnackBar(SnackBar(content: Text("$result")));//这条是返回参数的重点
  }
}
class zhaoren extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("我是人"),
      ),
      body: Center(
        child: Column(
          children: <Widget>[
            RaisedButton(
              child: Text("机器人"),
              onPressed: (){
                Navigator.pop(context,"机器人编号:10086");
              },
            ),
            RaisedButton(
              child: Text("人工机器人"),
              onPressed: (){
                Navigator.pop(context,"机器人编号:10087");
              },
            ),
          ],
        ),
      ),
    );
  }
}