我正在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') ) ], ), ), ); } }
如果通过
所有剩余的筹码应显示在其下方
您的意思是,当行上没有剩余空间时,芯片应包装,然后应使用Wrap小部件(Documentation)代替Row。它会自动在多个水平或垂直运行中显示其子级:
Wrap
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') ) ], )