按照最小尺寸包装小部件，然后将它们拉伸以填充可用宽度。

Question

Wrap不支持包含Expanded小部件，那么有没有其他方法可以使它的子项根据其最小所需宽度进行布局，但然后使用spaceBetween填充空间，只在指定的spacing方面进行拉伸？

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

而不是

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

- David Schneider

---

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

确切地说，拉伸应该在使用元素的最小宽度进行包装后发生。 - undefined

你要求Flutter做的事情非常反直觉，因为你要求父Widget的子项在父项计算出它们适合的大小后重新调整它们的大小，但这意味着父项将不得不根据它们的新大小重新计算子项的适合性。这可能会变成一个无限循环。 - undefined

话虽如此，使用“IntrinsicWidth”小部件可能有助于解决这个问题。 - undefined

LayoutBuilder 在这种方法上存在问题... 但我不明白为什么这会让人感到违反直觉？据我所知，布局分为两个阶段：遍历小部件树传递约束条件（这里应该使用最小所需宽度来分配行），然后返回树并执行实际布局 - WrapAlignment 无论如何都必须应用，那么为什么这里不会有像 MainAxisAlignment.stretch 这样的选项呢？ - undefined

Wrap 根据其子项的大小决定放置它们的位置。然后，子项将根据父项决定放置它们的行来调整大小并完全适应视口，然后再次调整大小。我还没有看到允许此操作的小部件组合。如果您找到了，请分享。 - undefined

Answer 1

如果有人仍然遇到问题无法实现上述结果，请查看此插件。同时，也要关注此flutter问题。

- Nicks

Answer 2

有一个叫做separated_row的包。它是为此而制作的。

你所要做的就是：

• 在separatorBuilder参数中提供一个分隔符小部件（例如padding）。

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

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

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

- Tayan

---

那似乎没有提供换行的功能。 - undefined