抖动：向右溢出200像素

问题描述

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

I'm testing Chips inside my Flutter App. I've added those chips inside Row.

但是没有。的筹码增加，应用显示黄色条形文字

But when no. of Chips increases, app shows yellow bar saying

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

I want to show only those chips which fits in 1st Row, All remaining chips should get displayed below to it.

我的代码段：

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

推荐答案

如果by

您的意思是，当行上没有剩余空间时，筹码应该换行，然后应该使用 Wrap 小部件（），而不是行。它会自动在多个水平或垂直行中显示其子级：

you mean that the Chips should wrap when there's no space left on the row then you should use the Wrap widget (Documentation) instead of Row. It automatically displays its children in multiple horizontal or vertical runs:

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

这篇关于抖动：向右溢出200像素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！