zoukankan      html  css  js  c++  java
  • 技术胖Flutter第四季-21导航的参数传递和接受-2

    21导航的参数传递和接受-2

    视频地址

    https://www.bilibili.com/video/av35800108/?p=22

    博客地址:https://jspang.com/post/flutter4.html#toc-3d6

    在onTap里面写事件:

    跳转到ProductDetail页面把整个products当前的对象都传过去了。

    新建ProductDetail类

    使用stlss快捷键生成

    再写上类名:ProductDetail 就可以了

    定义product变量。在构造函数内接收

    纠正一个错误

    首先这里的ProductDetail要new出来一个对象,第二个是传参数的时候,参数的key值也要写出来,不要只传了Value值过去

    展示商品的详情页面。点击箭头可以进行返回。

    最终代码

    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('wjw-商品$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 Scaffold(
          appBar: AppBar(title: Text('${product.title}'),),
          body: Center(child: Text('${product.description}'),),
        );
      }
    }
    最终代码
  • 相关阅读:
    适配器模式
    控制器的显示注入
    自定义过滤器
    配置路由
    JavaScript判断浏览器类型及版本(新增IE11)
    路径别名
    判断是否是IE浏览器和是否是IE11
    页面视图中的按钮操作指向
    安卓开发环境搭建与环境变量设置
    html中iframe子页面与父页面元素的访问以及js变量的访问
  • 原文地址:https://www.cnblogs.com/wangjunwei/p/10569144.html
Copyright © 2011-2022 走看看