Curious George sees the world
 
Flet – Radio

Flet – Radio

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

One comment

  1. Pingback: Flet – Temperature_conversion – George的生活點滴

發表迴響