Краткий ответ: прямо задать width/height в процентах (как в CSS) в Flet нельзя. Но то же поведение легко добиться двумя способами:
1) Относительные размеры (аналог процентов внутри строки/колонки) — с помощью flex (свойство expand).
- В Row/Column каждому элементу можно дать expand (True / int). Если несколько элементов имеют expand, они делят доступное пространство пропорционально их значениям.
Пример: два контейнера 2:1 по ширине:
from flet import app, Page, Row, Container, Text
def main(page: Page):
left = Container(content=Text("2/3"), bgcolor="lightblue", expand=2, padding=10)
right = Container(content=Text("1/3"), bgcolor="lightgreen", expand=1, padding=10)
page.add(Row([left, right], expand=True))
app(target=main)
2) Проценты от окна/страницы — вычислять пиксели и обновлять при изменении размера окна.
- У Page есть текущие размеры окна (page.window_width / page.window_height) и событие on_resize. Можно в обработчике пересчитывать width/height (в px) как долю от размеров окна и вызывать page.update().
Пример (контейнер, занимающий 50% по ширине и 30% по высоте окна):
from flet import app, Page, Container, Text
def main(page: Page):
c = Container(content=Text("50% x 30%"), bgcolor="salmon", padding=10)
page.add(c)
def on_resize(e):
c.width = page.window_width * 0.5
c.height = page.window_height * 0.3
page.update()
page.on_resize = on_resize
# задать начальный размер
on_resize(None)
app(target=main)
Полезные замечания
- Для адаптивного интерфейса обычно комбинируют flex/expand (для внутренних пропорций) и вычисление размеров окна (для элементов, зависящих от общего экрана).
- Для списков/сеток используйте Wrap / GridView / adaptive подходы, чтобы элементы красиво перетекали на маленьких экранах.
- Избегайте фиксированных пиксельных размеров там, где нужно адаптироваться к разным устройствам.
Если хотите, могу помочь адаптировать ваш конкретный код — пришлите пример, и я покажу, как сделать верстку «в процентах».