我想在Flutter中实现一个交错的网格视图--比如Pinterest交错的网格视图(过去是通过their own Android Widget实现的,现在是通过谷歌的StaggeredGridLayoutManager实现的)。
因此,要求是:
我知道有一个名为flutter_staggered_grid_view的插件,但这是没有用的,因为它需要预先知道网格的每个瓦片的精确高度-当然这不是我的情况。
发布于 2018-06-10 04:48:18
我已经更新了flutter_staggered_grid_view包。
现在您可以添加适合其内容大小的磁贴,如下所示:
您必须使用StaggeredTile.fit(this.crossAxisCellCount)
构造函数来创建tiles。
希望能有所帮助。
发布于 2019-01-20 19:25:48
正如Romain Rastler所说,StaggeredGridView
是一个很好的解决方案,他会定期更新它,下面是一个例子,当我们从互联网上获取内容时,我构建了一个不同高度的网格视图(你可以申请一个应用程序接口):
首先添加这个依赖(目前它的版本是0.3.0
)
pubspec.yaml:flutter_staggered_grid_view: 0.3.0
然后导入这个:import 'package:flutter_staggered_grid_view/flutter_staggered_grid_view.dart';
import 'package:flutter/material.dart';
import 'package:flutter_staggered_grid_view/flutter_staggered_grid_view.dart';
class StaggeredGridExample extends StatefulWidget {
@override
_StaggeredGridExampleState createState() => _StaggeredGridExampleState();
}
class _StaggeredGridExampleState extends State<StaggeredGridExample> {
final List<String> images = [
"https://uae.microless.com/cdn/no_image.jpg",
"https://images-na.ssl-images-amazon.com/images/I/81aF3Ob-2KL._UX679_.jpg",
"https://www.boostmobile.com/content/dam/boostmobile/en/products/phones/apple/iphone-7/silver/device-front.png.transform/pdpCarousel/image.jpg",
"https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSgUgs8_kmuhScsx-J01d8fA1mhlCR5-1jyvMYxqCB8h3LCqcgl9Q",
"https://ae01.alicdn.com/kf/HTB11tA5aiAKL1JjSZFoq6ygCFXaw/Unlocked-Samsung-GALAXY-S2-I9100-Mobile-Phone-Android-Wi-Fi-GPS-8-0MP-camera-Core-4.jpg_640x640.jpg",
"https://media.ed.edmunds-media.com/gmc/sierra-3500hd/2018/td/2018_gmc_sierra-3500hd_f34_td_411183_1600.jpg",
"https://hips.hearstapps.com/amv-prod-cad-assets.s3.amazonaws.com/images/16q1/665019/2016-chevrolet-silverado-2500hd-high-country-diesel-test-review-car-and-driver-photo-665520-s-original.jpg",
"https://www.galeanasvandykedodge.net/assets/stock/ColorMatched_01/White/640/cc_2018DOV170002_01_640/cc_2018DOV170002_01_640_PSC.jpg",
"https://media.onthemarket.com/properties/6191869/797156548/composite.jpg",
"https://media.onthemarket.com/properties/6191840/797152761/composite.jpg",
];
@override
Widget build(BuildContext context) {
return Scaffold(
body: StaggeredGridView.countBuilder(
crossAxisCount: 4,
itemCount: images.length,
itemBuilder: (BuildContext context, int index) => Card(
child: Column(
children: <Widget>[
Image.network(images[index]),
Text("Some text"),
],
),
),
staggeredTileBuilder: (int index) =>
new StaggeredTile.fit(2),
mainAxisSpacing: 4.0,
crossAxisSpacing: 4.0,
),
);
}
}
发布于 2018-06-10 11:00:07
尝尝这个。
return new StreamBuilder<QuerySnapshot>(
stream: Firestore.instance.collection(PRODUCTS_COLLECTION).snapshots(),
builder: (BuildContext context, AsyncSnapshot<QuerySnapshot> snapshot) {
if (!snapshot.hasData) return new Center(child: new CircularProgressIndicator());
return new StaggeredGridView.count(
physics: new BouncingScrollPhysics(),
crossAxisCount: 2,
children: buildGrid(snapshot.data.documents),
staggeredTiles: generateRandomTiles(snapshot.data.documents.length),
);
},
);
List<Widget> buildGrid(List<DocumentSnapshot> documents) {
List<Widget> _gridItems = [];
_products.clear();
for (DocumentSnapshot document in documents) {
_products.add(Product.fromDocument(document));
}
for (Product product in _products) {
_gridItems.add(buildGridItem(product));
}
return _gridItems;
}
Widget buildGridItem(Product product) {
return new GestureDetector(
child: new Card(
elevation: 2.0,
margin: const EdgeInsets.all(5.0),
child: new Stack(
alignment: Alignment.center,
children: <Widget>[
new Hero(
tag: product.name,
child: new Image.network(product.imageUrl, fit: BoxFit.cover),
),
new Align(
child: new Container(
padding: const EdgeInsets.all(6.0),
child: new Column(
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
new Text('\u20B9 ${product.price}',
style: new TextStyle(
color: Colors.white,
fontWeight: FontWeight.bold,
fontSize: 16.0)),
new Text(product.name,
style: new TextStyle(color: Colors.white)),
],
),
color: Colors.black.withOpacity(0.4),
width: double.infinity,
),
alignment: Alignment.bottomCenter,
),
],
),
),
onTap: () async {
// TODO
},
);
}
List<StaggeredTile> generateRandomTiles(int count) {
Random rnd = new Random();
List<StaggeredTile> _staggeredTiles = [];
for (int i=0; i<count; i++) {
num mainAxisCellCount = 0;
double temp = rnd.nextDouble();
if (temp > 0.6) {
mainAxisCellCount = temp + 0.5;
} else if (temp < 0.3) {
mainAxisCellCount = temp + 0.9;
} else {
mainAxisCellCount = temp + 0.7;
}
_staggeredTiles.add(new StaggeredTile.count(rnd.nextInt(1) + 1, mainAxisCellCount));
}
return _staggeredTiles;
}
https://stackoverflow.com/questions/50435467
复制相似问题