[英]How to wrap row items in a card with flutter
我有一张卡片,其中包含一行项目(文本和复选框小部件)。 问题是卡片每行只能填满有限的空间,但它不会进入该行的下一行。 我尝试使用 wrap 小部件,但没有效果。 我不断得到这个:
如您所见,它并没有换行到下一行,而是试图将所有内容都放在那一行中。 这是我的代码:
Widget _buildCategories() {
return Card(
margin: const EdgeInsets.only(top: 20.0),
child: Padding(
padding: const EdgeInsets.all(20.0),
child: Column(
children: <Widget>[
Text(
'Categories',
style: TextStyle(fontFamily: 'MonteSerrat', fontSize: 16.0),
),
Wrap(
children: <Widget>[
Row(
children: <Widget>[
_checkBox('Gaming'),
_checkBox('Sports'),
_checkBox('Casual'),
_checkBox('21 +'),
_checkBox('Adult'),
_checkBox('Food'),
_checkBox('Club'),
_checkBox('Activities'),
_checkBox('Shopping'),
],
)
],
)
],
),
));
}
Widget _checkBox(String category) {
return Expanded(
child: Column(
children: <Widget>[
Text(
'$category',
textAlign: TextAlign.center,
style: TextStyle(fontFamily: 'MonteSerrat'),
),
Checkbox(
value: false,
onChanged: (value) {
// We will update the value to the firebase data here
print('updated value to: $value');
},
)
],
));
}
我通过以下更改修复了您的代码:
删除了Wrap
中的Row
小部件。
删除了Expanded
小部件。
将属性maxLines
添加到您的Text
小部件。
Widget _buildCategories() { return Card( margin: const EdgeInsets.only(top: 20.0), child: Padding( padding: const EdgeInsets.all(20.0), child: Column( children: <Widget>[ Text( 'Categories', style: TextStyle(fontFamily: 'MonteSerrat', fontSize: 16.0), ), Wrap( children: <Widget>[ _checkBox('Gaming'), _checkBox('Sports'), _checkBox('Casual'), _checkBox('21 +'), _checkBox('Adult'), _checkBox('Food'), _checkBox('Club'), _checkBox('Activities'), _checkBox('Shopping') ], ) ], ), )); } Widget _checkBox(String category) { return Column( children: <Widget>[ Text( '$category', maxLines: 1, textAlign: TextAlign.center, style: TextStyle(fontFamily: 'MonteSerrat'), ), Checkbox( value: false, onChanged: (value) { // We will update the value to the firebase data here print('updated value to: $value'); }, ) ], ); } }
您还可以将属性runSpacing
和spacing
添加到Wrap
小部件,以在水平和垂直方向上为项目之间提供更多空间。
Wrap(
runSpacing: 5.0,
spacing: 5.0,
更多信息在这里: https ://api.flutter.dev/flutter/widgets/Wrap-class.html
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.