Flet – Slider

George

4 個月前

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 的值，但缺點是比起之前的寫法，程式碼會比較冗長一點。

執行結果

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