在flutter中设置childAspectRatio的正确方法

Posted 2023-02-23

【中文标题】在flutter中设置childAspectRatio的正确方法

【英文标题】：Proper method for setting childAspectRatio in flutter

【发布时间】：2019-09-28 00:14:55

【问题描述】：

在颤动中计算 SliverGridDelegateWithFixedCrossAxisCount 的 childAspectRatio 的正确方法是什么。如何管理与所有设备兼容并应在横向和纵向中工作的每个视图的正确高度

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]));
    );

【问题讨论】：

范围很广。你能把问题说得更具体一点吗？

是否有计算childAspectRatio的公式？？

你能举个例子给你需要计算长宽比的孩子吗？

只考虑45eqks401uca3p9xje465puo-wpengine.netdna-ssl.com/wp-content/… 中项目的网格视图。如何跨设备管理它。

【参考方案1】：

^{免责声明：这是对 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 标准化单元格高度。

【讨论】：

这是如何通过 childAspectRatio 标准化单元格高度？？

@AshwinSAshok 我的意思是，根据childAspectRatio，所有单元格都将具有一种大小。如果您有动态大小的元素 - 您可能想要使用我提出的 Wrap 解决方案。

您已经提到“ Wrap ：我不建议使用它来显示大量数据。”有没有一种可能的方法来计算 childAspectRatio。