在 Flet 中，直接对 Column 设置 scroll 参数无效；必须将其嵌套在具有明确高度（如 Container 或 ListView）的可滚动容器中，才能实现垂直滚动效果。
在 flet 中，直接对 `column` 设置 `scroll` 参数无效；必须将其嵌套在具有明确高度（如 `container` 或 `listview`）的可滚动容器中，才能实现垂直滚动效果。
在构建类似“巴塞罗那赛事日程”这类内容动态增长的 UI 时，开发者常期望 Column 能随内容增多而自动支持滚动。但需注意：Flet 的 Column 组件本身不支持原生滚动（scroll 属性对其无效）。滚动能力必须由其父级容器提供——且该容器必须具备明确的高度约束（如固定 height 或通过 expand=True 在弹性布局中获得可用空间），否则 Flet 无法确定滚动区域范围，导致 scroll=ft.ScrollMode.ALWAYS 等设置静默失效。
✅ 正确做法是：将 Column 包裹在 Container（或 ListView）中，并为该容器显式指定高度（或确保其在布局中能获得确定尺寸）：
import flet as ft
def main(page: ft.Page):
page.title = "Barcelona Fixtures"
# ✅ 可滚动的核心结构：Column → Container（带 height + scroll）
schedule_widget = ft.Column(
controls=[ft.Text(f"Match {i}: FC Barcelona vs Opponent {i}") for i in range(20)],
spacing=12,
tight=False, # 允许 Column 自适应内容，但不撑满父容器
)
schedule_main_widget = ft.Container(
content=schedule_widget,
height=500, # ⚠️ 关键：必须设置固定高度或通过 expand 动态分配
padding=ft.padding.symmetric(vertical=10, horizontal=15),
border=ft.border.all(1, ft.colors.OUTLINE),
scroll=ft.ScrollMode.ALWAYS, # 启用始终显示滚动条
clip_behavior=ft.ClipBehavior.HARD_EDGE, # 防止内容溢出
)
# 外层 Column 用于整体布局（可选 expand=True 以填充剩余空间）
schedule_mainest_widget = ft.Column(
controls=[ft.Text("Upcoming Fixtures", size=18, weight="bold"), schedule_main_widget],
spacing=15,
expand=True,
)
page.add(schedule_mainest_widget)
page.update()
ft.app(target=main)
? 关键要点总结：
- ❌ 错误示范：ft.Column(scroll=ft.ScrollMode.ALWAYS) —— 无效；
- ✅ 正确路径：Container(content=Column(...), height=..., scroll=...)；
- ? height 是硬性要求：若使用 expand=True，需确保父容器（如 Column/Row/Page）已启用弹性布局并能分配空间；
- ?️ 建议添加 clip_behavior=ft.ClipBehavior.HARD_EDGE 避免滚动时内容视觉溢出；
- ? 替代方案：对纯列表场景，可直接使用 ft.ListView（天生支持滚动），但 ListView 不支持 alignment、spacing 等 Column 特有布局属性，灵活性略低。
通过以上结构，你的赛事日程列表即可稳定响应滚动操作，完美适配移动端与桌面端视图。
