Python Flet中Row嵌套Tabs致UI失效的问题排查与解决

这是Flet的设计预期，不是Bug。

问题原因 #

默认情况下，ft.Tabs组件会尝试抢占父容器的全部可用宽高，而ft.Row的布局逻辑是让子组件沿水平方向排列，两者的尺寸约束逻辑冲突：Tabs会强行占据所有可用空间，导致左侧Card被完全挤压隐藏，同时布局计算的冲突会引发UI无响应。

实现左右分栏（右侧Tabs占窗口一半）的方案 #

不需要替换ft.Row，只要给Row内的子组件添加明确的空间分配规则即可，核心是利用expand属性约束组件：

1. 给左侧内容（Card）和右侧Tabs分别设置expand=1，让两者平分Row的可用宽度
2. 给Tab的内容区域添加expand=True，确保标签页内的内容能正确填充空间，避免布局异常

修改后的完整代码 #

import flet as ft

MAIN_GUI = ft.Container(
    margin=ft.margin.only(bottom=40),
    content=ft.Row([
        ft.Card(
            elevation=30,
            expand=1,  # 让左侧Card占据一半空间
            content=ft.Container(
                content=ft.Text("Amazing LEFT SIDE Content Here", size=50, weight=ft.FontWeight.BOLD),
                border_radius=ft.border_radius.all(20),
                bgcolor=ft.colors.WHITE24,
                padding=45,
            )
        ),
        ft.Tabs(
            selected_index=1,
            animation_duration=300,
            expand=1,  # 让Tabs占据另一半空间
            tabs=[
                ft.Tab(
                    text="Tab 1",
                    icon=ft.icons.SEARCH,
                    content=ft.Container(
                        expand=True,  # 确保Tab内容填充Tabs空间
                        content=ft.Card(
                            elevation=30,
                            content=ft.Container(
                                content=ft.Text("Amazing TAB 1 content", size=50, weight=ft.FontWeight.BOLD),
                                border_radius=ft.border_radius.all(20),
                                bgcolor=ft.colors.WHITE24,
                                padding=45,
                            )
                        )
                    ),
                ),
                ft.Tab(
                    text="Tab 2",
                    icon=ft.icons.SETTINGS,
                    content=ft.Container(
                        expand=True,  # 确保Tab内容填充Tabs空间
                        content=ft.Text("Amazing TAB 2 content", size=30)
                    ),
                ),
            ],
        )
    ])
)


def main(page: ft.Page):
    page.padding = 50
    page.add(MAIN_GUI)
    page.update()


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

额外说明 #

• 如果需要右侧Tabs占据固定宽度（比如窗口一半的具体像素值），可以把expand=1替换为width=page.window_width//2，但需要在窗口尺寸变化时重新计算更新，不如expand属性自适应方便。
• 给Tab的content添加expand=True是为了避免标签页内的内容尺寸异常，确保内容能正确填充Tabs的可用空间。

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