Flutter：右溢出 200 像素答案

【问题标题】：Flutter: Right overflowed by 200 pixelsFlutter：右溢出 200 像素
【发布时间】：2018-09-03 12:49:27
【问题描述】：

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

但是当没有。筹码增加，应用显示黄条提示

右溢出 200 像素

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

我的sn-p：

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

【问题讨论】：

标签： dart flutter

【解决方案1】：

如果通过

所有剩余的筹码都应该显示在它下面

您的意思是当行上没有剩余空间时芯片应该换行，那么您应该使用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')
    )
  ],
)

【讨论】：

如果其中一个芯片有长文本假设 5 行，该怎么办。如何管理。我想通过包装文本使每个单词都可见尝试更新 Text 中的 maxLine 属性，但它不起作用。

【解决方案2】：

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

Flexible(child: Text())

【讨论】：

【解决方案3】：

你应该把你的 chips 放在 ListView 中，并将这一行添加到水平滚动

direction : Axis.horizontal, 这个错误，您创建的小部件的大小超出了应有的大小

示例：您不能将小部件放在行上，而您的容器需要 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')
            )
          ],
        ),
      ),
    );
  }
}

【讨论】：

感谢您抽出宝贵时间留下答案。不过，它看起来有些荒凉。请更新您的答案，包括对您正在做的事情的描述/解释:)
你的回答没用，花点时间仔细阅读 topicstarter 到底想要什么
答案不适用于该问题。