Flet 0.6.2启用page.scroll后Tab内Column内容不显示如何修复？

在Flet 0.5版本正常运行的代码，升级到0.6.2后，启用page.scroll = ft.ScrollMode.AUTO时，Tab组件内的内容会无法显示。最小复现代码如下：

import flet as ft

def main(page: ft.Page):
    # page.scroll = ft.ScrollMode.AUTO <-- 取消注释后内容无法显示
    text = ft.Text("Hello, world!")

    col_content = ft.Column(controls=[text], auto_scroll=True)

    tabs = ft.Tabs(
        expand=1,
        tabs=[
            ft.Tab(
                text="Example",
                content=ft.Container(
                    content=col_content,
                ),
            ),
        ],
    )

    page.add(tabs)

ft.app(target=main, view=ft.WEB_BROWSER)

问题原因 #

Flet 0.6+版本调整了滚动容器的布局优先级，当页面启用滚动后，Tabs的expand=1无法让内部容器自动获取足够空间，导致内容区域高度为0，无法渲染内容。

修复方案 #

通过给Tab内的Container和Column添加expand属性，明确布局空间分配：

import flet as ft

def main(page: ft.Page):
    page.scroll = ft.ScrollMode.AUTO  # 现在可正常启用

    text = ft.Text("Hello, world!")

    col_content = ft.Column(controls=[text], auto_scroll=True, expand=True)

    tabs = ft.Tabs(
        expand=1,
        tabs=[
            ft.Tab(
                text="Example",
                content=ft.Container(
                    content=col_content,
                    expand=1  # 让容器填满Tab可用空间
                ),
            ),
        ],
    )

    page.add(tabs)

ft.app(target=main, view=ft.WEB_BROWSER)

说明 #

添加expand=1后，Container会填满Tab的全部可用空间，Column也会随之占据Container的完整高度，即使页面启用滚动，内部内容也能正常渲染显示。核心是通过expand属性解决新版本中滚动容器嵌套时的布局冲突。

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