在抖动中计算 SliverGridDelegateWithFixedCrossAxisCount 的 childAspectRatio 的正确方法是什么。如何管理与所有设备兼容并应横向和纵向工作的每个 View 的正确高度
GridView.builder(
physics: BouncingScrollPhysics(),
padding: const EdgeInsets.all(4.0),
itemCount: snapshot.data.results.length,
gridDelegate: new SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: itemCount,
childAspectRatio: 0.501,
mainAxisSpacing: 4.0,
crossAxisSpacing: 4.0,
),
itemBuilder: (BuildContext context, int index) {
return GridTile(
child: _buildGridItem(context, snapshot.data.results[index]));
});
最佳答案
免责声明:这是GridView工作原理的理论解释。建议的解决方案不是为大量内容而设计的。使用我在这里描述的GridView理论来构建所需的布局。
让我从crossAxisCount
开始,应该将其解释为表中的许多列。
例如crossAxisCount: 3,
| cell-1 || cell-2 || cell-3 |
------------------------------------ // new row after every 3 cells
| cell-4 || cell-5 || cell-6 |
flutter对
crossAxisCount: N,
的作用是试图完全适合一行中N
的单元格数量。因此,一个独立单元格的宽度等于栅格宽度除以N
。例如
crossAxisCount: 3,
-> cellWidth = parentWidth / 3
(伪代码)现在,接下来发生的是使用您最初提出的问题有关的
childAspectRatio
计算单元的高度。例如
cellWidth = parentWidth / crossAxisCount
和cellHeight = cellWidth / childAspectRatio
。这样,您应该将
childAspectRatio
解释为每个单元格的宽度与高度的比率(反之亦然)。我假设您已经注意到
GridView
在涉及异常结构化布局时相当有限。如果您真的认为
GridView
不足以满足您要构建的内容-我建议您使用支持多个子布局的其他小部件。例如,我使用 Wrap
小部件来显示非常流畅的内容,其中每个元素都有自己的动态宽度和高度。我不知道您需要哪种布局,但是在动态/流畅但轻巧的概念的情况下,您可以尝试使用
Wrap
:@override
Widget build(BuildContext context) {
final mediaQuery = MediaQuery.of(context);
return SingleChildScrollView(
child: Wrap(
children: List.generate(totalItemsToDisplay, (index) {
final cellWidth = mediaQuery.size.width / 3; // Every cell's `width` will be set to 1/3 of the screen width.
return SizedBox(
width: cellWidth,
// You can either use some static number for `height`, or set ratio to cellWidth.
// Setting `height` to `null` should work too, which would make height of a cell auto-resizable according to its content.
height: 123,
child: ...,
);
})
)
);
}
但是,我不建议您使用它来显示大量数据。
如果您的目标是显示一组帖子/文章/图片等,这最初意味着结构化的大量内容-我建议通过
GridView
标准化单元格高度来使用 childAspectRatio
。