Выбор ответа Junior Вёрстка и constraints спрашивают часто обновлено
Flutter: жёлто-чёрная полоса в Row
Вопрос
Row с иконкой и длинным Text показывает «A RenderFlex overflowed by 120 pixels». Как исправить так, чтобы текст обрезался многоточием?
Попробуйте сами
Выберите вариант, и откроется разбор.
Показать ответ и разбор
Коротко
Правильный ответ: Обернуть Text в Expanded и задать ему overflow: TextOverflow.ellipsis. В Row дети без flex получают неограниченную ширину, и Text меряет себя по полной длине строки, ему не с чем сравнить.
Варианты ответа
- Задать
overflow: TextOverflow.ellipsisуText, обёртки для этого не нужны - Обернуть
RowвSingleChildScrollView: он решает любое переполнение и обрежет текст - Заменить
RowнаWrap: он перенесёт текст и сам добавит многоточие в конце - Обернуть
TextвExpandedи задать емуoverflow: TextOverflow.ellipsisправильный ответ
Разбор
В Row дети без flex получают неограниченную ширину, и Text меряет себя по полной длине строки, ему не с чем сравнить. Expanded даёт тексту конечную ширину остатка, и тогда ellipsis срабатывает. Без обёртки overflow не поможет. Прокрутка уберёт ошибку, но текст не обрежется, а Wrap перенесёт виджеты на новую строку без многоточия.
Ответьте сами, а не прочитайте
В тренажёре вопрос попадёт в повторения и вернётся, когда начнёт забываться. Плюс билеты с зачётом: 20 вопросов, не больше 2 ошибок.