Блог

Я кодирую веб-сайт с помощью Flutter. В моем макете используются «блоки» вертикального содержимого, размещенные внутри SingleChildScrollView . Они выглядят как прямоугольники содержимого (с изображениями, текстом, кнопками и т. Д.), Занимающие весь экран по горизонтали и весь экран по вертикали.

В настоящее время всякий раз, когда я меняю размер экрана (перетаскиваю веб-окно, чтобы оно было другого размера), веб-сайт ломается. Если я перемещаю его так, чтобы он был действительно маленьким по горизонтали, я не могу вместить нужный мне контент, если я перемещаю его так, чтобы он был маленьким по вертикали, я получаю ошибки переполнения (и наоборот). Это потому, что я использую MediaQuery.of(context).size.height/width для верстки своего сайта.

Все мои прямоугольные блоки «содержимого» имеют одного и того же родителя: Container(width: MediaQuery.of(context).size.width, height: MediaQuery.of(context).size.height) поэтому они полностью настраиваются каждый раз, когда я перемещаю окно. Есть ли лучший способ реализовать адаптивный веб? Было бы лучше просто указать (например) 620 пиксели height для Container и double.infinity для width ? А потом как-то сделать так, чтобы все поместилось внутри, а не переполнялось/выглядело странно? Кроме того, когда я перетаскиваю нижнюю часть веб-окна, ничто не расширяется/не растет должным образом, потому что в то же время все мои «блоки содержимого» изменяют свою высоту, потому что я технически изменяю размер экрана.

Наконец, я попробовал использовать BoxConstraints «s minHeight , maxHeight , minWidth , и maxWidth «, но, похоже, они не работают и все еще создают желтые/черные линии переполнения при тестировании в веб-представлении. А?

Кроме того, как бы я сделал так, чтобы нижняя полоса прокрутки отображалась горизонтально, как только мое окно webview будет полностью закрыто горизонтально и половина моего контента будет отключена, но я все равно хотел бы ее увидеть. Было бы это необходимо? Или это не понадобилось бы другому решению? Я не уверен…

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

(Кроме того, при использовании LayoutBuilder у меня есть 2 дополнительных сборки для мобильных устройств/планшетов, когда ширина экрана достигает менее 1100 пикселей)