使用Flet的NavigationRail无法滚动，报高度未绑定错误求助

问题原因 #

• NavigationRail所在的Row已设置expand=True，但NavigationRail自身未声明填充可用高度，导致高度无界报错。
• 右侧列表Column未启用滚动属性，内容超出窗口后无法滚动。

解决方案 #

对代码做两处关键修改：

1. 给NavigationRail添加expand=True，让它填充Row的垂直空间。
2. 给承载列表的Column设置scroll=ft.ScrollMode.AUTO，启用自动滚动。

修改后的完整代码 #

import time
import flet as ft


def main(page: ft.Page):
    # PAGE SETTING
    page.window_height = 800
    page.scroll = True
    page.window_width = 1200
    page.bgcolor = "#2D033B"
    page.appbar = ft.AppBar(
        leading=ft.IconButton(icon=ft.icons.MENU),
        bgcolor="#E5B8F4",
        color="#2D033B"
    )
    
    # APP CODE
    
    side_menu = ft.NavigationRail(
        selected_index=0,
        label_type=ft.NavigationRailLabelType.ALL,
        min_width=100,
        min_extended_width=100,
        leading=ft.FloatingActionButton(icon=ft.icons.CREATE, text="Add"),
        group_alignment=-0.9,
        expand=True,  # 新增：让NavigationRail填充垂直空间
        destinations=[
            ft.NavigationRailDestination(
                icon_content=ft.Icon(ft.icons.PERSON_2_OUTLINED),
                selected_icon_content=ft.Icon(ft.icons.PERSON_2),
                label="Atila interchange",
            ),
        ],
        on_change=lambda e: print("Selected destination:", e.control.selected_index),
    )
    # 修改：给Column添加滚动属性
    cl = ft.Column(scroll=ft.ScrollMode.AUTO)
    for i in range(100):
        cl.controls.append(
            ft.ListTile(
                title=ft.Text(f"Atila{i}"),
                subtitle=ft.Text("Pasha")
            )
        )
    page.add(
        ft.Row([
            side_menu,
            ft.VerticalDivider(width=1),
            cl,
        ], expand=True),
    )


ft.app(main)

关键修改说明 #

• expand=True：告诉NavigationRail在Row容器中占据所有可用的垂直空间，直接消除高度无界的错误提示。
• scroll=ft.ScrollMode.AUTO：当Column内的内容高度超过容器可视区域时，自动显示滚动条并允许滚动，解决列表无法滚动的问题。

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