Flutter基础篇02--页面跳转与传值

先给出代码demo

显示效果如下图：

点击某一个cell，进入详情页，在详情页展示商品描述；页面返回时，又把商品描述返回给商品列表，并在页面下方提醒接收过来的值。

涉及知识点：
1、构造数据列表
2、动态创建ListView
3、如何数据正向传递到下一页，返回时，数据传回上一页
4、路由、Navigator、异步、Scaffold
5、使用$可以获得变量中的内容，使用${表达式}也可以将表达式的值放入字符串中

1、构造数据列表

商品列表页有个产品列表属性products，相当于数据源数组

构造假数据

home: ProductPage(
  products:List.generate(30, (i)=>Product('商品 $i', '这是商品描述，编号为 $i'))
)

2、动态创建ListView

child: ListView.builder(
    //cell个数
    itemCount: products.length,
    itemBuilder: (context, index) {
      //每一个cell
      return ListTile(
          title: Text('${products[index].title}'),
          subtitle: Text('${products[index].description}'),
        //点击事件
        onTap: (){
          _tapMethod(context, index);
        },
      );
    }
),

3、如何数据正向传递到下一页，返回时，数据传回上一页

点击一个cell时，触发点击事件，通过Navigator.push跳转到下一页,值也带过去了

Navigator.push(
    context,
    MaterialPageRoute(
        builder: (context)=>ProductDetailPage(
          //传到下一页的值
          product: products[index])
    )
)

接受第二页面返回来的值，涉及时间问题，需要异步操作，于是，代码为

//异步处理async ,await
_tapMethod(BuildContext context, int index) async {
  final result = await Navigator.push(
      context,
      MaterialPageRoute(
          builder: (context)=>ProductDetailPage(
            product: products[index])
      )
  );
  if (null != result){
    //第一页面提示返回过来的值
    Scaffold.of(context).showSnackBar(SnackBar(content: Text('$result')));
  }
}

第二页面接受第一页面的值，第二页有个产品属性product，接受传值

返回时，通过Navigator.pop实现返回，并附带传值

onPressed: (){
  Navigator.pop(context, product.description);
},

完整代码demo