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

Question

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

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

但是我无法使用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中使用flexible。它使宽度或高度动态变化。此处提供了灵活的文档： https://api.flutter.dev/flutter/widgets/Flexible-class.html

您需要设计布局。当我看着你的图像时，

• 首次使用列进行向下设计或使用ListView / GridView
• 灵活使用第二行
• 第三将您的商品放在灵活的小部件中

Flexible将使您的布局如您所愿。您可以通过一周的flutter小部件搜索灵活使用或观看灵活广告。