P18. Flutter 导航参数的传递和接收

目录
文章目录隐藏
  1. Awesome Flutter snippets 组件的使用
  2. 声明数据结构类
  3. 构建一个商品列表
  4. 导航参数的传递
  5. 子页面接受参数并显示
  6. Demo 全部代码如下

本文主要学习导航页面跳转的时候参数的传递和接受。

Awesome Flutter snippets 组件的使用

在实际开发中我们的代码会很多,这时候我们要加快敲代码的速度,推荐大家可以使用 VSCode 中的Awesome Flutter snippets插件。它可以帮忙我们快速生成常用的 Flutter 代码片段。

比如输入stlss就会给我们生成如下代码:

class  extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      
    );
  }
}

安装完成后,我们可以看这个插件的说明,可以快速生成很多代码片段,我就不一个个给大家试了,小伙伴们可以自己测试。熟练掌握后,能大大加快我们的代码编写速度。

声明数据结构类

Dart 中可以使用类来抽象一个数据,比如我们模仿一个商品信息,有商品标题和商品描述。我们定义了一个 Product 类,里边有两个字符型变量,titledescription

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

代码如下:

class Product{
  final String title;  //商品标题
  final String description;  //商品描述
  Product(this.title,this.description);
}

构建一个商品列表

作一个商品的列表,这里我们采用动态的构造方法,在主方法里传递一个商品列表(List)到自定义的 Widget 中。

先来看看主方法的编写代码:

void main(){
  runApp(MaterialApp(
    title:'数据传递案例',
    home:ProductList(
      products:List.generate(
        20, 
        (i)=>Product('码云笔记商品 $i','这是一个商品详情,编号为:$i')
      ),
    )
  ));
}

上面的代码是主路口文件,主要是在 home 属性中,我们使用了 ProductList,这个自定义组件,而且时候会报错,因为我们缺少这个组件。这个组件我们传递了一个 products 参数,也就是商品的列表数据,这个数据是我们用List.generate生成的。并且这个生成的 List 原型就是我们刚开始定义的 Product 这个类(抽象数据)。

ProductList 自定义组件的代码:

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

先接受了主方法传递过来的参数,接受后用ListView.builder方法,作了一个根据传递参数数据形成的动态列表。

Flutter 导航的参数传递与接收

已经有了商品列表,下面要做的就是把商品数据传递过去,然后显示商品详情页面。

导航参数的传递

我们还是使用Navigator组件,然后使用路由MaterialPageRoute传递参数,具体代码如下。

Navigator.push(
  context, 
  MaterialPageRoute(
    builder:(context)=>new ProductDetail(product:products[index])
  )
);

这段代码要写在onTap相应事件当中。这时候ProductDetail会报错,因为我们还没有声明这个组件或者说是类。

子页面接受参数并显示

现在需要声明ProductDetail这个类(组件),先要作的就是接受参数,具体代码如下。

class ProductDetail extends StatelessWidget {
  final Product product;
  ProductDetail({Key key ,@required this.product}):super(key:key);


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

先接受了参数,并把数据显示在了页面中。

Demo 全部代码如下

为了更好的帮助大家学习,我把所有的传递参数和接受参数的代码附在了下面。

import 'package:flutter/material.dart';

//传递的数据结构,也可以理解为对商品数据的抽象
class Product{
  final String title;  //商品标题
  final String description;  //商品描述
  Product(this.title,this.description);
}

void main(){
  runApp(MaterialApp(
    title:'数据传递案例',
    home:ProductList(
      products:List.generate(
        20, 
        (i)=>Product('码云笔记商品 $i','这是一个商品详情,编号为:$i')
      ),
    )
  ));
}

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)=>new 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 new Scaffold(
      appBar: AppBar(
        title:Text('${product.title}'),
      ),
      body:Center(child: Text('${product.description}'),)
    );
  }
}

效果如下:

Flutter 导航的参数传递与接收

「点点赞赏,手留余香」

0

给作者打赏,鼓励TA抓紧创作!

微信微信 支付宝支付宝

还没有人赞赏,快来当第一个赞赏的人吧!

声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。
码云笔记 » P18. Flutter 导航参数的传递和接收

发表回复