Использование пространства, оставленного братьями и сестрами в строке - MediaQuery.of (): context is null

Я пытаюсь устроить два text в row. Второй текст состоит всего из нескольких слов, но первый может быть очень длинным. Моя цель - показать второй текст полностью и заполнить оставшееся место первым. Если первый виджет слишком широкий, я хочу обрезать его многоточием.

Ожидаемый макет: ожидаемый макет

Мой код

class MyHomePage extends StatelessWidget {
  
  @override
  Widget build(BuildContext context) {
    GlobalKey key = GlobalKey();
    return Row(
      children: [
        Container(
            child: Text("Really really really long long long teeeeext",
                maxLines: 1,
                overflow: TextOverflow.ellipsis),
                width: MediaQuery.of(context).size.width - MediaQuery.of(key.currentContext).size.width),
        Text("short text", key: key)
      ],
    );

  }
}

Я полагаю, это не удается с The following assertion was thrown building MyHomePage(dirty, dependencies: [MediaQuery]): I/flutter (28083): 'package:flutter/src/widgets/media_query.dart': Failed assertion: line 810 pos 12: 'context != I/flutter (28083): null': is not true., потому что движок Flutter еще не начал рендеринг виджета с коротким текстом, поэтому его размер в настоящее время неизвестен.

Любая помощь будет оценена по достоинству.


flutter text layout row ellipsis
person Zoldszemesostoros    schedule 17.10.2020    source источник

Ответы (2)


arrow_upward
0
arrow_downward

MediaQuery.of(context).size недоступен на этапе сборки. При построении виджета размеры еще не рассчитываются.

Однако вам не нужно MediaQuery.of(context).size для реализации макета. Вместо этого вы можете просто обернуть левый текст Expanded. Затем он займет все оставшееся пространство (общая ширина минус ширина правого текста).

Row(
  children: [
    Expanded(
      child: Text(
        "Really really really long long long teeeeext 123 123 123 123 123 123 123 123",
        maxLines: 1,
        overflow: TextOverflow.ellipsis,
      ),
    ),
    Text(
      "short text",
    ),
  ],
)

Результат:

скриншот

person Pavel    schedule 17.10.2020

arrow_upward
1
arrow_downward

Что, если вы попытаетесь запустить второй текстовый виджет, например Text _secondText=Text("short text")? Итак, Flutter уже должен знать свое содержимое, когда вы используете свой первый виджет. Вы можете попробовать.

person Stefano Leone    schedule 17.10.2020
comment
К сожалению, я получил ту же ошибку (код: hastebin.com/vumerusicu.js). - person Zoldszemesostoros; 17.10.2020
comment
Итак, вы можете попробовать другое решение: использовать свойство textDirection: TextDirection.rtl виджета строки, которое инвертирует виджеты справа налево. Итак, в вашем коде сначала визуализируйте виджет короткого текста, а затем в качестве второго дочернего элемента вы можете визуализировать длинный текст. Как это: pastebin.com/VipWYv7D - person Stefano Leone; 17.10.2020
comment
То же сообщение об ошибке :( (И направление rtl приводит к тому, что второй виджет идет первым) - person Zoldszemesostoros; 17.10.2020
comment
Я придумал это решение. Просто оберните свой контейнер гибким виджетом, затем сохраните свойство Row rtl, чтобы второй текст отображался перед первым. И удалите свойства ширины и переполнения Контейнера. Вот что я использовал и работал для себя: hastebin.com/donuraqamo.js - person Stefano Leone; 17.10.2020