Flet – Card

Card 是一個兼具功能與美觀的排版元件。它不僅能有效地組織資訊，還能為頁面增添視覺層次。Card 的靈活性，讓我們能夠輕鬆地設計出符合使用者的介面。

底下為範例程式:

# Flet - Card
# 2024-08-16
# https://github.com/lcc728/flet/blob/main/ex_card.py
import flet as ft

def main(page: ft.Page):
    card1 = ft.Card(
        content=ft.Text("      CARD 1 "),
        width=300,
        height=200,
        margin=16,
        color="blue",
        elevation=10, 
        shadow_color = "red",        
        shape=ft.RoundedRectangleBorder(ft.border_radius.all(15)),
    )
    card2 = ft.Card(
        content=ft.Text("   CARD 2 "),
        width=300,
        height=200,
        margin=30,
        color="green",
        elevation=20, 
        shape=ft.BeveledRectangleBorder(ft.border_radius.all(15)),
    )    
    page.add(card1, card2)

ft.app(target=main)

上例產生了 2 張 card，透過這 2 張 card，我們可以更清楚每個屬性的產果:

• content: 顯示的文字
• width: Card 的寬度
• height:Card 的高度
• margin:與其它 widget 的間距
• color: 顏色
• elevation: 陰影的大小
• shadow_color: 陰影的顏色
• shape: 四個邊角的樣式與大小

執行結果:

Source Code: https://github.com/lcc728/flet/blob/main/ex_card.py