Site icon George的生活點滴

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,我們可以更清楚每個屬性的產果:

執行結果:

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

Exit mobile version