如何在 Streamlit 中设置布局大小？答案

【问题标题】：How Can I set layout size in Streamlit?如何在 Streamlit 中设置布局大小？
【发布时间】：2022-01-18 19:48:42
【问题描述】：

是否可以在 Streamlit 布局中设置高度和宽度？我知道可以设置 layout='wide' 和 'centered' 但这对我来说还不够。使用宽时地图太大，使用居中时太小。当我设置尺寸叶地图时，布局和地图之间有一个空白区域。我想设置这个大小不带空格。

宽：https://gyazo.com/0af46f5efc80ff079410a9aeae1d38b0 居中：https://gyazo.com/22bac904af28f6ebed0e9989e131dcf2

【问题讨论】：

这可能会有所帮助。 discuss.streamlit.io/t/custom-render-widths/81/8

标签： python folium streamlit

【解决方案1】：

Streamlit 地图只是 st.pydeck_chart 的包装。这有助于轻松制作地图图表，但也有一些限制，例如设置高度和宽度。

如果您想控制所呈现地图的高度和宽度，最好的选择是使用具有高度和宽度参数的st.pydeck_chart。

这是使用st.pydeck_chart 创建地图的代码：

import streamlit as st
import pandas as pd
import numpy as np
import pydeck as pdk


height = 500
width = 500

df = pd.DataFrame(
    np.random.randn(1000, 2) / [50, 50] + [37.76, -122.4],
    columns=['lat', 'lon'])

st.pydeck_chart(pdk.Deck(
     map_style='mapbox://styles/mapbox/light-v9',
     initial_view_state=pdk.ViewState(
         latitude=37.76,
         longitude=-122.4,
         zoom=11,
         height=height,
         width=width
     ),
     layers=[
         pdk.Layer(
             'ScatterplotLayer',
             data=df,
             get_position='[lon, lat]',
             get_color='[200, 30, 0, 160]',
             get_radius=100,
             auto_highlight=True
         ),
     ],
 ))

height=500 和 width=500 的输出：

height=100 和 width=100 的输出：

注意 - st.map 在地图顶部创建散点图，但使用 st.pydeck_chart 为我们在地图创建和设计方面提供了更多的灵活性和选择。

【讨论】：

【解决方案2】：

只需在您的 app.py 中调用此函数 _max_width_(80)，您就可以始终以宽模式启动。更多关于Custom Render Widths

def _max_width_(prcnt_width:int = 75):
    max_width_str = f"max-width: {prcnt_width}%;"
    st.markdown(f""" 
                <style> 
                .reportview-container .main .block-container{{{max_width_str}}}
                </style>    
                """, 
                unsafe_allow_html=True,
    )

【讨论】：