一尘不染

抖动:向右溢出200像素

flutter

我正在Flutter应用程序中测试芯片。我已经在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')
            )
          ],
        ),
      ),
    );
  }
}

阅读 231

收藏
2020-08-13

共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')
    )
  ],
)
2020-08-13