[英]How to wrap row items in a card with flutter
I have a card that contains row of items (text and checkbox widgets).我有一张卡片,其中包含一行项目(文本和复选框小部件)。 The problem is that the card can only fill up limited space each row, but it isn't going to the next line in the row.
问题是卡片每行只能填满有限的空间,但它不会进入该行的下一行。 I tried using the wrap widget but it had no effect.
我尝试使用 wrap 小部件,但没有效果。 I keep getting this:
我不断得到这个:
As you can see it is not wrapping to the next but trying to fit everything in that one line.如您所见,它并没有换行到下一行,而是试图将所有内容都放在那一行中。 Here is my code:
这是我的代码:
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');
},
)
],
));
}
I fixed your code with the following changes:我通过以下更改修复了您的代码:
Removed Row
widget inside Wrap
.删除了
Wrap
中的Row
小部件。
Removed Expanded
widget.删除了
Expanded
小部件。
Add the property maxLines
to your Text
widget.将属性
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'); }, ) ], ); } }
Also you can add the properties runSpacing
and spacing
to your Wrap
widget to give more space between your items in horizontal and vertical.您还可以将属性
runSpacing
和spacing
添加到Wrap
小部件,以在水平和垂直方向上为项目之间提供更多空间。
Wrap(
runSpacing: 5.0,
spacing: 5.0,
More info here: https://api.flutter.dev/flutter/widgets/Wrap-class.html更多信息在这里: https ://api.flutter.dev/flutter/widgets/Wrap-class.html
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.