Flet 的 page.overlay 中的元素默认锚定于左上角，无法通过 page.vertical_alignment 或 page.horizontal_alignment 直接控制其位置；正确方式是利用 ft.Container 的定位属性（如 top/bottom/left/right）或嵌套在 ft.Stack 中实现像素级对齐。
flet 的 `page.overlay` 中的元素默认锚定于左上角，无法通过 `page.vertical_alignment` 或 `page.horizontal_alignment` 直接控制其位置；正确方式是利用 `ft.container` 的定位属性（如 `top`/`bottom`/`left`/`right`）或嵌套在 `ft.stack` 中实现像素级对齐。
在 Flet 中，page.overlay 是一个浮动图层容器，用于叠加模态框、键盘、提示弹窗等 UI 组件。但需特别注意：page.overlay 本身不参与页面布局对齐系统，因此设置 page.vertical_alignment 或 page.horizontal_alignment 对 overlay 内部元素完全无效——这些属性仅影响 page.controls 主内容区的对齐行为。
要精准控制 overlay 中元素的位置，必须使用 绝对定位策略。最常用且推荐的方式是为 ft.Container 显式设置 top、bottom、left、right 四个定位属性（配合 width/height），让其相对于整个窗口进行锚点定位。
例如，实现「底部居中」效果：
- 设置
bottom=0使其紧贴窗口底边； - 设置
left和right配合width实现水平居中（更稳妥的方式是结合left=...与right=...自动计算，或直接用left+width+margin_left="auto"—— 但 Flet 当前版本不支持margin: auto居中，故推荐显式计算）； - 更简洁可靠的做法：固定宽度 +
left偏移量 =(window_width - container_width) // 2，或直接使用ft.Stack作为 overlay 根容器，再通过alignment控制子元素。
✅ 推荐方案（简洁可靠，无需手动计算）：
import flet as ft
def main(page: ft.Page):
page.window.full_screen = True
# 创建底部居中的虚拟键盘容器
keyboard = ft.Container(
content=ft.Column([
ft.Row([ft.OutlinedButton("O", width=120, height=70) for _ in range(4)], spacing=10),
ft.Row([ft.OutlinedButton("O", width=120, height=70) for _ in range(4)], spacing=10),
], spacing=15),
width=page.window.width * 0.9,
height=200,
bgcolor=ft.colors.TEAL_50,
border=ft.border.all(3, ft.colors.TEAL),
border_radius=8,
# ✅ 关键：绝对定位到底部居中
bottom=0,
left=(page.window.width - page.window.width * 0.9) / 2, # 水平居中偏移
padding=10
)
def toggle_keyboard(e):
if keyboard in page.overlay:
page.overlay.remove(keyboard)
else:
page.overlay.append(keyboard)
page.update()
tf = ft.TextField(label="点击聚焦显示键盘", on_focus=toggle_keyboard, on_blur=toggle_keyboard)
page.add(tf)
ft.app(main)⚠️ 注意事项：
-
page.window.width/page.window.height在首次渲染时可能为0，建议在page.on_resize回调中动态更新 overlay 元素位置，或使用page.update()后延迟重设（适用于全屏应用，可先设合理默认值）； - 若需响应式适配（如横竖屏切换），应监听
page.on_resize并重新计算left； - 不要依赖
alignment=ft.alignment.bottom_center—— 它仅在Stack或Container作为父容器且设置了expand=True时才生效，而page.overlay不提供此类上下文； -
ft.Stack是更高级的定位方案：将keyboard放入Stack，再将Stack加入overlay，即可用Stack的alignment和子元素alignment精细控制（适合多层叠加场景）。
? 总结：overlay 元素定位 = 绝对定位（top/bottom/left/right） + 显式尺寸控制 + 必要时配合 on_resize 动态更新。摒弃对页面级 alignment 属性的误用，才能真正掌控浮层位置。
