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

推荐答案

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

此外,您还可以将属性runSpacingspacing添加到Wrap小部件中,以在水平和垂直方向上的项目之间提供更多空间.

Wrap(
            runSpacing: 5.0,
            spacing: 5.0,

enter image description here

Flutter相关问答推荐

在Flutter中,有没有一种方法可以点击页面到后面的页面?

如何创建一个按钮来在Ffltter Webview中转到上一页?

ProviderContainer和GoRouter

Flutter 中的面向对象模式

将目标平台设置为Flutter 构建

如何在Ffltter Chrome应用程序中使用webview_fltter_web显示自定义html而不是外部uri?

在保持标高=1的情况下更改AppBar立面 colored颜色 /遮罩

如何将带有参数的函数传递给FIFTH中的自定义小部件

TextField 中的富文本并获取 RenderParagraph

没有固定宽度的小部件可以约束文本小部件吗?

如何在flutter中实现这样的底部导航栏?

Flutter 判断 Uint8List 是否有效 Image

Flutter canvas 绘制不同 colored颜色 的原始点

如何在 GridView.builder 中设置 textform 字段并在 flutter 中将 12 个 textformfield 作为单个字符串获取?

按下 Command+W 时关闭窗口

gridview 的所有按钮都应该在Flutter 中适合其父容器

主题:ThemeData() Flutter

Flutter 用户过滤器

如何将所有行项目平等地放在一行中?Flutter

在另一个页面编辑数据后更新 Flutter 页面的惯用方法?