#flutter #flutter-layout
Вопрос:
Я пытаюсь реализовать виджет breadcrumb в своем приложении Flutter, и я хотел бы добиться следующего поведения:
Допустим, выделенная красным область — это пространство, которое у меня есть для моей хлебной крошки, и что каждый элемент хлебной крошки имеет разную ширину. Макет должен быть отзывчивым, т. Е. Он должен отображать элементы до тех пор, пока для их отображения достаточно места, в противном случае удалите некоторые элементы и добавьте эту кнопку «…» посередине. При нажатии на эту кнопку отображается наложение, содержащее удаленные элементы.
Теперь я хочу знать, сколько места займет каждый элемент breadcrumb, прежде чем он будет размещен на экране. Только тогда я могу решить, достаточно ли места для его отображения в хлебной крошке или он должен быть частью кнопки «…».
Я попытался использовать CustomMultiChildLayout , который дает вам информацию о том, сколько места занимает виджет после его размещения. Он также должен размещать каждый дочерний элемент один раз, что делает его бесполезным в моем случае использования.
P.S: Подумайте о хлебной крошке, используемой в документации Apple. Это то же самое поведение, которого я хочу добиться.
Комментарии:
1. используйте
CustomPaint— это будет намного проще2. @pskink Извините, но как это
CustomPaintдолжно мне помочь? Не могли бы вы подробнее объяснить свою идею?3. Это полезно только в том случае, если я хочу отображать текстовые виджеты, но что, если я хочу использовать кнопки или значки для элементов breadcrumb?
4. итак, используйте
CustomMultiChildLayout— зачем вам нужноlayoutChild()дважды или более для одного дочернего элемента?5. Я этого не делаю, он должен размещать каждого дочернего элемента ровно один раз. В моем случае мне нужно размещать дочерние элементы, пока у меня не закончится место, а затем остановиться, что невозможно
CustomMultiChildLayout, потому что тогда некоторые дочерние элементы не будут размещены.
Ответ №1:
Короткий ответ, вы не можете.
Вы уже использовали CustomMultiChildLayout , это хорошо, это показывает мне, что вы должны иметь некоторое базовое представление о том, как работает конвейер рендеринга flutter. Тогда вам должно быть ясно из 3 шагов: родитель передает ограничения, дочерний элемент сообщает о своем размере, родитель решает, где разместить дочерний элемент. Короче говоря, опять же, вы не можете получить дочерний размер перед макетом.
Теперь переходите к тому, чего вы хотите достичь. Я согласен CustomMultiChildLayout , что вы не можете достичь того, чего хотите, но не по указанной вами причине. Основная проблема заключается CustomMultiChildLayout в том, что вам приходится размещать каждый дочерний элемент один раз, а затем размещать их. Вы должны расположить каждого дочернего элемента, вы не можете пропустить дочерний элемент, если он вам не нравится (слишком большой), и вы не можете создавать новые вещи, которые не являются вашими дочерними элементами. Если бы вы могли достичь этих 2 вещей, то получение дочернего размера после компоновки не будет проблемой.
Для достижения этих целей самый простой способ — использовать CustomPaint , если все, что вам нужно сделать, основано на тексте или просто на простых формах. Используется TextPainter для разметки текста, определения его размера, а затем решения о том, следует ли рисовать этот текст или рисовать «…» (пропустить дочерний элемент и создать свой собственный). Вы можете выполнить поиск по тому, как легко это сделать, но в основном поиск продолжается TextPainter .
Если вы хотите нарисовать другие виджеты в качестве своих дочерних элементов и, при необходимости, пропустить некоторые из них при создании других, вам следует написать свой собственный RenderObject . Это на один уровень ниже, чем «уровень виджетов». Если вы никогда не делали этого раньше, вы также можете изучить эту тему.