如何调整Python Flet元素位置？Column与Row布局对齐问题

你的问题出在Flet页面的默认布局逻辑上：Page.add()方法会将组件按垂直顺序添加到页面的默认根容器（本质是一个Column），所以Row会自动排在Column的下方，而非从顶部开始并列。

解决方法 #

将Column和Row放入同一个横向Row容器中，让它们在水平方向并排，且都从顶部对齐：

import flet as Ft

def main(Page: Ft.Page):
    Container = [Ft.Container(width=100, height=100, bgcolor='red'), 
                 Ft.Container(width=100, height=100, bgcolor='green'), 
                 Ft.Container(width=100, height=100, bgcolor='blue')]
    
    Container_1 = [Ft.Container(width=100, height=100, bgcolor='red'), 
                   Ft.Container(width=100, height=100, bgcolor='green'),
                   Ft.Container(width=100, height=100, bgcolor='blue')]
    
    # 用父Row包裹两个布局，实现横向并排
    Page.add(Ft.Row(
        controls=[
            Ft.Column(spacing=0, controls=Container),
            Ft.Row(spacing=0, controls=Container_1)
        ],
        alignment=Ft.MainAxisAlignment.START
    ))

    Page.window_always_on_top = True
    Page.padding = 0
    Page.update()

Ft.app(target=main)

关键说明 #

• 父Row容器负责将内部的Column和Row布局横向排列，打破页面默认的垂直堆叠逻辑。
• alignment=Ft.MainAxisAlignment.START确保两个子布局都从父Row的顶部开始对齐（该值为默认值，显式设置可提升代码可读性）。
• 你的Page.padding=0设置已确保布局紧贴页面边缘，无需额外调整。

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