我想创建一个小部件,它需要一个小部件列表(在这种情况下总是按钮),并根据孩子的宽度自动将它们排列在一种网格中。当一行中有2个按钮时,每个按钮应该有50%的宽度。所以它应该是这样的:
的数据
首先,我尝试了这个代码:
Widget getOrderedButtonList(
List<Widget> buttonList,
) {
final List<Widget> orderedButtonList = [];
for (int index = 0; index < buttonList.length; index = index + 2) {
orderedButtonList.add(
Row(
children: [
Expanded(child: buttonList[index]),
if (index + 1 < buttonList.length) HmipSpacer.horizontal(),
if (index + 1 < buttonList.length) Expanded(child: buttonList[index + 1]),
],
),
);
}
return Column(
children: orderedButtonList,
);
}
字符串
这对于文本较小的按钮很好用,但是当文本较长时,我有问题,文本无法像这样适合按钮:
的
我不想在多行中显示文本(这是最简单的解决方案)。所以我需要一个解决方案,如果文本不太合适,将按钮放置在新的一行中。我尝试了flex_list库,它可以根据宽度排列小部件列表,它看起来像这样:
这几乎是我想要的。一排的3个按钮也不错。但是,按钮现在都有不同的宽度。我希望按钮总是具有相同的宽度,一旦不再适合,它们就被包裹起来。
在这个例子中,它应该看起来像这样:
有人知道怎么做吗?
2条答案
按热度按时间h22fl7wq1#
我发现这
hasTextOverflow()
方法How to check if Flutter Text widget was overflowed。
在这个实现中,我们检查小部件是否适合空间或是否溢出。我们还必须检查它是否使行中的前一个小部件溢出。如果没有,那么我们将项目添加到行中。如果是,那么我们创建一个新行。
这段代码需要一些重构,而且我还没有测试它是如何与填充。
字符串
此代码的输出如下所示:
n8ghc7c12#
@MaLa的答案可以通过一点重构来实现,但我已经找到了另一种解决方案。我稍微修改了flex_list库中的performlayout方法,以便行中的所有元素都具有相同的宽度。如果有人也需要这个,下面是代码:
字符串