2

Есть строка в ней два блока: картинка и колонка. В колонке несколько блоков: заголовок, текст и цена. Для картинки есть фиксированная ширина, благодаря чему картинка масштабируется и растягивает своей высотой строку. Как я могу опустить блок с ценой вниз, до нижнего края картинки ?

          Row(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: <Widget>[
              Container(
                margin: EdgeInsets.only(
                    right: 16
                ),
                child: ClipRRect(
                  borderRadius: BorderRadius.circular(16),
                  child: Image.asset(
                      'assets/photo.jpg',
                      width: 160
                  ),
                ),
              ),
              Expanded(
                child: Container(
                    child: Column(
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: <Widget>[
                        Container(
                            margin: EdgeInsets.only(bottom: 16),
                            child: Text(
                              "Wonderful haircut",
                              style: TextStyle(
                                  fontSize: 20
                              ),
                            )
                        ),
                        Container(
                          child: Text(
                            "An undercut is typecally a cut done with clippers in the back.",
                            style: TextStyle(
                                fontSize: 18
                            ),
                          ),
                        ),
                        Container(
                          margin: EdgeInsets.only(top: 30),
                          padding: EdgeInsets.symmetric(vertical: 6, horizontal: 16),
                          decoration: BoxDecoration(
                              color: Colors.red,
                              borderRadius: BorderRadius.circular(16)
                          ),
                          child: Text(
                              "\$50",
                              style: TextStyle(
                                  fontSize: 20,
                                  color: Colors.white
                              )
                          ),
                        )
                      ],
                    )
                ),
              )
            ],
          )

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

3 ответа 3

1

Можете попробовать в колонку в children: <Widget>[] перед виджетом цены всунуть виджет Spacer().

Spacer() - виджет-пробел, который занимает столько места, сколько осталось свободно в контейнере.

1
  • Не плохая идея, но не помогло(
    – Kirpich643
    20 апр 2019 в 20:41
1

В зависимости от Row или Column используйте:

mainAxisAlignment: MainAxisAlignment.end
или
crossAxisAlignment: CrossAxisAlignment.end

Подробнее тут!

1
  • Это не помогло, потому что не растягивается Column
    – Kirpich643
    20 апр 2019 в 20:40
1

Для начала, заверните ваш Row в IntrinsicHeight и задайте

crossAxisAlignment: CrossAxisAlignment.stretch 

А также добавьте Spacer. Ваш подкорректированный пример (цвет добавил для наглядности и заменил картинку):

Container(
    color: Colors.greenAccent,
    child: IntrinsicHeight(
      child: Row(
        crossAxisAlignment: CrossAxisAlignment.stretch,
        children: <Widget>[
          Expanded(
            child: Container(
              margin: EdgeInsets.only(right: 16),
              width: 160,
              height: 320,
              color: Colors.amber,
            ),
          ),
          Expanded(
            child: Container(
              color: Colors.amberAccent,
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: <Widget>[
                  Container(
                      margin: EdgeInsets.only(bottom: 16),
                      child: Text(
                        "Wonderful haircut",
                        style: TextStyle(fontSize: 20),
                      )),
                  Container(
                    child: Text(
                      "An undercut is typecally a cut done with clippers in the back.",
                      style: TextStyle(fontSize: 18),
                    ),
                  ),
                  Spacer(),
                  Container(
                    padding: EdgeInsets.symmetric(
                      vertical: 6,
                      horizontal: 16,
                    ),
                    decoration: BoxDecoration(
                      color: Colors.red,
                      borderRadius: BorderRadius.circular(16),
                    ),
                    child: Text(
                      "\$50",
                      style: TextStyle(
                        fontSize: 20,
                        color: Colors.white,
                      ),
                    ),
                  )
                ],
              ),
            ),
          )
        ],
      ),
    ),
  ),

Результат:

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

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.