在Flutter中自动换行小部件

Question

我有5个尺寸不同的小部件，如果放在一起会溢出。

我正在寻找一个布局辅助类，将小部件限制在水平空间内，并自动换行到新行。一开始我在找格子视图(Grid view)，但是现在希望找到一种独立的视图，因为所有元素的宽度都不同。多行文本字段实际上已经做到了这一点，我只需要对我的小部件采取相同的方法。有什么好主意吗？

<Widget>[
    new RaisedButton(child: const Text('Foo')),
    new RaisedButton(child: const Text('Foo Bar')),
    new RaisedButton(child: const Text('Foo Bar Bas')),
    new RaisedButton(child: const Text('F')),
    new RaisedButton(child: const Text('B'))
]

- Daniel Stephens

Answer 1

Wrap小部件是您需要的：

return Wrap(
      children: <Widget>[
        new RaisedButton(child: const Text('Foo')),
        new RaisedButton(child: const Text('Foo Bar')),
        new RaisedButton(child: const Text('Foo Bar Bas')),
        new RaisedButton(child: const Text('F')),
        new RaisedButton(child: const Text('B'))
      ],
    );

你还可以在Wrap小部件中添加runSpacing和spacing属性，以在水平和垂直方向上为项目之间提供更多的空间。

Wrap(
            runSpacing: 5.0,
            spacing: 5.0,

- Romain Rastel

---

文本怎么样？ - Chirag Chopra

哇，Flutter确实有适用于所有情况的小部件。谢谢，这正是我要找的！如果按钮超出父级宽度，它会将它们漂亮地包装到第二行上。 - lenz

对于我的使用情况，RichText与TextSpan是最佳解决方案。 - Volker Andres

Answer 2

你可以使用Wrap小部件来实现，它会自动将子小部件移到下一行。

- Muhammad Talha Taj

---

您的回答可以通过增加进一步的支持信息来进行改善。请编辑以添加更多细节，比如引用或文档，以便他人能够确认您的答案是正确的。您可以在 帮助中心 中找到有关编写好答案的更多信息。 - Community