Адаптивный столбец к строке в зависимости от размера содержимого - PullRequest
Новая
       6

Адаптивный столбец к строке в зависимости от размера содержимого

0 голосов
/ 02 августа 2020

Я хочу создать адаптивный виджет во флаттере, который выравнивает кнопки (в основном две) в одной строке, если они подходят, а если нет, то их следует размещать в отдельных строках. Нам нужно поведение, при котором они заполняют всю ширину родительского элемента, когда в «режиме столбца» и в «режиме строки» они должны заполнять каждую половину доступного пространства. Мы бы использовали его так: 

CustomResponsiveWrap(
  children: [
    Button('Ok'),
    Button('not Ok')],
  spacing: 10);

Вот два изображения того, как он должен выглядеть в режиме столбца и строки: Кнопки слишком велики для одной строки Кнопки подходят в одну строку

Сначала я пробовал использовать Wrap, но это не позволяет точно настроить поведение. Я считаю, что обычный MediaQuery тоже не сработает. Текстовое содержимое кнопок различается на разных языках, и реальный размер довольно «сложно» оценить (например, с OS-Zoom, специальные символы в других алфавитах и ​​т. Д. c.).

После что я пробовал использовать CustomMultiChildLayout. Я думаю, что для поведения, которое я хочу, необходимо получить размер кнопок в строковом макете, чтобы определить, возможен ли строковый режим, и если нет, мне нужно «ретранслировать» в столбцовый режим. Это невозможно в CustomMultiChildLayout, поскольку MultiChildLayoutDelegate жалуется, когда вы выполняете layoutChild на одном ребенке не ровно один раз (и я мог бы сделать это более одного раза с помощью своего метода).

Я сейчас решил это, скопировав весь код CustomMultiChildLayout и удалив утверждение, которое проверяет множественные вызовы layoutChild для одного ребенка, и это работает. К сожалению, создание подклассов не сработало, и я нахожу решение довольно неудовлетворительным.

Мой вопрос: есть ли класс виджета / рендеринга флаттера, который лучше подходит для данного варианта использования, или есть какой-то способ сделать это с существующим виджеты, о которых я не знаю / или знаю как? И, наконец, какие последствия имеют несколько вызовов макета для дочернего элемента, кроме снижения производительности (у нас есть только две, возможно, три кнопки с текстом и рамкой, поэтому для нас это не должно быть слишком плохой производительностью).

Всем, кому интересно как я сейчас это делаю. Я поместил эту идею в этот DartPad: https://dartpad.dev/9c9576f1840823cac44b2ce63fd200e3. Он создает виджет, аналогичный CustomMultiChildLayout, который поддерживает ретрансляцию. Я сохранил его общую структуру. Мне понравились LayoutID, вместо того, чтобы «возиться» со следующими / предыдущими дочерними функциями ContainerRenderObjectMixin.

...