如何用顫動將行項目包裝在卡片中

Question

我有一張卡片，其中包含一行項目（文本和復選框小部件）。 問題是卡片每行只能填滿有限的空間，但它不會進入該行的下一行。 我嘗試使用 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');
      },
    )
  ],
));
 }

Answer 1

我通過以下更改修復了您的代碼：

• 刪除了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