如何在Python Flet中实现窗口缩放时控件自动等比调整？

你的代码里有几个导致缩放异常的问题：固定高度设置、静态尺寸控件，以及没有监听窗口大小变化来动态更新控件尺寸。下面是具体的修复方案：

关键修复点 #

• 移除固定高度：不要给cont1和cont2设置height = page.height，改用布局的expand属性让容器自动占满页面高度，窗口变化时高度会自适应。
• 监听窗口resize事件：通过page.on_resize触发控件尺寸的动态更新，确保所有控件比例随窗口变化保持一致。
• 替换静态尺寸为相对比例：将图片、按钮等控件的固定宽高，改为基于父容器尺寸的百分比计算值。

修改后的完整代码 #

import flet as ft

def update_controls(page: ft.Page, cont1: ft.Container, cont2: ft.Container, img: ft.Image):
    # 按比例设置图片尺寸：宽度为右侧容器的30%，保持2:1的原宽高比
    img_width = cont2.width * 0.3
    img.width = img_width
    img.height = img_width / 2
    
    # 按比例设置左侧图标按钮大小：为左侧容器宽度的20%
    for btn in cont1.content.controls:
        btn.icon_size = cont1.width * 0.2
    
    page.update()

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),
    ], alignment=ft.MainAxisAlignment.CENTER)

    cont1 = ft.Container(
        content=col1,
        expand=3,  # 占页面宽度30%
        bgcolor=ft.colors.AMBER,
    )
    ### LEFT CONTAINER ###

    ### RED RIGHT CONTAINER ###    
    img = ft.Image(
        src="/icon.png", 
        fit=ft.ImageFit.FILL,
    )
    row0 = ft.Row([img], 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),
    ], alignment=ft.MainAxisAlignment.CENTER)
    
    row2 = ft.Row([
        ft.TextField(label="Find this keyword inside doc", expand=4), 
        ft.IconButton(icon=ft.icons.FIND_IN_PAGE, expand=1),
    ])
    
    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], spacing=20),
        expand=7,  # 占页面宽度70%
        bgcolor=ft.colors.RED,
        padding=20,
    )
    ### RIGHT CONTAINER ###

    # 添加主布局，设置expand=True让row占满页面高度
    page.add(ft.Row([cont1, cont2], expand=True))
    
    # 初始化时更新一次控件尺寸
    update_controls(page, cont1, cont2, img)
    
    # 监听窗口大小变化，实时更新控件比例
    def on_resize(e):
        update_controls(page, cont1, cont2, img)
    
    page.on_resize = on_resize

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

代码说明 #

1. 容器高度自适应：移除了固定height设置，给外层Row添加expand=True，让左右容器自动占满整个页面高度，窗口缩放时高度同步变化。
2. 动态尺寸计算：update_controls函数负责根据当前容器尺寸，按比例计算图片、图标按钮的大小。比如图片宽度设为右侧容器宽度的30%，并保持原有的2:1宽高比；左侧图标按钮的大小设为左侧容器宽度的20%。
3. resize事件监听：窗口大小变化时触发on_resize，调用update_controls重新计算所有控件尺寸并更新页面。
4. 布局优化：给右侧容器的Column添加spacing=20和padding=20，避免控件挤在一起；row2里的TextField和按钮用expand分配空间，保持相对比例。

这样调整后，所有控件都会随着窗口大小等比例缩放，完全符合你需要的相对布局效果。

内容的提问来源于stack exchange，提问作者eljamba