Flutter学习笔记十四——导航参数的传递和接收

2019年5月8日 239次阅读 来源: Love零O

在上一篇Flutter学习笔记十三——页面跳转与返回中，学习了界面跳转与返回，类似Android中startActivity(intent)的简单使用。这节学习如何跳转时传值，类似intent中携带bundle或者直接携带extra，在第二个界面介绍intent中的值。
需求:点击商品列表后跳转到商品详情页，显示商品详情信息。

《Flutter学习笔记十四——导航参数的传递和接收》 5cb0626ad70d3_preview.gif

首先创建商品bean类,包括title和description，还有一个构造函数。

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, @required this.products}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('商品列表'),
        centerTitle: true,
        backgroundColor: Colors.orangeAccent,
      ),
      body: ListView.builder(
          itemCount: products.length,
          itemBuilder: (context, index) {
            return ListTile(
              title: Text(products[index].title),
              leading: Icon(Icons.favorite_border, color: Colors.redAccent),
              onTap: () {
                Navigator.push(
                    context,
                    MaterialPageRoute(
                        builder: (context) =>
                            ProductDetail(product: products[index])));
              },
            );
          }),
    );
  }
}

页面跳转使用Navigator.push(),路由使用MaterialPageRoute()，其中的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('${product.title}'),
      ),
      body: Center(
        child: Text('${product.description}'),
      ),
    );
  }
}

完整的demo代码：

import 'package:flutter/material.dart';

void main() {
  runApp(MaterialApp(
    title: "导航传值",
    home: ProductList(
      products:
      List.generate(20, (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('商品列表'),
        centerTitle: true,
        backgroundColor: Colors.orangeAccent,
      ),
      body: ListView.builder(
          itemCount: products.length,
          itemBuilder: (context, index) {
            return ListTile(
              title: Text(products[index].title),
              leading: Icon(Icons.favorite_border, color: Colors.redAccent),
              onTap: () {
                Navigator.push(
                    context,
                    MaterialPageRoute(
                        builder: (context) =>
                            ProductDetail(product: products[index])));
              },
            );
          }),
    );
  }
}

class Product {
  final String title;
  final String description;

  Product(this.title, this.description);
}

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('${product.title}'),
      ),
      body: Center(
        child: Text('${product.description}'),
      ),
    );
  }
}
    原文作者：Love零O
    原文地址: https://www.jianshu.com/p/53e90f530d3a
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞