Flet – Radio

George

4 個月前

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