我正在我的 Flutter 应用程序中测试芯片。 我已经在 Row 中添加了这些筹码。
但是当没有。筹码增加,应用显示黄条提示
Right Overflowed by 200 pixels
我只想显示适合第一排的那些筹码,所有剩余的筹码都应该显示在它的下方。
我的片段:
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')
)
],
),
),
);
}
}
最佳答案
如果通过
All remaining chips should get displayed below to it
您的意思是当行上没有剩余空间时芯片应该换行,那么您应该使用 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')
)
],
)
https://stackoverflow.com/questions/49473443/