如何使用 CustomScrollView 功能布局子网格的动态宽度？

Posted 2023-02-23

【中文标题】如何使用 CustomScrollView 功能布局子网格的动态宽度？

【英文标题】：How can I layout a dynamic width of grid children with CustomScrollView capabilities?

【发布时间】：2020-04-18 06:23:15

【问题描述】：

如何使用 CustomScrollView 功能布局动态宽度的子网格？

网格的子项是 Text 类型，softWrap 属性设置为 false，因为我不希望将 Text 数据布局在多行上并更改 Text 小部件的高度。

但我无法使用 SliverGridDelegateWithMaxCrossAxisExtent 进行此设置，因此它的 CrossAxis 具有固定宽度。

这是我需要做的布局示例。

文本小部件应具有固定的高度和动态宽度，如果行需要跨越多行，则布局应允许这样做，如示例布局中的 RED TEXT。

你们推荐在这个布局设计中使用什么 Widget（或自定义包）？

非常感谢您的帮助

这是我当前的代码：

CustomScrollView(
                  slivers: <Widget>[
                    SliverGrid(
                      delegate: SliverChildListDelegate(
                        buildPage(myData), // => List<Text> Text  has (softWrap: false,)
                      ),
                      gridDelegate: SliverGridDelegateWithMaxCrossAxisExtent(
                        maxCrossAxisExtent: 60.0,
                        childAspectRatio: 1.5,
                        crossAxisSpacing: 5.0,
                        mainAxisSpacing: 5.0,
                      ),
                    ),
                  ],
                ),

【问题讨论】：

嗨@skyslar7，你找到解决方案了吗？

【参考方案1】：

我认为你需要在 Flutter 中使用灵活。它使宽度或高度动态化。这里有灵活的文档： https://api.flutter.dev/flutter/widgets/Flexible-class.html

您需要设计布局。当我看到你的照片时，

首先使用列进行上下设计或使用ListView/GridView 第二次使用灵活的行 第三次将您的项目放入灵活的小部件中

Flexible 将使您的布局如您所愿。您可以从每周的颤振小部件中搜索灵活使用或观看灵活。