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