Как развернуть виджет контейнера 'по вертикали' в виджете строки - PullRequest
Новая
       17

Как развернуть виджет контейнера 'по вертикали' в виджете строки

1 голос
/ 02 августа 2020

Я хочу, чтобы Контейнер соответствовал высоте Карты .

Я пробовал много виджетов, но не смог выполнить свой заказ,

Я попытался использовать Flexible в качестве родительского элемента для контейнера, но безуспешно.

У меня есть этот код: 

                    Card(
                        color: Color(0xff8c6ac9),
                        shape: RoundedRectangleBorder(
                            borderRadius: BorderRadius.circular(10)),
                        child: Row(
                          children: <Widget>[
                            Expanded(
                              child: Column(
                                children: <Widget>[
                                  Padding(
                                    padding: const EdgeInsets.all(8.0),
                                    child: Text('Text2'),
                                  ),
                                  Padding(
                                    padding: const EdgeInsets.all(8.0),
                                    child: Text('Text3'),
                                  ),
                                  Padding(
                                    padding: const EdgeInsets.all(8.0),
                                    child: Text('Text4'),
                                  ),
                                  Padding(
                                    padding: const EdgeInsets.all(8.0),
                                    child: Text('Text5'),
                                  ),
                                  Padding(
                                    padding: const EdgeInsets.all(8.0),
                                    child: Text('Text6'),
                                  ),
                                ],
                              ),
                            ),
                            Container(
                              decoration: BoxDecoration(
                                  color: Color(0xff9778ce),
                                  borderRadius: BorderRadius.only(
                                      bottomRight: Radius.circular(10),
                                      topRight: Radius.circular(10))),
                              child: Column(
                                children: <Widget>[
                                  Icon(
                                    Icons.delete,
                                    color: Colors.white,
                                  ),
                                  Icon(
                                    Icons.edit,
                                    color: Colors.white,
                                  ),
                                ],
                                mainAxisAlignment:
                                    MainAxisAlignment.spaceAround,
                              ),
                              width: 40,
                            ),
                          ],
                        ),
                      )

Результат этого кода:

enter image description here

And what I want is:

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

Изменить: Виджет карты - это элемент в ListView виджете.

Спасибо ...

Ответы [ 2 ]

2 голосов
/ 02 августа 2020

Почти готово ... оберните строку с помощью IntrinsicHeight виджета 

Card(
  color: Color(0xff8c6ac9),
  shape: RoundedRectangleBorder(
      borderRadius: BorderRadius.circular(10)),
  child: IntrinsicHeight(
    child: Row(
      crossAxisAlignment: CrossAxisAlignment.stretch,
      children: <Widget>[
        Expanded(
          child: Column(
            children: <Widget>[
              Padding(
                padding: const EdgeInsets.all(8.0),
                child: Text('Text2'),
              ),
              Padding(
                padding: const EdgeInsets.all(8.0),
                child: Text('Text3'),
              ),
              Padding(
                padding: const EdgeInsets.all(8.0),
                child: Text('Text4'),
              ),
              Padding(
                padding: const EdgeInsets.all(8.0),
                child: Text('Text5'),
              ),
              Padding(
                padding: const EdgeInsets.all(8.0),
                child: Text('Text6'),
              ),
            ],
          ),
        ),
        Container(
          decoration: BoxDecoration(
              color: Color(0xff9778ce),
              borderRadius: BorderRadius.only(
                  bottomRight: Radius.circular(10),
                  topRight: Radius.circular(10))),
          child: Column(
            children: <Widget>[
              Icon(
                Icons.delete,
                color: Colors.white,
              ),
              Icon(
                Icons.edit,
                color: Colors.white,
              ),
            ],
            mainAxisAlignment:
            MainAxisAlignment.spaceAround,
          ),
          width: 40,
        ),
      ],
    ),
  ),
),
1 голос
/ 02 августа 2020

Вы можете использовать виджет IntrinsicHeight, поскольку ваш Card не имеет предопределенной высоты.

Виджет, размер дочернего элемента которого соответствует внутренней c высоте дочернего элемента. Этот класс полезен, например, когда доступна неограниченная высота, и вы хотите, чтобы дочерний элемент, который в противном случае попытался бы бесконечно расширяться, чтобы вместо этого увеличивать себя до более разумной высоты.

Примечание. Этот класс относительно дорогой, потому что он добавляет этап спекулятивного макета перед финальной фазой макета. По возможности избегайте его использования. В худшем случае этот виджет может привести к макету с размером O (N²) по глубине дерева. 

ListView.builder(
        itemBuilder: (context, index) {
          // wrapped the card widget with an intrinsic height
          return IntrinsicHeight(
            child: Card(
              color: Color(0xff8c6ac9),
              shape: RoundedRectangleBorder(
                  borderRadius: BorderRadius.circular(10)),
              child: Row(
                children: <Widget>[
                  Expanded(
                    child: Column(
                      children: <Widget>[
                        Padding(
                          padding: const EdgeInsets.all(8.0),
                          child: Text('Text2'),
                        ),
                        Padding(
                          padding: const EdgeInsets.all(8.0),
                          child: Text('Text3'),
                        ),
                        Padding(
                          padding: const EdgeInsets.all(8.0),
                          child: Text('Text4'),
                        ),
                        Padding(
                          padding: const EdgeInsets.all(8.0),
                          child: Text('Text5'),
                        ),
                        Padding(
                          padding: const EdgeInsets.all(8.0),
                          child: Text('Text6'),
                        ),
                      ],
                    ),
                  ),
                  Container(
                    decoration: BoxDecoration(
                        color: Color(0xff9778ce),
                        borderRadius: BorderRadius.only(
                            bottomRight: Radius.circular(10),
                            topRight: Radius.circular(10))),
                    child: Column(
                      mainAxisSize: MainAxisSize.max,
                      children: <Widget>[
                        Icon(
                          Icons.delete,
                          color: Colors.white,
                        ),
                        Icon(
                          Icons.edit,
                          color: Colors.white,
                        ),
                      ],
                      mainAxisAlignment: MainAxisAlignment.spaceAround,
                    ),
                    width: 40,
                  ),
                ],
              ),
            ),
          );
        },
      ),

ВЫХОД:

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

...