flutter - 如何在颤振中创建此 UI?
问题描述
我想要这个 UI 颤抖。 在此处输入图像描述
解决方案
这是我做类似事情的代码。它有 aGridView
显示GridTile
s,有 aFadeInImage
和 a GridTileBar
。
class ProductsGrid extends StatelessWidget {
final favouritesOnly;
ProductsGrid(this.favouritesOnly);
@override
Widget build(BuildContext context) {
var productsProvider = Provider.of<Products>(context);
var products =
favouritesOnly ? productsProvider.favourites : productsProvider.items;
return GridView.builder(
padding: const EdgeInsets.all(10),
itemCount: products.length,
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 2,
childAspectRatio: 3 / 2,
crossAxisSpacing: 10,
mainAxisSpacing: 10,
),
itemBuilder: (context, index) => ChangeNotifierProvider.value(
value: products[index],
child: ProductItem(),
),
);
}
}
class ProductItem extends StatelessWidget {
@override
Widget build(BuildContext context) {
final product = Provider.of<Product>(context, listen: false);
final cart = Provider.of<Cart>(context, listen: false);
final auth = Provider.of<Auth>(context, listen: false);
final scaffold = Scaffold.of(context);
return ClipRRect(
borderRadius: BorderRadius.circular(10),
child: GridTile(
child: GestureDetector(
onTap: () {
Navigator.of(context).pushNamed(
ProductDetailScreen.routeName,
arguments: product.id,
);
},
child: FadeInImage(
placeholder: AssetImage('assets/images/product_placeholder.png'),
image: NetworkImage(product.imageUrl),
fit: BoxFit.cover,
),
),
footer: GridTileBar(
leading: Consumer<Product>(
builder: (context, product, child) => IconButton(
icon: Icon(product.isFavourite
? Icons.favorite
: Icons.favorite_border),
color: Theme.of(context).accentColor,
onPressed: () async {
try {
await product.toggleFavourite(auth.token, auth.userId);
} catch (error) {
print(error);
scaffold.showSnackBar(SnackBar(
content: Text(
error.toString(),
textAlign: TextAlign.center,
),
));
}
},
),
// child: optional invariant child widget to provide to builder
),
title: Text(
product.title,
textAlign: TextAlign.center,
),
trailing: IconButton(
icon: Icon(Icons.shopping_cart),
color: Theme.of(context).accentColor,
onPressed: () {
cart.addItem(product.id, product.title, product.price);
Scaffold.of(context).showSnackBar(SnackBar(
content: Text('Added item to cart'),
duration: Duration(seconds: 2),
action: SnackBarAction(
label: 'UNDO',
onPressed: () {
cart.removeSingleItem(product.id);
})));
},
),
backgroundColor: Colors.black87,
),
));
}
}
推荐阅读
- mysql - 获取一个包含多个 JOIN 且没有 WHERE 子句检索 1 秒以下 8000 行的 SQL 语句是否现实?
- sql - REGEXP 以“字母”结尾,该字母后面可能有空格
- timer - Arduino CTC 定时器中断 ~2x 快
- java - 如何使用基本接口引用调用扩展接口函数?
- python - 这个 Python 正则表达式有什么问题?
- magento - Magento 中的错误 500
- android - SQLite onUpgrade 未调用
- html - 使用 Golang 发布 HTML 表单方法
- r - 在 R 中运行代码时库(ggplot2)中的错误
- c# - Install numpy for IronPython