根据最小尺寸包装小部件，然后拉伸它们以填充可用宽度

Posted 2023-02-23

【中文标题】根据最小尺寸包装小部件，然后拉伸它们以填充可用宽度

【英文标题】：Wrap widgets according to minimum size and then stretch them to fill available width

【发布时间】：2020-04-20 02:46:53

【问题描述】：

Wrap 不能包含 Expanded 小部件，因此是否有另一种方法可以根据其最小所需宽度布置其子级，然后使用 spaceBetween 填充空间以仅相对于指定的拉伸spacing?

|---item---| |--item--|
|--------item---------|

而不是

|-item-|       |-item-|
|-item-|            

【问题讨论】：

但是如果项目太大，您仍然希望它们转移到下一行吗？

完全正确。拉伸应该发生在之后使用元素的最小宽度发生包装。

您要求 Flutter 执行的操作非常违反直觉，因为您要求父 Widget 的子组件在父组件计算出适合子组件的方式后重新调整其大小，但这意味着然后父母将不得不根据他们的新尺寸重新计算孩子们的适合度。它可能会变成一个无限循环。

话虽如此，IntrinsicWidth 小部件可能有助于解决这个问题。

LayoutBuilder 这种方法有问题...我不明白为什么这会违反直觉？据我了解，布局分两个阶段进行：遍历传递约束的小部件树（它应该使用此处的项目所需的最小宽度来分配行），然后返回树并进行实际布局 - WrapAlignment 有无论如何都会在某个时候应用，那么为什么这里没有像MainAxisAlignment.stretch 这样的选项呢？

【参考方案1】：

有一个名为separated_row 的包。就是为此而生的。

你所要做的就是：

在其separatorBuilder 参数中提供一个分隔小部件（例如填充）。

将每个子项包装在 Expanded 小部件中。

SeparatedRow(
  separatorBuilder: (context, index) => Divider(),
  children: <Widget>[
    Expanded(
      child: Text("Item 1"),
    ),
    Expanded(
      child: Text("Item 2"),
    ),
  ],
)

您也可以将其includeOuterSeparators参数设置为true，以在开头和结尾添加分隔符。

【讨论】：

这似乎没有提供包装的功能，虽然