Flet 的 page.overlay 列表中的控件默认锚定于左上角，无法通过 page.vertical_alignment 或 page.horizontal_alignment 直接控制其位置；正确方式是利用 ft.Stack 布局或直接设置 Container 的定位属性（如 bottom=0, left=..., right=...）实现像素级对齐。
flet 的 `page.overlay` 列表中的控件默认锚定于左上角，无法通过 `page.vertical_alignment` 或 `page.horizontal_alignment` 直接控制其位置；正确方式是利用 `ft.stack` 布局或直接设置 `container` 的定位属性（如 `bottom=0`, `left=...`, `right=...`）实现像素级对齐。
在 Flet 中，page.overlay 是一个绝对定位层（类似 HTML 的 position: fixed），所有添加到其中的控件默认以 (0, 0)（即页面左上角）为原点进行渲染。这意味着：
-
page.vertical_alignment和page.horizontal_alignment仅作用于page.controls主内容区，对overlay完全无效； -
Container.alignment（如ft.alignment.bottom_center）也不适用于 overlay 定位——它只影响容器内部子元素的对齐，而非容器自身在页面上的位置。
✅ 正确做法：使用 定位属性（positioning props） 显式指定坐标。Flet 的 Container 支持以下关键定位参数（需配合 Stack 或直接置于 overlay 中生效）：
| 属性 | 说明 | 示例 |
|---|---|---|
top / bottom
|
距离顶部/底部的距离（像素或 None） |
bottom=0 → 紧贴页面底部 |
left / right
|
距离左侧/右侧的距离（像素或 None） |
left=0, right=0, width=100% → 水平铺满 |
width / height
|
显式设置尺寸（推荐设为具体值或 page.window.width） |
width=page.window.width |
? 底部居中示例（适配您的虚拟键盘场景）：
def keyboard():
return ft.Container(
content=ft.Column(
controls=[
ft.Row([ft.OutlinedButton('O', width=120, height=70) for _ in range(12)], spacing=25),
ft.Row([ft.OutlinedButton('O', width=120, height=70) for _ in range(12)], spacing=25),
ft.Row([ft.OutlinedButton('O', width=120, height=70) for _ in range(12)], spacing=25),
ft.Row([ft.OutlinedButton('O', width=120, height=70) for _ in range(12)], spacing=25),
],
spacing=25,
expand=True,
),
bgcolor='teal.5',
width=page.window.width, # 动态适配窗口宽度
height=320, # 建议显式设高，避免高度坍缩
border=ft.border.all(4, 'teal'),
border_radius=ft.border_radius.all(5),
# ✅ 关键：用 bottom + left/right 实现底部居中
bottom=0,
left=0,
right=0,
# 注意：不要设 top、left 同时存在冲突值；bottom+left+right 可自动水平居中
)
? 进阶建议：
- 若需更复杂布局（如多层叠加、响应式偏移），可将
overlay内容包裹在ft.Stack中，并设置Stack.expand = True，再用Stack的alignment（如ft.alignment.bottom_center）统一管理子项； - 始终监听窗口大小变化（
page.on_resize），动态更新width/height，确保全屏适配； - 避免在
overlay中使用expand=True的控件（如未包裹在Stack中的Column），可能导致尺寸计算异常。
? 总结：page.overlay 是绝对定位画布，对齐靠 top/bottom/left/right 四值驱动，而非页面级对齐属性。掌握这四个定位属性，即可精准控制任意 overlay 元素的位置——底部居中？只需 bottom=0 + left=0 + right=0。
