Flutter Widget 之 Wrap

小图标很适合Row和Column的布局，但是有时候你可能没有足够的空间

Wrap是一个有助于改善此问题的Widget

Wrap(
    children: [
        MyWidget(),
        MyWidget(),
        MyWidget(),
        MyWidget(),
        MyWidget(),
    ]
)

Warp为单个图标逐一进行布局，和Row或Column很像。当空间不足的时候，便会新增一行

你可以使用direction属性，让Wrap以垂直或者水平的方式展示

Wrap(
    direction: Axis.vertical,
    children: [
        MyWidget(),
        MyWidget(),
        MyWidget(),
        MyWidget(),
        MyWidget(),
    ]
)

此外，还可以使用alignment属性和spacing属性

Wrap(
    direction: Axis.vertical,
    alignmeng: WrapAlignment.end,
    spacing: 10.0,
    runSpacing: 20.0,
    children: [
        MyWidget(),
        MyWidget(),
        MyWidget(),
        MyWidget(),
        MyWidget(),
    ]
)

Wrap很适合那些对话框图标的布局和chips

如果想了解有关Wrap的内容，或者关于Flutter的其他功能，请访问flutter.io

原文翻译自视频：视频地址