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