Flet – Column & Row

Column 和 Row 兩個都是排版的元件:

• Column 產生垂直的一列，子元件預設是由上到下呈現，就像一棟大樓，每一個樓層就是一個子元件
• Row 產生水平的一行，子元件預設是由左至右的呈現，就像火車一樣，每節車箱就是一個子元件

為了讓大家能明白 Column 和 Row，下面的程式沒有簡化:

# Flet Column & Row
# 2024-08-21
# 簡版程式: https://github.com/lcc728/flet/blob/main/ex_column_row.py 

import flet as ft

def main(page: ft.Page):
    page.title= "Flet - Column and Row"
    container =ft.Container(
        ft.Column([
            ft.Text("範例 1- Row: "),
            ft.Column([
                ft.Row([
                    ft.Container(
                        content=ft.Text("1"),
                        bgcolor=ft.colors.RED_50,
                        width=50,
                        height=50,
                        alignment=ft.alignment.center,
                    ),
                    ft.Container(
                        content=ft.Text("2",color="white"),
                        bgcolor=ft.colors.RED_500,
                        width=50,
                        height=50,   
                        alignment=ft.alignment.center,             
                    ),
                    ft.Container(
                        content=ft.Text("3",color="white"),
                        bgcolor=ft.colors.RED_900,
                        width=50,
                        height=50,                
                        alignment=ft.alignment.center,
                    )                        
                    
                ]), 
                ft.Row([
                    ft.Container(
                        content=ft.Text("4",color="white"),
                        bgcolor=ft.colors.GREEN_900,
                        width=50,
                        height=50,
                        alignment=ft.alignment.center,
                    ),
                    ft.Container(
                        content=ft.Text("5",color="white"),
                        bgcolor=ft.colors.GREEN_500,
                        width=50,
                        height=50,   
                        alignment=ft.alignment.center,             
                    ),
                    ft.Container(
                        content=ft.Text("6"),
                        bgcolor=ft.colors.GREEN_50,
                        width=50,
                        height=50,                
                        alignment=ft.alignment.center,
                    )                        
                    
                ]), 
                ft.Row([
                    ft.Container(
                        content=ft.Text("7"),
                        bgcolor=ft.colors.BLUE_50,
                        width=50,
                        height=50,
                        alignment=ft.alignment.center,                
                    ),
                    ft.Container(
                        content=ft.Text("8",color="white"),
                        bgcolor=ft.colors.BLUE_500,
                        width=50,
                        height=50,
                        alignment=ft.alignment.center,
                    ),
                    ft.Container(
                        content=ft.Text("9",color="white"),
                        bgcolor=ft.colors.BLUE_900,
                        width=50,
                        height=50,
                        alignment=ft.alignment.center,
                    )                        
                    
                ]),   

            ]),
            ft.Divider(),
            ft.Text("範例 2 - Column:"),
            ft.Column([
                ft.Row([
                        ft.Column([
                            ft.Container(
                                content=ft.Text("1"),
                                bgcolor=ft.colors.RED_50,
                                width=50,
                                height=50,
                                alignment=ft.alignment.center,
                            ),
                            ft.Container(
                                content=ft.Text("2",color="white"),
                                bgcolor=ft.colors.RED_500,
                                width=50,
                                height=50,   
                                alignment=ft.alignment.center,             
                            ),
                            ft.Container(
                                content=ft.Text("3",color="white"),
                                bgcolor=ft.colors.RED_900,
                                width=50,
                                height=50,                
                                alignment=ft.alignment.center,
                            )                        
                            
                        ]), 
                        ft.Column([
                            ft.Container(
                                content=ft.Text("4",color="white"),
                                bgcolor=ft.colors.GREEN_900,
                                width=50,
                                height=50,
                                alignment=ft.alignment.center,
                            ),
                            ft.Container(
                                content=ft.Text("5",color="white"),
                                bgcolor=ft.colors.GREEN_500,
                                width=50,
                                height=50,   
                                alignment=ft.alignment.center,             
                            ),
                            ft.Container(
                                content=ft.Text("6"),
                                bgcolor=ft.colors.GREEN_50,
                                width=50,
                                height=50,                
                                alignment=ft.alignment.center,
                            )                        
                            
                        ]), 
                        ft.Column([
                            ft.Container(
                                content=ft.Text("7"),
                                bgcolor=ft.colors.BLUE_50,
                                width=50,
                                height=50,
                                alignment=ft.alignment.center,                
                            ),
                            ft.Container(
                                content=ft.Text("8",color="white"),
                                bgcolor=ft.colors.BLUE_500,
                                width=50,
                                height=50,
                                alignment=ft.alignment.center,
                            ),
                            ft.Container(
                                content=ft.Text("9",color="white"),
                                bgcolor=ft.colors.BLUE_900,
                                width=50,
                                height=50,
                                alignment=ft.alignment.center,
                            )                        
                            
                        ]),   

                    ], )                  
                ]),  
        ])          
    )
     
    page.add(container)

ft.app(target=main)

程式中沒有用任何的屬性設定，比較可能用到的設定有:

• alignment:主軸的對齊方式，Column 是垂直軸, Row 是水平軸
• horizontal_alignment ( Column) , vertical_alignment (Row) : 次軸的對齊方式，Column 是水平軸, Row 是垂直軸

執行結果:

簡版 Source Code:https://github.com/lcc728/flet/blob/main/ex_column_row.py