Flet – Button

Button 是和使用者互動的基本元件，使用者透過點擊按鈕讓 Button 依指定的 function 來做出回應，例如新增、更新、刪除資料等等。 Flet 和 Flutter 一樣提供了兩種款式的 button：Material 和 Cupertino，這裡只用了幾個我比較常用的按鈕來說明，如果還想了解更多，官網上有詳細的介紹:

# Flet -Button
# 2024-08-14
# https://github.com/lcc728/flet/blob/main/ex_text.py
import flet as ft

def main(page: ft.Page):
    page.add(
        ft.TextButton(text="Text button"),
        ft.IconButton(
            icon="favorite",
            icon_color="red",
            icon_size=20,
            tooltip="IconButton ",
        ),
        ft.FilledButton(text="Filled button"),        
        ft.FilledTonalButton("FilledTonalButton with icon", icon="favorite", icon_color= "red"),  
        ft.OutlinedButton(text="Outlined button" , icon="favorite"),
        ft.ElevatedButton(text="Elevated button",url="https://www.george.tw", url_target =UrlTarget.BLANK),
        ft.FloatingActionButton(icon="favorite",bgcolor="red"),

        
    )
ft.app(target=main)

常用的 Button 類型

• TextButton： 最基本的按鈕，通常只顯示文字。
• IconButton：圖示按鈕。
• FilledButton： 填充式的按鈕，通常用於主要動作。
• FilledTonalButton： 和 FilledButton 差不多，視覺上較為柔和，比較常用在次要動作或Nav上。
• OutlinedButton： 邊框按鈕。
• ElevatedButton： 有立體效果的按鈕。
• FloatingActionButton : 浮動按鈕，通常出現在畫面右下角

Button 上常用的屬性

• text： 按鈕上顯示的文字。
• icon： 按鈕上的圖示。
• icon_color ：圖示的顏色
• color： 按鈕的顏色。
• bgcolor： 按鈕的背景顏色。
• tooltip：當游標移過時的提示文字
• disabled： 是否停用按鈕。
• url：點擊後想打開的網址
• url_target：點擊後打開網址的方式，和 HTML<a> 的 target 相似，有 blank、self 、parent 和 top 四種
• on_click： 點擊按鈕時觸發的函數。這裡我們沒有介紹，之後有用到時再提。

更多的 Button 介紹，請參考官網

執行的結果

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