Question

我在Flutter App中测试芯片。我在Row里面添加了这些芯片。

但是当没有。芯片增加，应用程序显示黄色栏说

右侧溢出200像素

我想只展示那些适合第一排的筹码，所有剩下的筹码都会显示在下面。

我的片段：

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

如果通过

所有剩余筹码应显示在下方

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

我认为您应该将代码包装在SingleChildScrollView中：-For more information

 class ChipsTesting extends StatelessWidget {
  @override
 Widget build(BuildContext context) {
    return new Scaffold(
      body: new Padding(
      padding: new EdgeInsets.all(30.0),
      child: new SingleChildScrollView(
         child: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 3

您应该将芯片放在 ListView 内，并将此行添加到水平滚动

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

示例：您不能将窗口小部件放置在行上，而容器需要一个 400 px

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

颤动：右边溢出200像素

3 个答案: