Comments 10
Не стесняйтесь писать в комментариях, как можно сделать лучше и проще.
Через кастомный RenderObject.
Это точно будет проще?
Это точно правильнее, потому что не будет всяких лишних addPostFrameCallback, setState и Row. Да и сложного там, в общем-то, ничего нет: https://dartpad.dev/?id=6ac06fb364d4b3a11e1de920a5a38a87
Это без преувеличения очень крутое решение! Отдельное спасибо за рабочий пример.
В своё оправдание скажу лишь, что с кастомными RenderObject и CustomPaint я познакомился уже после встречи с этим тестовым заданием, поэтому использовал тогда что мог — инструментарий из стандартных виджетов, что в целом для интервьюера было ожидаемо, чуть ниже написал об этом подробнее.
Как-то вы довольно сложно навертели. Разве нельзя сделать как-то так:
Row(
children: [
Expanded(
child: LayoutBuilder(
builder: (context, constraints) {
return Row(
children: [
ConstrainedBox(
constraints: BoxConstraints(maxWidth: constraints.maxWidth),
child: _text(),
),
Flexible(child: _dots()),
],
);
},
),
),
_checkbox(),
],
);Не проверял, но по идее должно работать.
Вызывать WidgetsBinding.instance.addPostFrameCallback из build метода это костыль. По-хорошему build метод должен быть чистой функцией. Отрисовывать dash линию стоило через CustomPaint, либо воспользоваться готовым пакетом. Так же могут быть проблемы с отрисовкой текста. Такие, как потенциальный рассинхрон параметров стилей. А так же двойной пересчет размеров текста, что как-бы не быстрая операция.
Если же вдруг действительно нужно сделать быстрое, чистое и правильное продакшен решение, то, скорее всего, лучшим вариантом будет реализация своего layout-а. В таком случае будет минимум виджетов и разного рода костылей.
Всё верно, ваше решение действительно работает. Получилось поразительно просто!
Правильно ли будет сказать следующее:
− чтобы текст начал обрезаться с многоточием, элементу текста надо дать возможность занимать меньше отведённого под полный текст места без ошибки RenderFlex overflowing , то есть применить констрейнт
− в статье я добивался этого оборачиванием текста в Expanded и решением кучи попутно возникающих проблем, а в вашем случае наложение нужных констрейнтов достигается прямым использованием ConstrainedBox без побочных эффектов
Или какой последовательностью соображений вы руководствовались при решении этой задачи?
− чтобы текст начал обрезаться с многоточием, элементу текста надо дать возможность занимать меньше отведённого под полный текст места без ошибки
RenderFlex overflowing, то есть применить констрейнт
Чтобы текст начал обрезаться нужно тексту задать ограничение по ширине (это легко проверить, засунув текст в SizedBox). Так же нужно понимать как работает лейаут у Row/ Column. Оверфлоу возникает не у текста, а у row. Row спускает unbound (от нуля до бесконечности) ограничения своим детям. Т.е. говорит тексту будь любых размеров, вне зависимости от ограничений row (от ширины row). И если по итогу ширина текста превышает ограничения row, то и происходит оверфлоу. Таким образом текст не обрезается из-за того, что от row пришли unbound ограничения. Вот и все. Крайне полезно разобраться с тем как работают лейаут и ограничения во флаттер (можно сделать по вот этой статье и своим экспериментам или чтением исходников). И тогда жизнь станет значительно проще)) Соответственно, если знаешь как эта система работает, то сделать так, чтобы она работала как тебе нужно обычно не сложно...
По поводу костылей и прочих неоптимальностей вы совершенно правы. Небольшой нюанс заключается в том, что в контексте тестового задания перед собеседованием тут вполне допускается (а может даже поощряется) кандидату пуститься в велосипедостроение, чтобы посмотреть ход мышления человека в подобных случаях, с дальнейшим обсуждением проблем и недостатков выбранных подходов, разумеется.
Ни в коем случае не пытаюсь выгородить своё решение и не умаляю крутости предложенных вариантов — просто у интервьюера такой стиль проведения собеседования, и тестовое задания подобрано соответствующее: новички нагородят костылей (и это можно будет обсудить — материал для оценки), а люди с опытом выкатят красивое изящное решение, сразу заявив уровень middle или выше.
Это всё со слов интервьюера, конечно же.
Подобрать хорошую задачу для тестового задания очевидно непросто. И так же очевидно, что эта задача явно не самый худший вариант для тестового (плюс в том, что не очень объемная задача и судя по всему из реальной жизни). С другой стороны я не уверен, что джун сам сможет справиться с ней (хотя может я и не прав). Ну а сеньору наверное вообще не стоит давать тестовое... (имхо).
Даже не смотря на код, очень крутая подача материала!
Я даже не знаю как решил бы подобное. Скорее всего это были бы костыли, какая то работа с Row, может быть попытка замечать конец текста.
В общем решения предложенные тут явно круто выглядят. Комментарии тоже интересно почитать. Спасибо!
Хитрый виджет: разбор тестового Flutter-задания. Детективная нуар-история