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

Question

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

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

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

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

文本小部件应该具有固定的高度和动态宽度，如果该行需要跨越多行，则布局应该允许这种情况，就像示例布局中的红色文本一样。

你们建议在这个布局设计中使用什么小部件（或自定义包）？

非常感谢您的帮助

这是我当前的代码：

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

Answer 1

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

您需要设计您的布局。当我看到你的头像时

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

灵活将使您的布局如您所愿。您可以从本周的 flutter widget 中搜索灵活使用或观看灵活。