如何在运行时获取Flet（Python）中Widget的尺寸？

Flet里的widget.width/widget.height是仅写入属性，只能用来设置组件的初始尺寸，无法直接读取组件渲染后的实际宽高。要获取运行时的真实尺寸，需要使用组件的get_rect_async()异步方法，该方法会返回组件的矩形信息（包含宽、高、位置等）。

常用实现方式 #

1. 通过按钮触发获取尺寸 #

适合手动触发获取某个组件的尺寸：

import flet as ft

async def main(page: ft.Page):
    # 创建目标组件
    target_widget = ft.Container(
        content=ft.Text("我是一个容器"),
        width=200,
        height=100,
        bgcolor=ft.colors.LIGHT_BLUE
    )
    await page.add_async(target_widget)
    
    # 定义获取尺寸的回调函数
    async def fetch_size(e):
        rect = await target_widget.get_rect_async()
        print(f"容器实际宽度: {rect.width}, 实际高度: {rect.height}")
    
    # 添加触发按钮
    await page.add_async(ft.ElevatedButton("点击获取尺寸", on_click=fetch_size))

ft.app(target=main)

2. 组件挂载完成后自动获取 #

组件被添加到页面并渲染完成时，通过on_mount事件自动获取尺寸：

import flet as ft

async def main(page: ft.Page):
    # 组件挂载时的回调
    async def on_widget_mount(e):
        rect = await e.control.get_rect_async()
        print(f"组件挂载后尺寸：宽{rect.width}, 高{rect.height}")
    
    # 创建组件并绑定on_mount事件
    target_widget = ft.Text(
        "这是一段测试文本，用来获取尺寸",
        size=20,
        on_mount=on_widget_mount
    )
    await page.add_async(target_widget)

ft.app(target=main)

3. 页面 resize 时更新尺寸 #

如果需要在窗口大小变化时实时获取组件尺寸，可以监听页面的on_resize事件：

import flet as ft

async def main(page: ft.Page):
    target_widget = ft.Container(bgcolor=ft.colors.ORANGE, expand=True)
    await page.add_async(target_widget)
    
    async def on_page_resize(e):
        rect = await target_widget.get_rect_async()
        print(f"窗口变化后组件尺寸：宽{rect.width}, 高{rect.height}")
    
    page.on_resize = on_page_resize
    await page.update_async()

ft.app(target=main)

注意事项 #

• 必须使用异步方法get_rect_async()，因为需要等待组件完成渲染才能拿到真实尺寸
• 不要在组件刚创建时直接调用该方法，必须等组件被添加到页面并完成挂载（比如在on_mount、按钮点击事件中调用）

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