我有一个动态项目列表，正在输出到 mainAxisCount 为 2（2 列网格）的
GridView.count考虑到flutter_staggered_grid_view，有两个答案。虽然这是一个不错的包，但我认为它的功能比你想要的要多得多。
我提供了更多手动、自定义的实现。
import 'dart:math';
import 'package:flutter/rendering.dart';
import 'package:flutter/widgets.dart';
/// A [SliverGridLayout] that provide a way to customize the children geometry.
class SliverGridWithCustomGeometryLayout extends SliverGridRegularTileLayout {
/// The builder for each child geometry.
final SliverGridGeometry Function(
int index,
SliverGridRegularTileLayout layout,
) geometryBuilder;
SliverGridWithCustomGeometryLayout({
@required this.geometryBuilder,
@required int crossAxisCount,
@required double mainAxisStride,
@required double crossAxisStride,
@required double childMainAxisExtent,
@required double childCrossAxisExtent,
@required bool reverseCrossAxis,
}) : assert(geometryBuilder != null),
assert(crossAxisCount != null && crossAxisCount > 0),
assert(mainAxisStride != null && mainAxisStride >= 0),
assert(crossAxisStride != null && crossAxisStride >= 0),
assert(childMainAxisExtent != null && childMainAxisExtent >= 0),
assert(childCrossAxisExtent != null && childCrossAxisExtent >= 0),
assert(reverseCrossAxis != null),
super(
crossAxisCount: crossAxisCount,
mainAxisStride: mainAxisStride,
crossAxisStride: crossAxisStride,
childMainAxisExtent: childMainAxisExtent,
childCrossAxisExtent: childCrossAxisExtent,
reverseCrossAxis: reverseCrossAxis,
);
@override
SliverGridGeometry getGeometryForChildIndex(int index) {
return geometryBuilder(index, this);
}
}
/// Creates grid layouts with a fixed number of tiles in the cross axis, such
/// that fhe last element, if the grid item count is odd, is centralized.
class SliverGridDelegateWithFixedCrossAxisCountAndCentralizedLastElement
extends SliverGridDelegateWithFixedCrossAxisCount {
/// The total number of itens in the layout.
final int itemCount;
SliverGridDelegateWithFixedCrossAxisCountAndCentralizedLastElement({
@required this.itemCount,
@required int crossAxisCount,
double mainAxisSpacing = 0.0,
double crossAxisSpacing = 0.0,
double childAspectRatio = 1.0,
}) : assert(itemCount != null && itemCount > 0),
assert(crossAxisCount != null && crossAxisCount > 0),
assert(mainAxisSpacing != null && mainAxisSpacing >= 0),
assert(crossAxisSpacing != null && crossAxisSpacing >= 0),
assert(childAspectRatio != null && childAspectRatio > 0),
super(
crossAxisCount: crossAxisCount,
mainAxisSpacing: mainAxisSpacing,
crossAxisSpacing: crossAxisSpacing,
childAspectRatio: childAspectRatio,
);
bool _debugAssertIsValid() {
assert(crossAxisCount > 0);
assert(mainAxisSpacing >= 0.0);
assert(crossAxisSpacing >= 0.0);
assert(childAspectRatio > 0.0);
return true;
}
@override
SliverGridLayout getLayout(SliverConstraints constraints) {
assert(_debugAssertIsValid());
final usableCrossAxisExtent = max(
0.0,
constraints.crossAxisExtent - crossAxisSpacing * (crossAxisCount - 1),
);
final childCrossAxisExtent = usableCrossAxisExtent / crossAxisCount;
final childMainAxisExtent = childCrossAxisExtent / childAspectRatio;
return SliverGridWithCustomGeometryLayout(
geometryBuilder: (index, layout) {
return SliverGridGeometry(
scrollOffset: (index ~/ crossAxisCount) * layout.mainAxisStride,
crossAxisOffset: itemCount.isOdd && index == itemCount - 1
? layout.crossAxisStride / 2
: _getOffsetFromStartInCrossAxis(index, layout),
mainAxisExtent: childMainAxisExtent,
crossAxisExtent: childCrossAxisExtent,
);
},
crossAxisCount: crossAxisCount,
mainAxisStride: childMainAxisExtent + mainAxisSpacing,
crossAxisStride: childCrossAxisExtent + crossAxisSpacing,
childMainAxisExtent: childMainAxisExtent,
childCrossAxisExtent: childCrossAxisExtent,
reverseCrossAxis: axisDirectionIsReversed(constraints.crossAxisDirection),
);
}
double _getOffsetFromStartInCrossAxis(
int index,
SliverGridRegularTileLayout layout,
) {
final crossAxisStart = (index % crossAxisCount) * layout.crossAxisStride;
if (layout.reverseCrossAxis) {
return crossAxisCount * layout.crossAxisStride -
crossAxisStart -
layout.childCrossAxisExtent -
(layout.crossAxisStride - layout.childCrossAxisExtent);
}
return crossAxisStart;
}
}
稍微解释一下，这段代码的作用是它是
SliverGridLayout这里比较重要的方法是
getGeometryForChildIndexindex我们实现的下一个类是
SliverGridDelegateSliverGridWithCustomGeometryLayoutSliverGridLayoutgeometryBuilderSliverGridGeometrygeometryBuilderSliverGridRegularTileLayout要使用我们的解决方案，只需将其传递给
gridDelegateGridViewGridView.builder(
itemCount: 9,
itemBuilder: (_, __) =>
Container(width: 100, height: 100, color: Colors.red),
gridDelegate:
SliverGridDelegateWithFixedCrossAxisCountAndCentralizedLastElement(
itemCount: checklist.sections.length(),
crossAxisCount: 2,
childAspectRatio: 0.825,
),
)
这个解决方案没有经过详尽的测试，我把它发布在这里只是为了让人们知道如何制作它。但是，我在生产代码中使用它。如果我最终发现任何问题，我会在这里编辑。
你试试下面的方法怎么样？
您可以使用 flutter_staggered_grid_view 包来实现此目的。
示例：
StaggeredGridView.countBuilder(
crossAxisCount: 4,
itemCount: 8,
itemBuilder: (BuildContext context, int index) => Container(
color: Colors.green,
child: Center(
child: new CircleAvatar(
backgroundColor: Colors.white,
child: new Text('$index'),
),
)),
staggeredTileBuilder: (int index) =>
StaggeredTile.count(2, index.isEven ? 2 : 1),
mainAxisSpacing: 4.0,
crossAxisSpacing: 4.0,
)
staggeredTileBuilderitemBuilder您可以使用 StaggeredGridView
StaggeredGridView.countBuilder(
crossAxisCount: 2,
mainAxisSpacing: 4.0,
crossAxisSpacing: 4.0,
itemCount: totalCount,
itemBuilder: (BuildContext context, int index) {
return Center(
child: Container(
width: w,
height: w,
color: Colors.redAccent,
),
);
},
staggeredTileBuilder: (int index) =>
new StaggeredTile.count(index == totalCount-1 ? 2 : 1, 1),
)
ListView.builder(
itemCount: (imagePaths.length / 3).ceil() +
(imagePaths.length % 3 == 0
? 0
: 1),
itemBuilder: (BuildContext context, int index) {
final int itemCountInRow = (index ==
(imagePaths.length / 3).ceil() -
1 &&
imagePaths.length % 3 != 0)
? imagePaths.length % 3
: 3;
return Padding(
padding: const EdgeInsets.all(8.0),
child: Row(
mainAxisAlignment: MainAxisAlignment
.center, // Center the last row
children: List.generate(itemCountInRow,
(int subIndex) {
final int actualIndex =
index * 3 + subIndex;
if (actualIndex >= imagePaths.length)
return Container(); // Handle out-of-bounds access
Map<String, dynamic> imageData =
imagePaths[actualIndex];
return card("Your widget"),
}),
),
);
},
),