Flet 中的 Radio 元件,就是我們常說的單選核鈕,是一種重要的 UI 元素,專為實現單選功能而設計。這種元件通常與 RadioGroup 元件配套使用,以確保在同一組選項中,用戶只能選定一個選項。Radio 元件不僅提供了直觀的視覺,還能有效簡化複雜的選擇過程,大大提升了用戶體驗和界面的互動性。
我們先來看一下程式的範例:
# Flet Radio
# 2024-08-19
# https://github.com/lcc728/flet/blob/main/ex_radio.py
import flet as ft
def main(page: ft.Page):
def radio_change(e):
# showText.value = f"你最愛的文字編輯器是:{e.control.value}"
showText.value = f"你最愛的文字編輯器是:{radio_group.value}"
page.update()
radio_group = ft.RadioGroup(
value="",
content=ft.Column([
ft.Radio(value="VS Code", label="VS Code"),
ft.Radio(value="Sublime Text", label="Sublime Text"),
ft.Radio(value="Notepad++", label="Notepad++")
]),
on_change=radio_change)
showText = ft.Text("")
page.add(radio_group, showText)
ft.app(target=main)
在程式碼中 RadioGroup 有 2 個屬性及一個方法:
- value : 為預設的選項,需對應 radio 的 value,否則在初始時,這此單選核鈕將不會被選取
- content :這裡將放置我們的選項,通常第一個元件為排版的元件,像是 Column 或是 Row 之類的
- on_change : 當選項異動時呼叫 radio_change 的 function
content 裡面放的 radio 有這些設定:
- value: 單選鈕代表的值
- label: 單選鈕上的文字
其它還有一些屬性,請參考 官網 的說明
在 radio_change 中,我們將文字 showText 的值改為是 radio 的 value,再用 page.update 更新頁面,程式中我們註解了一行:
# showText.value = f"你最愛的文字編輯器是:{e.control.value}"
在等號的右邊有著 e.control.value :
- e 代表這次的事件
- control 是觸發這個事件的元件,在這裡就是那個被點選的 radio
- value 是這元件的值
因此我們就能直接獲得 user 點選的值,這樣的寫法和 radio_group.value 沒有什麼不同,只是 radio_group.value 通常用在獲得初始值時使用,而 e.control.value 比較適合事件發生時使用,因為 e.control.value 感覺較貼近真實情況。
執行結果:
選擇前
選擇後
Source Code:https://github.com/lcc728/flet/blob/main/ex_radio.py
Pingback: Flet – Temperature_conversion – George的生活點滴