此前所測試的 Streamlit 使用者輸入元件函式若逐一呼叫, 所建立的元件會在網頁中由上而下堆疊排列, 考量網頁介面 (Web UI) 操作的方便性與美觀等因素, Streamlit 提供了許多容器與版面配置元件可用來對這些元件進行適切的配置, 如下表所示 :
| 元件 | 類型 | 說明 |
|---|---|---|
| st.columns() | 容器 | 建立多欄式佈局，回傳多個可操作的 column 區塊 (tuple)。 |
| st.container() | 容器 | 建立一個可包含其他元素的區塊，支援動態更新內容。 |
| st.empty() | 容器 | 建立一個暫時的空白位置，可用於後續更新顯示內容。 |
| st.sidebar | 容器/版面 | 側邊欄容器，適合放置選單、選項、控制元件等。 |
| st.tabs() | 版面 | 建立多個分頁，每個分頁有獨立的內容顯示區域。 |
| st.expander() | 容器 | 可展開與收合的內容區域，適合隱藏次要資訊。 |
| st.container().columns() | 容器/版面 | 在 container 中建立欄位，實現更靈活的版面配置。 |
本篇旨在測試 Streamlit 的多欄容器函式 st.columns(), 此元件既是一個不可見的容器 (無框線), 也是一個水平排版元件, 可用來配置網頁版面.
st.columns(spec, gap="small")
參數說明如下表 :
| st.columns() 參數 | 說明 |
|---|---|
| spec | 必要參數, 可以是一個整數 (欄位數量) 或串列 (欄寬比例) |
| gap | 設定欄位之間的間距, 可為 "small"（預設), "medium", "large" |
st.columns() 的傳回值為容器物件 DeltaGenerator 的元組 (tuple), 每個容器代表一個欄位, 可以使用兩種語法在每個欄位中放置 Streamlit 的其他 UI 元件, 第一種是用多欄容器物件呼叫 Streamlit 的各種 UI 函式 :
col1, col2=st.columns(2) # 傳回兩欄容器元件
col1.subheader('第一欄') # 第一欄放置標題
col1.image('example.jpg') # 第一欄放置圖片
col2.subheader('第二欄') # 第二欄放置標題
col2.image('example.jpg') # 第二欄放置圖片
第二種語法是使用 with 結構, 在區塊內使用 st.xxx() 呼叫 UI 函式 :
with col1:
st.subheader('第一欄') # 第一欄放置標題
st.image('example.jpg') # 第一欄放置圖片
with col2:
st.subheader('第二欄') # 第二欄放置標題
st.image('example.jpg') # 第二欄放置圖片
多欄容器為響應式 (responsive) 設計, 在不同裝置上會地自動調整版面配置.
# st-columns-test-1.py
import streamlit as st
col1, col2=st.columns(2) # 傳回兩欄容器元件
col1.subheader('第一欄') # 第一欄放置標題
col1.image('Lenna.jpg') # 第一欄放置圖片
col2.subheader('第二欄') # 第二欄放置標題
col2.image('Lenna.jpg') # 第二欄放置圖片
結果如下 :
此圖 Lenna.jpg 解析度為 316x316, 可見圖片以原尺寸放在網頁中央的兩個欄位內. 如果將瀏覽器寬度縮小來模擬手機尺寸的話, 這時多欄容器會自動改成用兩列 (row) 形式放置元件, 此即所謂響應式 (responsive) 功能 :
下面是用 with 結構的第二種寫法 :
測試 1-2 : st.columns() 的第二種用法 [看原始碼]
# st-columns-test-1-2.py
import streamlit as st
col1, col2=st.columns(2) # 傳回兩欄容器元件
with col1:
st.subheader('第一欄') # 第一欄放置標題
st.image('Lenna.jpg') # 第一欄放置圖片
with col2:
st.subheader('第二欄') # 第二欄放置標題
st.image('Lenna.jpg') # 第二欄放置圖片
結果與上面相同.
參數 spec 除了可以傳入整數欄位外, 也可以傳入表示欄寬比例的整數串列, 例如 :
測試 1-3 : spec 參數傳入表示欄寬比例的串列 [看原始碼]
# st-columns-test-1-3.py
import streamlit as st
col1, col2=st.columns([2, 1]) # 傳回兩欄容器元件 (欄寬比例為 2:1)
with col1:
st.subheader('第一欄') # 第一欄放置標題
st.image('Lenna.jpg') # 第一欄放置圖片
with col2:
st.subheader('第二欄') # 第二欄放置標題
st.image('Lenna.jpg') # 第二欄放置圖片
此例 spec 參數傳入表示欄寬比例為 2:1 的 [2, 1] 串列, 結果如下 :
可見第一欄因為欄寬較大, 圖片尺寸從 316x316 放大為 555x555.
下面範例測試 gap 參數效果 :
測試 1-4 : 用關鍵字參數 gap 設定欄位間距 [看原始碼]
# st-columns-test-1-4.py
import streamlit as st
col1, col2=st.columns(2) # 傳回兩欄容器元件
with col1:
st.subheader('第一欄') # 第一欄放置標題
st.image('Lenna.jpg') # 第一欄放置圖片
with col2:
st.subheader('第二欄') # 第二欄放置標題
st.image('Lenna.jpg') # 第二欄放置圖片
col3, col4=st.columns(2, gap='large') # 傳回兩欄容器元件
with col3:
st.subheader('第一欄') # 第一欄放置標題
st.image('Lenna.jpg') # 第一欄放置圖片
with col4:
st.subheader('第二欄') # 第二欄放置標題
st.image('Lenna.jpg') # 第二欄放置圖片
結果如下 :
可見下方的 col3, col4 的間隔較上方的 col1, col2 大.
沒有留言 :
張貼留言