You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

如何在Python Flet框架中垂直水平居中列组件(不使用页面对齐属性)

Flet中不使用page对齐属性实现内容垂直水平居中

你当前代码的问题在于:Row组件默认仅包裹内部内容的高度,没有占满页面的垂直空间,所以设置的vertical_alignment=ft.CrossAxisAlignment.CENTER无法生效,只会实现水平居中。

只需给Row添加expand=True属性,让它填充页面的全部可用空间,垂直方向的对齐设置就能正常工作了。

修改后的代码如下:

def main(page):
    page.title = 'Example'
    
    about_page = ft.Row([ft.Column([
        ft.Text(value='Written By:', size=40),
        ft.Text(value='sljdfklajl', size=20)
    ], alignment=ft.MainAxisAlignment.CENTER, horizontal_alignment=ft.CrossAxisAlignment.CENTER)],
                        alignment=ft.MainAxisAlignment.CENTER, 
                        vertical_alignment=ft.CrossAxisAlignment.CENTER,
                        expand=True)  # 新增这一行
    
    page.add(about_page)

ft.app(target=main)

expand=True会让Row组件占据父容器(page)的全部可用空间,此时Row的垂直对齐设置就能将内部Column在垂直方向居中,再配合Row的水平对齐、Column自身的对齐配置,就能实现内容整体垂直水平居中的效果,且完全没有使用page的vertical_alignment和horizontal_alignment属性。

内容的提问来源于stack exchange,提问作者taafuuu__

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.07.05 12:33:27