Curious George sees the world
 
Flet – Slider

Flet – Slider

Slider 也是一種和使用者互動的介面,使用者透過移動滑桿來選擇所需的值,這種 UI適用於固定範圍或連續的選擇,常用的地方有:音量、亮度的調整,有條件的篩選,像是價格的範圍等。

先來看一下程式的範例:


# Flet - Slider
# 2024-05-15
#  https://github.com/lcc728/flet/blob/main/ex_slider.py
import flet as ft

def main(page: ft.Page):
    page.title = "Slider 測試:"
    def slider_changed(e):
        value = round(e.control.value)
        sliderText.value = f"你選擇的值是:{value}"
        page.update()

    sliderTitle = ft.Text(f"請選擇一個值")
    slider = ft.Slider(
        min=0,
        max=100,
        divisions=50,
        label="請做出選擇",
        on_change=slider_changed
    )
    sliderText = ft.Text(f"你選擇的值是:")
    page.add( sliderTitle , slider, sliderText )

ft.app(target=main)


page.title: 這個是 page 中的屬性,定義 App 的 title 文字

Slider 的常用屬性和方法有:
  • min: slider 的起始值,在這裡我們將它設為 0
  • max: slider 的終止值,在這裡我們將它設為 100
  • divisions:上面定義的範圍中,要切割成多少,以我們的例子 (0-100),共切成 50 等份, 所以 1 等份是 2。
  • label:當你開始移動滑桿時所顯示的文字
  • on_change:當滑桿的值改變時所要做的事,在這裡我們會呼叫一個 function 名稱為 slider_changed

其它還有一些屬性,我們沒有在程式中使用,像是:

  • mouse_cursor:設定滑鼠在滑桿上方,游標的樣式
  • thumb_color:滑桿圓點的顏色
  • overlay_color:在移動滑桿時,滑桿圓點覆蓋的顏色

在 slider_changed 的 function 中,透過一個 e 來傳遞 Control Event 的物件,如此我們就能利用 e.control.value 來獲得 silder 的值,並將其放到 value 的變數裡,在這裡我們還用了 round * 的函式,因為我在測式時在 28 及 58 的位置,出現了小數,應該是程式在 100/ 50 的數學除法出了問題,因此為了避免小數的出現,所以用 round 來獲取整數值, round 採用的是 “銀行家捨入法”,是以整數做判斷,當整數是偶數時做的是 5捨6入, 奇數時做 4 捨 5 入。
* Slider 也有提供一個 round 的屬性,但不管怎麼設置,似乎都不是整數



round(1.5)  # 結果為 2 (前一位是奇數,逢 5 進位)
round(2.5)  # 結果為 2 (前一位是偶數,逢 5 捨去)


取得後把值放在我們定義的 sliderText 元件中,最後利用 page.update() 的方法更新頁面顯示 slider 最新的值

程式中,我們變數來建立所需的 widget,最後把這些變數放入 page.add() ,一起建立,這麼一來的好處是:靈活性更強了,我們可以隨時指定想要的值,就像在 function 中能變換 text widget 的值,但缺點是比起之前的寫法,程式碼會比較冗長一點。

執行結果

Flet slider 的執行結果

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

發表迴響