streamlit默认的样式有时并不符合自己的要求。比如手机上的布局太浪费空间,我们希望一屏能放下所有的元素,本文演示了如何操作

效果图

代码(srv.py)

import streamlit as st  #1.31.1
import cv2
import numpy as np
import glob
import os
import sys
import time, datetime
import cv2def get_image(kwargs):'''生成图片,删除旧图片'''image=np.ones((320,480,3),dtype=np.uint8)*128current_time = datetime.datetime.now()date_format ='%Y%m%d%H%M%S'time_string = current_time.strftime(date_format)for name in glob.glob("img_cache/*.png"):filepath=os.path.basename(name).split(".")[0]date_object = datetime.datetime.strptime(filepath, date_format)if (current_time-date_object).total_seconds()>60:os.remove(name)font = cv2.FONT_HERSHEY_SIMPLEX    label=[time_string]for k,v in kwargs.items():if v:label.append(k)cv2.putText(image, "-".join(label), (1, 32),font, 0.6, (255, 255, 255),1, cv2.LINE_AA)ok, img = cv2.imencode('.png', image, [cv2.IMWRITE_JPEG_QUALITY,20])filename="img_cache/{}.png".format(time_string)with open(filename,"wb") as f:f.write(img.tobytes())return filenamedef set_customer_style():#手机上column依然保持在一行,而不是一列st.write('''<style>[data-testid="column"] {width: calc(16.6666% - 1rem) !important;flex: 1 1 calc(16.6666% - 1rem) !important;min-width: calc(16.6666% - 1rem) !important;}</style>''', unsafe_allow_html=True)#去掉顶部的padding,使得在手机上的空间更紧致(配合--client.toolbarMode="minimal"使用)st.write('''<style>[data-testid="stAppViewBlockContainer"] {padding: 18px;}</style>''', unsafe_allow_html=True)    def mainContent(): # 初始化状态if 'last_image' not in st.session_state:st.session_state['last_image'] = None# 设置样式set_customer_style()    # UI布局with st.container(border=True):        st.write("云台控制")st.button(':arrow_up:',use_container_width=True,kwargs={'type':"up"},key="up_btn")col3,col4 = st.columns(2)            with col3:st.button(':arrow_left:',use_container_width=True,kwargs={'type':"left"},key="left_btn")   with col4:    st.button(':arrow_right:',use_container_width=True,kwargs={'type':"right"},key="right_btn")        st.button(':arrow_down:',use_container_width=True,kwargs={'type':"down"},key="down_btn")  with st.container(border=True):col1,col2 = st.columns(2)  with col1:preset = st.selectbox('预置点',["%d"%i for i in range(1,12)],disabled =False)with col2:st.button('跳转',kwargs={'type':"down"},key="goto_btn",use_container_width=True)            with st.container(border=True):placeholder = st.empty()with placeholder.container():st.image("empty.jpg")# 事件处理逻辑if st.session_state.up_btn or st.session_state.down_btn:st.session_state["last_image"]=get_image({"up_btn":st.session_state.up_btn,"down_btn":st.session_state.down_btn})if st.session_state.left_btn or st.session_state.right_btn:st.session_state["last_image"]=get_image({"left_btn":st.session_state.left_btn,"right_btn":st.session_state.right_btn})if st.session_state.goto_btn:st.session_state["last_image"]=get_image({"goto_btn":st.session_state.goto_btn,"preset":preset})if st.session_state["last_image"]:with placeholder.container():st.image(st.session_state["last_image"])if __name__ == "__main__":st.set_page_config(layout="centered",page_title="云台控制",page_icon=":shark:")mainContent()

运行

streamlit.exe run srv.py --client.toolbarMode="minimal"