Python Flet中expand属性未按预期工作的问题求助

问题原因 #

1. App作为UserControl未设置expand=True，导致它无法占满页面空间，内部Column即便设置了expand=True也无法正常拉伸布局。
2. todos_list是一个空列表，不能直接作为Tab的content，Flet要求必须传入合法的控件作为内容容器。

修复后的代码 #

import flet as ft

class App(ft.UserControl):
    def __init__(self, page: ft.Page):
        super().__init__()
        self.page = page
        # 改用ListView作为待办项容器，支持滚动和空间扩展
        self.todos_list = ft.ListView(expand=True, spacing=10)

    def build(self):
        self.todo_input_view = ft.Row(
            spacing=5,
            alignment=ft.MainAxisAlignment.SPACE_BETWEEN,
            controls=[
                ft.TextField(
                    expand=True,
                    hint_text="Todo...",
                    border=ft.InputBorder.UNDERLINE,
                    filled=True
                ),
                ft.IconButton(
                    ft.icons.ADD_TASK_ROUNDED,
                    icon_size=40
                )
            ]
        )
        self.tabs = ft.Tabs(
            expand=True,
            selected_index=0,
            tabs=[
                ft.Tab(
                    text="All",
                    content=self.todos_list
                ),
                ft.Tab(
                    text="Pending",
                    content=self.todos_list
                ),
                ft.Tab(
                    text="Completed",
                    content=self.todos_list
                ),
            ]
        )
        return ft.Column(
            expand=True,
            controls=[
                ft.Text(
                    "Todo App",
                    text_align=ft.TextAlign.CENTER,
                    size=25,
                    # 标题占固定高度，不参与空间扩展
                    expand=False
                ),
                self.todo_input_view,
                self.tabs,
            ]
        )


class Todo(ft.UserControl):
    def __init__(self, page: ft.Page):
        super().__init__()
        self.page = page


def main(page: ft.Page):
    page.theme_mode = "dark"
    page.title = "Todo App"
    page.window_width = 450
    page.window_height = 600

    # 设置App控件占满整个页面
    app = App(page)
    app.expand = True
    page.add(app)

ft.app(main)

关键改动说明 #

• 在main中给App实例设置expand=True，确保它填充整个页面空间，内部布局控件才能正常拉伸。
• 将self.todos_list替换为ft.ListView(expand=True)，作为待办项的容器，既支持占满Tab空间，也能处理滚动需求。
• 给顶部标题文本明确设置expand=False，避免占用额外空间，让输入栏和Tabs合理分配剩余页面空间。

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