GridView.custom(
gridDelegate: SliverQuiltedGridDelegate(
crossAxisCount: 2,
mainAxisSpacing: 4,
crossAxisSpacing: 4,
repeatPattern: QuiltedGridRepeatPattern.inverted,
pattern: [
const QuiltedGridTile(2, 1),
const QuiltedGridTile(1, 1),
],
),
childrenDelegate: SliverChildBuilderDelegate(
(BuildContext context, int index) {
......
所以我现在的实现是这样的。
希望根据内容大小调整列表瓷砖/网格块的大小,使其看起来像动态网格。我还需要弄清楚如何将delete按钮放在右下角,但这是对另一天的挑战。
发布于 2022-09-05 05:25:56
您可以使用视图
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> staggeredGridViewImage = [
"https://uae.microless.com/cdn/no_image.jpg",
"https://images-na.ssl-images-amazon.com/images/I/81aF3Ob-2KL._UX679_.jpg",
"https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSgUgs8_kmuhScsx-J01d8fA1mhlCR5-1jyvMYxqCB8h3LCqcgl9Q",
"https://media.ed.edmunds-media.com/gmc/sierra-3500hd/2018/td/2018_gmc_sierra-3500hd_f34_td_411183_1600.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,
mainAxisSpacing: 24,
crossAxisSpacing: 12,
itemCount: staggeredGridViewImage.length,
itemBuilder: (BuildContext context, int index) => Card(
child: Column(
children: <Widget>[
Image.network(staggeredGridViewImage[index]),
Text("Some text"),
],
),
),
staggeredTileBuilder: (int index) => new StaggeredTile.fit(2),
),
);
}
}
https://stackoverflow.com/questions/73604366
复制相似问题