您现在的位置是:首页 > 网络技术网络技术

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

查看 旭日哥哥 的更多文章2021-03-10【网络技术】109人已围观

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


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

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

Tags: flutter

文章评论

猜你喜欢

爱诚帝

V管理员
文章 320 篇 | 评论 4 次
最新文章

最新留言