В Flutter, как использовать FittedBox для изменения размера текста внутри строки? - PullRequest
Новая
       22

В Flutter, как использовать FittedBox для изменения размера текста внутри строки?

0 голосов
/ 26 февраля 2019

У меня есть строка со значком с каждой стороны, а затем текст со значком в середине: 

@override
Widget build(BuildContext context) {
  return Row(
    children: [
      Icon(Icons.arrow_back),
      Expanded(child: SizedBox()),
      Icon(Icons.account_box),
      Text("Some Text Here ", maxLines: 1), // ➜ This is the text.
      Expanded(child: SizedBox()),
      Icon(Icons.arrow_forward),
    ],
  );
}

Когда текст становится достаточно большим, чтобы заполнить все пространство, я хочуFittedBox сделать меньше.Поэтому я попробовал это: 

      ...
      FittedBox(child: Text("Some Text Here. More. More. More. More. More. More. More. More. ", maxLines: 1)), 
      ...

Не работает (переполняется).Я считаю, что проблема в том, что Row не говорит FittedBox о максимальном размере, который он может иметь.Я думал об использовании FittedBox с Expanded, IntrinsicWidth, UnconstrainedBox, Flexible и Align, но безрезультатно.

Как я могу решить эту проблему?

Ответы [ 2 ]

0 голосов
/ 26 февраля 2019

Для того, что я понимаю, вам нужно подогнать текст внутри строки в соответствии с длиной текста.

Рабочий код: 

Row(
       mainAxisAlignment: MainAxisAlignment.spaceBetween,
       children: [
         Icon(Icons.arrow_back),
         Expanded(
             child: Row(
               mainAxisAlignment: MainAxisAlignment.center,
               children: <Widget>[
                 Icon(Icons.account_box),
                 Flexible(
                   child: FittedBox(
                     fit: BoxFit.scaleDown,
                     child: Text(
                         "  Text HereSome Text Here Text HereSomext HereSome TText HereSome Text HereSome Text HereSome Text HereSome Text HereSome TText HereSome Text HereSome Text HereSome",
                         maxLines: 1),
                   ))])),
              Icon(Icons.arrow_forward),
            ]);

Вывод, длинный текст:

enter image description here

Вывод, краткий текст:

enter image description here

0 голосов
/ 26 февраля 2019

Вы хотите использовать FittedBox только для размещения текста в одной строке?В качестве альтернативы, если вам нужно поместить или обернуть текст в одну строку, вам нужно обернуть виджет Text inside Flexible, который в основном плотно прилегает к ребенку.

Я заново создал ваш случай и смог достичьниже:

enter image description here

Код выше: 

Row(
      children: [
        Icon(Icons.arrow_back),
        Expanded(child: SizedBox()),
        Icon(Icons.account_box),
        Flexible(
        child:
        Text("Some Text Here and here and here and here and more and more and more and more and more and more ", maxLines: 1)), // ➜ This is the text.
        Expanded(child: SizedBox()),
        Icon(Icons.arrow_forward),
      ],
      )

Так как вы установили maxLines равным 1, этособирается взять ваш исходный текст Some text here и будет отображать его правильно, без переполнения.Если вы добавите к нему больше текста, строка не будет расширена и предотвратит переполнение.

...