如何用颤动将行项目包装在卡片中 [英] How to wrap row items in a card with flutter

问题描述

我有一张卡片，其中包含一行项目（文本和复选框小部件）。问题是该卡只能在每行中填满有限的空间，但不会转到该行的下一行。我尝试使用wrap小部件，但没有效果。我一直得到这个：

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. 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');
      },
    )
  ],
));
 }

推荐答案

我使用进行以下更改：

• 在 Wrap <中删除了 Row 小部件。


• 已删除扩展小部件。



• 添加属性 maxLines 到 Text 小部件。

• Removed Row widget inside Wrap.
• Removed Expanded widget.

• Add the property maxLines to your Text widget.

     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 小部件可在水平和垂直项目之间留出更多空间。

Also you can add the properties runSpacing and spacing to your Wrap widget to give more space between your items in horizontal and vertical.

     Wrap(
            runSpacing: 5.0,
            spacing: 5.0,

此处更多信息： https://docs.flutter.io/flutter/widgets/Wrap-class.html

这篇关于如何用颤动将行项目包装在卡片中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！