Streamlit 學習筆記 : 使用者輸入元件 (十) 選項滑桿

今天繼續測試 Streamlit 的使用者輸入元件, 進度來到選項滑桿函式 st.select_slider().

本系列所有測試文章參考 :

# Streamlit 學習筆記索引

呼叫 st.select_slider() 函式並傳入必要參數 label 會建立一個單行文字輸入框, 其參數結構如下 : 

st.select_slider(label, options, value=None, format_func=str, key=None, help=None, on_change=None, args=None, kwargs=None, disabled=False, label_visibility="visible")

此函式有 2 個必要參數 : label 與 options, 此元件功能相當於是單選圓鈕或下拉式選單與滑桿的組合, 但選項滑桿的傳回值 options 串列中的選項 (預設傳回第一個選項), 可能是數值或字串 (視 options 串列元素型態而定), 所以選項滑桿沒有 step 參數; 而數值滑桿傳回的是數值 (有 step 參數).

參數說明如下表 :

st.select_slider() 之參數	說明
label	元件的標籤文字。
options	可選項目清單（list 或 tuple）。
value	預設選取的值或值範圍 (start, end) 。預設為第一個選項。
format_func	用來轉換選項顯示內容的函式，預設為 str。
key	在 st.session_state 中的鍵值。若未提供，Streamlit 會自動產生。
help	當滑鼠移到元件上方時顯示的說明文字。
on_change	當值變動時要呼叫的函式。
args	傳遞給 on_change 回呼函式的位置參數（tuple）。
kwargs	傳遞給 on_change 回呼函式的關鍵字參數（dict）。
disabled	若為 True，元件會被停用（無法互動）。
label_visibility	設定標籤可見性：可選 "visible" (預設)、"hidden"、"collapsed"。

例如 : 

測試 1 : 只傳入必要參數 label 與 options [看原始碼] 

# st-select_slider-test-1.py

import streamlit as st

label='請選擇最喜歡的水果 : '

options=['蘋果', '葡萄', '桃子', '芒果']

selection=st.select_slider(label, options)

st.write("你選的是：", selection)

結果如下 : 

此例有四個選項, 上圖顯示初始化時 st.select_slider() 預設傳回第一個選項 (蘋果), 當拖曳滑桿至四個均分位置上時就會傳回該選項值.

上例傳回的選項值是中文水果名稱, 如果想要顯示中文但傳回英文水果名稱可以利用 format_func 參數指定一個自訂函式來做格式轉換, 例如 : 

測試 2 : 利用 format_func 參數轉換選項之顯示字串 [看原始碼] 

# st-select_slider-test-2.py

import streamlit as st

label='請選擇最喜歡的水果 : '

options=['apple', 'grape', 'peach', 'mango']

fruits={'apple': '蘋果', 'grape': '葡萄', 'peach': '桃子', 'mango': '芒果'}

selection=st.select_slider(label, options, format_func=lambda x: fruits[x])

st.write("你選的是：", selection)

此例的 options 串列改用英文水果名稱以便 st.select_slider() 傳回英文, 然後用一個字典 fruits 來將英文名稱轉成中文名稱, 此處 format_func 參數所指的函式為 lambda 函式, 當滑桿滑到某選項位置時, 該選項值 (英文名稱) 會傳給 x 作為鍵去查找 fruits 字典之中文值傳回給元件顯示, 結果如下 : 

上面顯示中文傳回英文的範例也可以用 on_change 事件來達成, 但 options 串列回歸使用中文名稱, 當拖曳滑桿時會觸發 on_change 事件去呼叫指定函式將元件傳回的中文選項值轉換為英文, 例如 : 

測試 3 : 利用 on_change 與 key 參數轉換選項之傳回值 [看原始碼] 

# st-select_slider-test-3.py

import streamlit as st

def on_slider_change():

    selected=st.session_state['fruit_choice']  # 取得追蹤之 key 的狀態

    fruits={'蘋果': 'apple', '葡萄': 'grape', '桃子': 'peach', '芒果': 'mango'}

    st.write(f'你選的是：{fruits[selected]}')

label='請選擇最喜歡的水果 : '

options=['蘋果', '葡萄', '桃子', '芒果']

st.select_slider(label, options, key='fruit_choice', on_change=on_slider_change)

此例設定了 key 參數, 當滑桿變動時其值會與 key 為鍵記錄到 Streamlit 的 st.session_state 全域字典中, 這樣在 on_change 事件處理函式中就可以用 key 鍵取得目前的滑桿值 (中文), 然後從 fruits 字典中取得其英文名稱, 結果如下 :

下面範例是測試在 on_change 事件發生時利用 args 參數攜帶引數給事件處理函式, 例如 : 

測試 4 : 利用 args 參數攜帶引數給 on_change 事件處理函式 [看原始碼] 

# st-select_slider-test-4.py

import streamlit as st

def on_slider_change(name):

    selected=st.session_state['fruit_choice']  # 取得追蹤之 key 的狀態

    fruits={'蘋果': 'apple', '葡萄': 'grape', '桃子': 'peach', '芒果': 'mango'}

    st.write(f'{name} 選的是：{fruits[selected]}')

label='請選擇最喜歡的水果 : '

options=['蘋果', '葡萄', '桃子', '芒果']

st.select_slider(label, options, key='fruit_choice', on_change=on_slider_change, args=('Tony',))

此例將名字用 args 元組傳給 on_change 事件處理函式, 結果如下 : 

上例也可以改成用 kwargs 參數來傳送引數 :

測試 5 : 利用 kwargs 參數攜帶引數給 on_change 事件處理函式 [看原始碼] 

# st-select_slider-test-5.py

import streamlit as st

def on_slider_change(name):

    selected=st.session_state['fruit_choice']  # 取得追蹤之 key 的狀態

    fruits={'蘋果': 'apple', '葡萄': 'grape', '桃子': 'peach', '芒果': 'mango'}

    st.write(f'{name} 選的是：{fruits[selected]}')

label='請選擇最喜歡的水果 : '

options=['蘋果', '葡萄', '桃子', '芒果']

st.select_slider(label, options, key='fruit_choice', on_change=on_slider_change, kwargs={'name': 'Tony'})

結果如下 :