Flutter：右溢出200像素

Question

我正在我的 Flutter 应用程序中测试 Chips。我已经在 Row 中添加了这些筹码。

但当没有。筹码数量增加，应用程序显示黄色条显示

Right Overflowed by 200 pixels

我只想显示适合第一行的那些筹码，所有剩余的筹码都应该显示在它下面。

我的片段：

class ChipsTesting extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      body: new Padding(
        padding: new EdgeInsets.all(30.0),
        child: new Row(
          children: <Widget>[
            new Chip(
                label: new Text('Chips11')
            ),new Chip(
                label: new Text('Chips12')
            ),new Chip(
                label: new Text('Chips13')
            ),new Chip(
                label: new Text('Chips14')
            ),new Chip(
                label: new Text('Chips15')
            ),new Chip(
                label: new Text('Chips16')
            )
          ],
        ),
      ),
    );
  }
}

Answer 1

如果通过

All remaining chips should get displayed below to it

你的意思是当行中没有 space 时，筹码应该换行，那么你应该使用 Wrap 小部件 (Documentation) 而不是 Row。它会自动在多个水平或垂直运行中显示其子项：

new Wrap(
  spacing: 8.0, // gap between adjacent chips
  runSpacing: 4.0, // gap between lines
  direction: Axis.horizontal, // main axis (rows or columns)
  children: <Widget>[
    new Chip(
      label: new Text('Chips11')
    ),new Chip(
      label: new Text('Chips12')
    ),new Chip(
      label: new Text('Chips13')
    ),new Chip(
      label: new Text('Chips14')
    ),new Chip(
      label: new Text('Chips15')
    ),new Chip(
      label: new Text('Chips16')
    )
  ],
)

Answer 2

您应该将 chips 放入 ListView 并将此行添加到 scroll horizontally

direction : Axis.horizontal, this error where the widget you created have more size than it' should

示例：您不能将小部件放在行上，这需要 400 像素 而你的容器得到了

width :200 =>那会给你一个例外说 =>右溢出 200 像素

class ChipsTesting extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      body: new Padding(
        padding: new EdgeInsets.all(30.0),
        child: new ListView(
         direction: Axis.horizontal,
          children: <Widget>[
            new Chip(
                label: new Text('Chips11')
            ),new Chip(
                label: new Text('Chips12')
            ),new Chip(
                label: new Text('Chips13')
            ),new Chip(
                label: new Text('Chips14')
            ),new Chip(
                label: new Text('Chips15')
            ),new Chip(
                label: new Text('Chips16')
            )
          ],
        ),
      ),
    );
  }
}

Answer 3

另一种解决方案是包装由 Flexible 小部件溢出的小部件，例如：

Flexible(child: Text())

Flutter：右溢出200像素

Flutter: Right overflowed by 200 pixels

dart

flutter