Блог

Главная - Вопросы по программированию - Выровняйте изображение рядом с текстом в flutter по базовой линии в Flutter

Выровняйте изображение рядом с текстом в flutter по базовой линии в Flutter

#flutter #dart #baseline

Вопрос:

У меня возникли проблемы с размещением логотипа рядом с некоторым текстом и правильным выравниванием его по вертикали. Размеры PNG логотипа png составляют около 750×256. Я хочу, чтобы он был того же размера, что и заглавная буква в тексте рядом с ним. Поэтому я установил размер шрифта на 28, а высоту изображения на 20. Я бы предположил, что, поместив его в ряд с базовой линией выравнивания по поперечной оси, изображение должно быть помещено в базовую линию, но оно помещено сверху.

Вот мой код:

 static Widget _buildLogo() {
  return Row(
    mainAxisAlignment: MainAxisAlignment.center,
    crossAxisAlignment: CrossAxisAlignment.baseline,
    textBaseline: TextBaseline.alphabetic,
    children: [
      SizedBox(width: 15.0),
      Image.asset("assets/images/header-logo-red_256_solid.png", height: 20),
      SizedBox(width: 10.0),
      Text('Text',
        style: TextStyle(
          fontSize: 28.0,
          backgroundColor: Colors.green
        )
      ),
    ]
  );
}

и вот как это выглядит:

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

Я бы хотел, чтобы это было так (я добавил строку для обозначения алфавитной базовой линии):

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

РЕДАКТИРОВАТЬ: Краткое объяснение: Я хочу добиться поведения HTML по умолчанию, которое вы получите в следующем фрагменте кода?

 <html>
<body>
<img src="logo.png" /><font size=200>laBlaBla</font>
</body>
</html>

HTML-Выравнивание базовой линии

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

1. Я не уверен, что вы можете сделать это с изображением в детстве. Согласно документам : Children who report no baseline will be top-aligned. . И ваше изображение, похоже, не сообщает.

2. Вы можете использовать CrossAxisAlignment.center .

Ответ №1:

Наконец — то я нашел решение.

С помощью строки это невозможно без изменения поля визуализации, но это возможно с помощью RichText. Секрет в том, чтобы использовать правильную базовую линию/выравнивание.

Базовый уровень RichText

     RichText(
      text: TextSpan(
        children: [
          WidgetSpan(child: Image.asset("assets/images/logo.png"), baseline: TextBaseline.alphabetic, alignment: PlaceholderAlignment.baseline),
          TextSpan(text: "laBlaBla", style: TextStyle(fontSize: 48),)
        ]
      )
    ),

ПРАВКА: Немного осторожности, однако, это решение также не всегда работает так, как ожидалось.

Метки: