Разделите дочернее представление, чтобы оно не превышало родительское представление - PullRequest
Новая
       9

Разделите дочернее представление, чтобы оно не превышало родительское представление

0 голосов
/ 07 декабря 2018

Мне нужно повернуть текст внутри карты.То, что я хотел бы получить это: Desired result

Но я не знаю, как я могу сделать это с флаттером.Проблема, с которой я сталкиваюсь, состоит в том, что текстовое представление превышает карту.enter image description here

Вот что у меня есть до сих пор: 

Widget cardDetails(String title, String imgPath) {
return Material(
  elevation: 8.0,
  borderRadius: BorderRadius.circular(15.0),
  child: Container(
    height: 135.0,
    width: 135.0,
    decoration: BoxDecoration(
        borderRadius: BorderRadius.circular(8.0), color: Colors.white),
    child: Stack(
      alignment: Alignment.topLeft,
      children: <Widget>[
        Transform.rotate(
          angle: -pi / 4,
          child: Container(
            height: 15.0,
            width: 55.0,
            alignment: Alignment.topCenter,
            color: const Color(0xFFFFd77B),
            child: Text(
              title,
              textAlign: TextAlign.center,
              style: TextStyle(
                color: Colors.white,
                fontSize: 12.0,
              ),
            ),
          ),
        ),

      ],
    ),
  ),
);
}

И вот как это выглядит: enter image description here

Заранее спасибо

1 Ответ

0 голосов
/ 07 декабря 2018

Самый простой способ сделать баннер - это использовать Виджет баннера .Тем не менее, он по-прежнему рисует за пределами элемента, который вы используете, и, к сожалению, не настолько настраиваемый, как это могло бы быть (и не обрабатывает такие вещи, как более длинный текст).

Чтобы исправить картину снаружиграницы, все, что вам нужно сделать, это добавить ClipRect прямо под виджетом вашей карты, и это должно исправить переполнение с помощью виджета Banner или того, что вы делаете с повернутым блоком.

В зависимости от того, как настраиваетсяБаннер должен быть таким, чтобы вы могли заново реализовать виджет Banner - с помощью TextPainter вы можете определить длину текста и автоматически изменить его размер, если это необходимо (и удалить тень)..)

...