dart - 如何用 flutter 将行项目包装在卡片中

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