Flet-Python中表单元素无法居中的问题求助

问题核心 #

使用Flet框架开发时，尝试通过MainAxisAlignment.CENTER和CrossAxisAlignment.CENTER设置页面居中，但按钮、输入框等元素始终无法居中，仅能通过margin勉强调整位置。

错误分析 #

1. 主程序属性赋值错误：代码中错误地将page.horizontal_alignment写成了page.window_height，导致页面水平对齐设置失效，还错误覆盖了窗口高度配置。
2. Signup页面布局未设置对齐：返回的根Column未占满页面空间，也未配置对齐属性；容器内部的Column同样没有设置对齐，导致表单元素在容器内靠左排列。

修正后的代码 #

主程序代码

from flet import *
from views import views_handler

def main(page: Page):
    page.title = "Home"
    page.window_height = 500
    page.window_width = 500
    page.vertical_alignment = MainAxisAlignment.CENTER
    # 修正错误：将window_height改为horizontal_alignment
    page.horizontal_alignment = CrossAxisAlignment.CENTER
    page.theme_mode = ThemeMode.DARK

    def route_change(route):
        page.views.clear()
        page.views.append(
            views_handler(page)[page.route]
        )

    page.on_route_change = route_change
    page.go('/')

app(target=main)

Signup页面代码

from flet import *
from flet_core.control_event import ControlEvent

class Signuppage(UserControl):
    def __init__(self, page):
        super().__init__()
        self.page = page

    def build(self):
        self.page.title = "Signup"
        self.page.vertical_alignment = MainAxisAlignment.CENTER
        self.page.horizontal_alignment = CrossAxisAlignment.CENTER

        self.username_signup = TextField(label="Username", width=200)
        self.password_signup = TextField(label="Password", width=200, password=True)
        self.checkbutton = Checkbox(label="I accept ", value=False)
        self.signup_button = ElevatedButton(text="Sign up", width=200, disabled=True)

        self.username_signup.on_change = self.validate
        self.password_signup.on_change = self.validate
        self.checkbutton.on_change = self.validate
        self.signup_button.on_click = self.submit

        return Column(
            controls=[
                Container(
                    content=Column(
                        controls=[self.username_signup, self.password_signup, self.checkbutton, self.signup_button],
                        # 容器内部元素居中
                        alignment=MainAxisAlignment.CENTER,
                        horizontal_alignment=CrossAxisAlignment.CENTER,
                        spacing=15  # 可选：增加元素间距，布局更美观
                    ),
                    height=400,
                    width=400,
                    border_radius=50,
                    bgcolor=colors.GREEN,
                ),
            ],
            # 根Column占满页面，并居中容器
            expand=True,
            alignment=MainAxisAlignment.CENTER,
            horizontal_alignment=CrossAxisAlignment.CENTER
        )

    def validate(self, e: ControlEvent) -> None:
        if all([self.username_signup.value, self.password_signup.value, self.checkbutton.value]):
            self.signup_button.disabled = False
        else:
            self.signup_button.disabled = True
        self.update()

    def submit(self, e: ControlEvent) -> None:
        print(self.username_signup.value, self.password_signup.value)

关键修正点说明 #

• 主程序中修正了horizontal_alignment的赋值错误，确保页面整体对齐设置生效。
• Signup页面的根Column添加expand=True使其占满整个页面空间，同时设置alignment和horizontal_alignment让内部容器居中。
• 容器内部的Column也设置了对齐属性，确保输入框、按钮等元素在绿色容器内居中排列，可选添加spacing属性优化元素间距。

内容的提问来源于stack exchange，提问作者Ahmed Hatem