如何在调整窗口大小时自动调整控件的大小和位置？

Question

我正在尝试使用 Python Flet 开发一个临时应用程序。我的目标是找到一种方法来定位，或者指定相对于其父控件尺寸的控件尺寸。例如，按钮宽度为容器宽度的 70%，而容器宽度又为页面宽度的 30%。这样，当用户调整页面大小时，每个控件的尺寸都会自动调整大小，并保持相同的比例。 我发现这个属性很有趣，但是当我减小窗口大小时，有些东西仍然不起作用。我希望页面中的每个控件根据窗口大小按比例减小其尺寸。

import flet as ft

def main(page: ft.Page):
    page.scroll = ft.ScrollMode.AUTO

    ### AMBER LEFT CONTAINER ###
    col1 = ft.Column([ft.IconButton(icon=ft.icons.UPLOAD_FILE),
        ft.IconButton(icon=ft.icons.PICTURE_AS_PDF_OUTLINED), 
        ft.IconButton(icon=ft.icons.SAVE),])

    cont1 = ft.Container(content=col1,
        height = page.height,
        expand=3, #30% of the page width
        bgcolor=ft.colors.AMBER,)
    ### LEFT CONTAINER ###


    ### RED RIGHT CONTAINER ###    
    row0 = ft.Row([ft.Image(src=f"/icon.png", width=200, height=100, fit=ft.ImageFit.FILL,),],
        alignment=ft.CrossAxisAlignment.CENTER)
    row1 = ft.Row([ft.IconButton(icon=ft.icons.ARROW_CIRCLE_LEFT), 
        ft.Text("71/155"),
        ft.IconButton(icon=ft.icons.ARROW_CIRCLE_RIGHT),])
    row2 = ft.Row([ft.TextField(label="Find this keyword inside doc"), 
        ft.IconButton(icon=ft.icons.FIND_IN_PAGE)])
    row3 = ft.Row([ft.TextField(label="Extract these pages from doc", expand=20), 
        ft.IconButton(icon=ft.icons.FIND_IN_PAGE, expand=1),])

    cont2 = ft.Container(content=ft.Column([row0, row1, row2, row3]), 
        height = page.height,
        expand=7, #70% of the page width
        bgcolor=ft.colors.RED,)
    ### RIGHT CONTAINER ###


    page.add(ft.Row([cont1, cont2]))
    page.update()

ft.app(target=main, assets_dir="assets")

如何指定控件尺寸以使它们根据窗口大小按比例调整大小？

Answer 1

import flet.canvas as cv
import flet as ft
from collections import namedtuple

class ResponsiveControl(cv.Canvas):
    def __init__(self, content= None, resize_interval=1, on_resize=None, expand=1, padding:ft.padding=0, margin:ft.margin=0, debug:str=False, **kwargs):
        super().__init__(**kwargs)
        self.content = ft.Container(
                content=content,
                padding=5 if debug else padding,
                alignment=ft.alignment.center,
                margin=5 if debug else margin,
                bgcolor=ft.colors.with_opacity(0.2, debug) if debug else None,
                border=ft.border.all(1, debug) if debug else None,
        )
        self.expand = expand
        self.resize_interval = resize_interval
        self.resize_callback = on_resize
        self.on_resize = self.__handle_canvas_resize
        self.size = namedtuple("size", ["width", "height"], defaults=[0, 0])

    def __handle_canvas_resize(self, e):
        """
        Called every resize_interval when the canvas is resized.
        If a resize_callback was given, it is called.
        """
        pass


def main(page: ft.Page):
    s1 = ResponsiveControl(content=ft.Text("Hello, World!"), expand=1)
    s2 = ResponsiveControl(content=ft.Text("Hello, World!"), expand=3)
    page.add(
        ft.Column(
            controls=[s1, s2],
            expand=True
        )
    )

if __name__ == "__main__":
    ft.app(target=main)