Как обернуть строки строк в карточку с флаттером - PullRequest
Новая
       21

Как обернуть строки строк в карточку с флаттером

0 голосов
/ 25 апреля 2019

У меня есть карта, которая содержит ряд элементов (виджеты с текстом и флажками).Проблема в том, что карта может заполнять только ограниченное пространство в каждой строке, но она не переходит к следующей строке в строке.Я пытался использовать виджет обтекания, но это не имело никакого эффекта.Я продолжаю получать это:

enter image description here

Как вы можете видеть, это не переход к следующему, а попытка вписать все в одну строку.Вот мой код: 

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

1 Ответ

1 голос
/ 25 апреля 2019

Я исправил ваш код со следующими изменениями:

  • Удален Row виджет внутри Wrap.
  • Удален 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://docs.flutter.io/flutter/widgets/Wrap-class.html

...