本文详解 Flet 中 NavigationRail 报错 “control's height is unbounded” 的根本原因与解决方案，重点说明为何不能依赖 page.scroll = True，而必须为包含长列表的 Column 显式启用 scroll=True 并确保其父容器具有明确高度约束。
本文详解 flet 中 navigationrail 报错 “control's height is unbounded” 的根本原因与解决方案，重点说明为何不能依赖 `page.scroll = true`，而必须为包含长列表的 column 显式启用 `scroll=true` 并确保其父容器具有明确高度约束。
在 Flet 中，NavigationRail 是一个常用于左侧导航的控件，但其本身不提供滚动能力，且对布局高度有严格要求：它必须被放置在具有明确高度边界的容器中（如 Row 设置 expand=True、或嵌套在固定高度的 Container 内）。初学者常误以为设置 page.scroll = True 就能让任意子控件可滚动——这是错误认知。Flet 的滚动机制是“控件级”的：只有显式启用了 scroll 属性（如 Column(scroll=True)）且其父容器能提供约束高度时，滚动条才会生效。
关键问题在于：NavigationRail 在未指定尺寸约束时会尝试无限延伸高度，而 Row 中若未设置 expand=True 或未对子控件做尺寸限定，Flet 无法计算其布局边界，从而抛出 height is unbounded 错误。
✅ 正确做法如下：
- 移除 page.scroll = True —— 它仅影响页面级全局滚动（已弃用且与 NavigationRail 布局无关）；
- 为内容区域（如 Column）单独启用滚动：设置 ft.Column(scroll=ft.ScrollMode.AUTO)（或简写 scroll=True）；
- 确保 Column 被包裹在尺寸受限的容器中：本例中，Row 使用 expand=True 后，会均匀分配可用空间，使 NavigationRail 和 Column 均获得明确高度上下文；
- （可选）调整 NavigationRail.min_extended_width 以适配文字标签显示，避免截断。
以下是修正后的完整示例代码：
AI 舌诊面诊问诊医疗系统 + 诊疗商城系统源码是一套结合 AI 辅助诊断与商品转化的健康类程序，基于浩创云、ThinkPHP（PHP）开发，支持微信服务号与 H5 端，适合做中医舌诊面诊问答、健康建议推送以及配套诊疗商品的运营。
import flet as ft
def main(page: ft.Page):
page.window_height = 800
page.window_width = 1200
page.bgcolor = "#2D033B"
page.appbar = ft.AppBar(
leading=ft.IconButton(icon=ft.icons.MENU),
bgcolor="#E5B8F4",
color="#2D033B"
)
# ✅ NavigationRail：无需 page.scroll，但需确保父 Row 有 expand
side_menu = ft.NavigationRail(
selected_index=0,
label_type=ft.NavigationRailLabelType.ALL,
min_width=100,
min_extended_width=400, # 更宽以容纳文字标签
leading=ft.FloatingActionButton(icon=ft.icons.CREATE, text="Add"),
group_alignment=-0.9,
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：必须显式启用 scroll，且依赖 Row.expand 提供高度约束
cl = ft.Column(
scroll=ft.ScrollMode.AUTO, # 推荐显式指定模式，更清晰
spacing=2,
expand=True, # 可选：进一步强化高度填充（与 Row.expand 协同）
)
for i in range(100):
cl.controls.append(
ft.ListTile(
title=ft.Text(f"Atila{i}", size=14),
subtitle=ft.Text(f"Pasha{i}", color=ft.colors.YELLOW, size=12),
dense=True,
)
)
# ✅ Row 必须 expand=True，为子控件提供明确布局空间
page.add(
ft.Row(
[
side_menu,
ft.VerticalDivider(width=1, thickness=1, color=ft.colors.GREY_700),
cl,
],
expand=True, # ← 核心！提供高度约束，解决 unbounded error
)
)
ft.app(target=main)
⚠️ 注意事项：
- 不要给 NavigationRail 设置 height 固定值（如 height=600），它应自适应父容器；
- 若需让 NavigationRail 自身也支持滚动（例如目的地过多），可将其包裹在 ft.Container(height=..., scroll=ft.ScrollMode.AUTO) 中，但通常不推荐——应优先优化导航层级；
- ft.ScrollMode.AUTO 会在内容溢出时自动显示滚动条；ADAPTIVE 适用于桌面端平滑滚动；HIDDEN 则禁用滚动（仅靠拖拽）；
- 所有动态添加的控件（如 ListTile）建议设置 dense=True 和合理 spacing，提升长列表渲染性能与视觉密度。
总结：Flet 的布局系统遵循严格的约束传递原则。NavigationRail 的“高度未定义”错误本质是布局树中断所致，修复核心在于用 expand=True 或固定尺寸为父容器设界，并将滚动能力精准赋予实际需要滚动的子控件（如 Column）——而非寄望于页面级滚动开关。
