如何将Flet框架中page.overlay列表内的元素对齐至底部居中？

嘿，我完全懂你的困扰——把容器加到page.overlay后默认钉在左上角，改页面本身的对齐属性根本没用，因为overlay里的元素是独立定位的，和页面主体的对齐规则不搭边。别急，给你两个简单的解决办法，亲测有效：

方法一：用WindowAlign直接绑定窗口位置 #

这是最省心的方式，Flet提供了WindowAlign枚举，可以让元素直接相对于窗口边界定位，不管窗口怎么缩放都能保持位置。你只需要修改keyboard()函数里的容器配置，加上两行定位属性就行：

def keyboard():
    vk = ft.Container(
        content=ft.Column(
            controls=[
                ft.Row([ft.OutlinedButton('O', width=120, height=70) for i in range(12)], spacing=25),
                ft.Row([ft.OutlinedButton('O', width=120, height=70) for i in range(12)], spacing=25),
                ft.Row([ft.OutlinedButton('O', width=120, height=70) for i in range(12)], spacing=25),
                ft.Row([ft.OutlinedButton('O', width=120, height=70) for i in range(12)], spacing=25),
            ],
            expand=True,
            spacing=25,
        ),
        bgcolor='teal.5',
        width=ft.WindowWidth(1.0),  # 改成自适应窗口宽度，不用硬写page.window.width
        border=ft.border.all(4, 'teal'),
        border_radius=ft.border_radius.all(5),
        alignment=ft.alignment.bottom_center,
        # 新增这两行，绑定窗口底部居中
        left=ft.WindowAlign.CENTER,
        top=ft.WindowAlign.BOTTOM,
        # 可选：底部留20px间距，避免紧贴窗口边缘
        margin=ft.Margin(0, 0, 0, 20)
    )
    return vk

这里把width改成ft.WindowWidth(1.0)是为了让容器宽度自动跟随窗口变化，不用手动处理窗口 resize 事件，省心不少。

方法二：用外层容器铺满页面后对齐 #

如果你更喜欢用容器的对齐逻辑，也可以把你的键盘容器套在一个占满整个页面的外层容器里，利用外层容器的alignment属性来定位：

def keyboard():
    # 原来的键盘内容容器，保留所有配置
    kb_content = ft.Container(
        content=ft.Column(
            controls=[
                ft.Row([ft.OutlinedButton('O', width=120, height=70) for i in range(12)], spacing=25),
                ft.Row([ft.OutlinedButton('O', width=120, height=70) for i in range(12)], spacing=25),
                ft.Row([ft.OutlinedButton('O', width=120, height=70) for i in range(12)], spacing=25),
                ft.Row([ft.OutlinedButton('O', width=120, height=70) for i in range(12)], spacing=25),
            ],
            expand=True,
            spacing=25,
        ),
        bgcolor='teal.5',
        width=ft.WindowWidth(1.0),
        border=ft.border.all(4, 'teal'),
        border_radius=ft.border_radius.all(5),
        alignment=ft.alignment.bottom_center
    )
    # 外层容器：铺满整个页面，设置底部居中对齐
    outer_container = ft.Container(
        content=kb_content,
        expand=True,
        alignment=ft.alignment.bottom_center,
        margin=ft.Margin(0, 0, 0, 20)  # 可选底部间距
    )
    return outer_container

这个方法的逻辑是让外层容器占满整个窗口，然后把键盘容器“贴”在它的底部居中位置，效果和方法一完全一样，看你习惯哪种写法。

最后给你贴个修改后的完整代码，直接运行就能看到底部居中的键盘了：

import flet as ft

def main(page : ft.Page):
    def keyboard():
        vk = ft.Container(
            content=ft.Column(
                controls=[
                    ft.Row([ft.OutlinedButton('O', width=120, height=70) for i in range(12)], spacing=25),
                    ft.Row([ft.OutlinedButton('O', width=120, height=70) for i in range(12)], spacing=25),
                    ft.Row([ft.OutlinedButton('O', width=120, height=70) for i in range(12)], spacing=25),
                    ft.Row([ft.OutlinedButton('O', width=120, height=70) for i in range(12)], spacing=25),
                ],
                expand=True,
                spacing=25,
            ),
            bgcolor='teal.5',
            width=ft.WindowWidth(1.0),
            border=ft.border.all(4, 'teal'),
            border_radius=ft.border_radius.all(5),
            alignment=ft.alignment.bottom_center,
            left=ft.WindowAlign.CENTER,
            top=ft.WindowAlign.BOTTOM,
            margin=ft.Margin(0, 0, 0, 20)
        )
        return vk


    page.window.full_screen = True
    page.vertical_alignment = 'start'
    page.horizontal_alignment = 'center'
    page.padding = 0
    page.theme = ft.Theme(color_scheme_seed=ft.Colors.GREEN)


    def onbl(e):
        page.overlay.pop(0)
        page.update()

    def oncl(e):
        kb = keyboard()
        page.overlay.append(kb)
        page.update()


    tf = ft.TextField(
        label='Тыкни',
        on_focus=oncl,
        on_blur=onbl,
    )

    page.add( ft.VerticalDivider(), tf)


ft.app(main)

备注：内容来源于stack exchange，提问作者neversleep