11Flutter--路由和导航

Posted 2021-06-25

路由导航

在本章中不仅仅会谈到页面的渲染，还会阐述数据是如何进行传递的。

页面跳转基本使用
页面跳转发送数据
页面跳转返回数据

页面跳转基本使用

在Flutter中页面的跳转称之为路由，它们由导航器Navigator组件管理。导航器管理一组Route对象，并提供管理堆栈的方法。例如Navigator.push和Navigator.pop。

新建一个页面FirstScrren，添加“查看商品详情页面”的按钮，用来示范按下跳转处理。

body: Center(
  child: RaisedButton(
    child: Text(\'查看商品详情页面\'),
    onPressed: (){
      Navigator.push(context, MaterialPageRoute(builder: (context) => SecondScreen()));
    },
  ),
),

再添加一个页面SecondScreen，页面里添加一个“返回页面”按钮，按下会返回到第一个页面。

body: Center(
  child: RaisedButton(
    child: Text(\'返回页面\'),
    onPressed: (){
      Navigator.pop(context);
    },
  ),
),

完整的示例代码如下所示：

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);
          },
        ),
      ),
    );
  }
}

页面跳转发送数据

页面跳转时有时需要发送数据到第二个页面，比如从订单列表到商品详情页面时，通常需要发送商品id参数。

import \'package:flutter/material.dart\';
void main() => runApp(
  MaterialApp(
    title: \'传递数据示例\',
    home: ProductList(
      products: List.generate(20, (index) => Product(\'商品 $index\', \'这是一个商品详情页 $index\')),
    ),
  )
);
class Product {
  final String title;
  final String description;
  Product(this.title, this.description);
}
// 产品列表页面
class ProductList extends StatelessWidget{
  final List<Product> products;
  const ProductList({Key key, 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) => 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, this.product}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text(\'传递数据示例\'),),
      body: Padding(
        padding: EdgeInsets.all(16.0),
        child: Text(\'${product.description}\'),
      ),
    );
  }
}

页面跳转返回数据

页面跳转不仅要发送数据，有时还需要从第二个页面返回数据，接下来我们通过一个示例来展示页面跳转返回数据的实现方法。

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 SecondPage extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text(\'页面跳转返回数据\'),),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Padding(
              padding: EdgeInsets.all(8.0),
              child: RaisedButton(
                onPressed: (){
                  Navigator.pop(context, \'hi google\');
                },
                child: Text(\'hi google\'),
              ),
            ),
            Padding(
              padding: EdgeInsets.all(8.0),
              child: RaisedButton(
                onPressed: (){
                  Navigator.pop(context, \'hi flutter\');
                },
                child: Text(\'hi flutter\'),
              ),
            ),
          ],
        ),
      ),
    );
  }
}
class RouteButton extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return RaisedButton(
      onPressed: (){
        _navigatorToSecondPage(context);
      },
      child: Text(\'跳转到第二个页面\'),
    );
  }
  void _navigatorToSecondPage(BuildContext context) async {
    final result = await Navigator.push(context, MaterialPageRoute(builder: (context) => SecondPage()));
    // 弹出SnackBar
    Scaffold.of(context).showSnackBar(SnackBar(content: Text(\'$result\'),));
  }
}