在颤动中将小部件自动包装到新行

【问题标题】：Autowrap widgets to new line in flutter在颤动中将小部件自动包装到新行
【发布时间】：2018-12-31 14:47:46
【问题描述】：

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

我正在寻找一个布局助手类，它将小部件限制在水平空间，并将小部件自动包装到新行。首先，我正在寻找一个网格视图，但更喜欢一个独立的视图，因为所有元素都有不同的宽度。多行文本字段实际上已经这样做了，我只需要使用我的小部件相同的方法。有什么想法吗？

<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'))
]

【问题讨论】：

标签： layout dart flutter

【解决方案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'))
      ],
    );

您还可以将属性runSpacing 和spacing 添加到您的Wrap 小部件中，以便在您的项目之间在水平和垂直方向上留出更多空间。

Wrap(
            runSpacing: 5.0,
            spacing: 5.0,

【讨论】：

文字呢？？
哇。 Flutter 确实为所有内容提供了一个小部件。谢谢，这正是我想要的！如果按钮超出父级的宽度，它会将按钮很好地包裹到第二行。
对于我的用例 RichText 和 TextSpan 是解决方案。