Блог

Главная - Вопросы по программированию - Не удается удалить вертикальные отступы или поля в виджете Wrap

Не удается удалить вертикальные отступы или поля в виджете Wrap

#dart #flutter

#dart #трепетание

Вопрос:

Это то, что я получаю на экране.

введите описание изображения здесь

Я хочу, чтобы красные плоские кнопки не имели вертикального интервала сверху, снизу или между ними. Единственным видимым желтым цветом должно быть горизонтальное пространство между ними.

Вот код, который генерирует этот виджет:

 Widget _buildSelectedFriendsRow() {
    var widgets = List<Widget>();
    selectedFriends.forEach((friend) {
        widgets.add(
            FlatButton(
                child: Wrap(
                    alignment: WrapAlignment.start,
                    crossAxisAlignment: WrapCrossAlignment.center,
                    children: <Widget>[
                        Text("${friend.firstName} ${friend.lastName}",
                        ),
                        Icon(
                            Icons.close
                        ),

                    ],
                ),
                color: Colors.red,
                padding: EdgeInsets.all(0.0),
                onPressed: () {
                    _unselectFriend(friend);
                },
            )
        );
    });

    Widget widget = Padding(
        padding: EdgeInsets.only(left: 10.0),
        child: Container(
            margin: EdgeInsets.all(0),
            padding: EdgeInsets.all(0),
            decoration: BoxDecoration(
                color: Colors.yellow,
                border: Border.all(color: Colors.black),
            ),
            child: Wrap(
                alignment: WrapAlignment.start,
                spacing: 10.0,
                runSpacing: 0.0,
                children: widgets,
            ),
        ),
    );

    return widget;
}

Спасибо.

Ответ №1:

Не используйте FlatButton , если вам это не нужно, попробуйте использовать InkWell и Container .

Измените это:

     FlatButton(
                    child: Wrap(
                        alignment: WrapAlignment.start,
                        crossAxisAlignment: WrapCrossAlignment.center,
                        children: <Widget>[
                            Text("${friend.firstName} ${friend.lastName}",
                            ),
                            Icon(
                                Icons.close
                            ),

                        ],
                    ),
                    color: Colors.red,
                    padding: EdgeInsets.all(0.0),
                    onPressed: () {
                        _unselectFriend(friend);
                    },
                )

К этому:

     Material(
    color: Colors.red,
     InkWell(
            child: Container(
              child: Wrap(
                        alignment: WrapAlignment.start,
                        crossAxisAlignment: WrapCrossAlignment.center,
                        children: <Widget>[
                            Text("${friend.firstName} ${friend.lastName}",
                            ),
                            Icon(
                                Icons.close
                            ),

                        ],
                    ),
            ),
            onTap: () {
                _unselectFriend(friend);
            },
          ),  
      ),

Комментарии:

1. На самом деле мне не нужны цвета. Я добавил цвета, чтобы видеть, где находятся края элементов на экране. Мне просто нужно что-то интерактивное внутри Wrap, и у этой интерактивной вещи должен быть текст и значок внутри. Я открыт для любой комбинации виджетов, которые могут это сделать.

2. затем удалите цвет из моего кода :), вы пробовали мой ответ? : D

3. Только что сделал. Это сработало. Немного изменил его и получил именно то, что я искал. Спасибо!!!!!