Streamlit 學習筆記 : 使用者輸入元件 (十三) 顏色選擇器

本篇旨在測試 Streamlit 的顏色選擇器函式 st.color_picker().

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

# Streamlit 學習筆記索引

呼叫 st.color_picker() 函式並傳入必要參數 label 會建立一個時間選擇器, 其參數結構如下 : 

st.color_picker(label, value='#000000', key=None, help=None, on_change=None, args=None, kwargs=None, disabled=False, label_visibility="visible")

st.color_picker 傳回值是格式為 "#RRGGBB" 的 16 進位色碼, 其中 RR(紅)/GG(綠)/BB (藍) 為 0~F 的字元, 例如 '#FF0000' 為紅色. 

參數說明如下表 :

st.color_picker() 參數	說明
label	元件標籤文字，會顯示在選色器旁。
value	預設顏色，需為 HEX 字串格式（如 "#ff0000"），預設為 "#000000"。
key	元件的唯一識別字串，用於 st.session_state。
help	滑鼠移至元件上方時顯示的提示訊息。
on_change	使用者改變選色時觸發的回呼函式。
args	傳遞給 on_change 回呼函式的位置參數（tuple）。
kwargs	傳遞給 on_change 回呼函式的關鍵字參數（dict）。
disabled	設為 True 時會讓選色器無法互動。
label_visibility	控制標籤可見性，可選 "visible"（預設）、"hidden" 或 "collapsed"。

例如 : 

測試 1 : 預設的顏色選擇器 [看原始碼]    

# st-color_picker-test-1.py

import streamlit as st

selected=st.color_picker('請選擇顏色 :')

if selected:

    st.write(selected)

預設選取黑色 (#000000), 按色塊會彈出調色盤與色碼輸入框, 可以直接在調色盤上點選顏色, 或在下方輸入框填入 16 進位色碼, 按輸入框右邊的按鈕可以切換 HEX/RGB/HSL 色彩模式 :

選取顏色後再按一次色塊即可更改顏色並關閉調色盤 : 

可以用 value 設定預設選取顏色, 例如 : 

測試 2 : 參數 value 用法 [看原始碼] 

# st-color_picker-test-2.py

import streamlit as st

selected=st.color_picker('請選擇顏色 :', value='#1177bb')

if selected:

    st.write(selected)

結果如下 :

下面是 on_change 與 args 參數測試範例 :

測試 3 : 參數 on_change 與 args 用法 [看原始碼] 

# st-color_picker-test-3.py

import streamlit as st

def on_color_change(part):

    color_code=st.session_state['color_code']

    st.write(f'{part} 顏色已被修改為 : {color_code}')

part=st.text_input('請輸入修改部分：', '背景')

st.color_picker(

    '請選擇顏色 :',

    key='color_code',

    on_change=on_color_change,

    args=(part,)

    )

此例

選好顏色再按一次色塊確定變更顏色 : 

上例也可以用 kwargs 參數來達成 : 

測試 4 : 參數 on_change 與 kwargs 用法 [看原始碼] 

# st-color_picker-test-4.py

import streamlit as st

def on_color_change(part):

    color_code=st.session_state['color_code']

    st.write(f'{part} 顏色已被修改為 : {color_code}')

part=st.text_input('請輸入修改部分：', '背景')

st.color_picker(

    '請選擇顏色 :',

    key='color_code',

    on_change=on_color_change,

    kwargs={'part': part}

    )

結果與上面相同.