原文：
www.kdnuggets.com/2020/11/streamlit-better-data-apps-new-layout-options.html
评论
由 Streamlit 高级软件工程师 Austin Chen 撰写
1. 谷歌网络安全证书 - 快速进入网络安全职业。
2. 谷歌数据分析专业证书 - 提升你的数据分析技能
3. 谷歌 IT 支持专业证书 - 支持你的组织的 IT
Streamlit 完全以简洁为目标。它是纯 Python。你的脚本从上到下运行。你的应用程序也从上到下呈现。完美，对吧？嗯...并非如此。用户注意到我们的思路有点过于垂直。大家对网格感到不满。社区呼吁列的支持。热心的朋友们更倾向于灵活性。你明白了。
所以，移动到一边，垂直布局。给...水平布局留点空间！以及更多的布局原语。还有一些语法糖。实际上，今天我们介绍了四个新的布局功能，让你对应用程序的展示有更多的控制。
-
st.beta_columns: 并排列，你可以在其中插入 Streamlit 元素 -
st.beta_expander: 一个展开/折叠小部件，用于选择性地显示内容 -
st.beta_container: 布局的基本构建块 -
with column1: st.write("hi!"): 语法糖，用于指定使用哪个容器
st.beta_columns 的作用类似于我们喜爱的 st.sidebar，不过现在你可以将列放置在应用程序的任何位置。只需将每个列声明为一个新变量，然后你就可以添加任何来自 Streamlit 库的元素或组件。
使用列来并排比较事物：
col1, col2 = st.beta_columns(2)
original = Image.open(image)
col1.header("Original")
col1.image(original, use_column_width=True)
grayscale = original.convert('LA')
col2.header("Grayscale")
col2.image(grayscale, use_column_width=True)
实际上，通过在循环中调用 st.beta_columns ，你可以获得网格布局！
st.title("Let's create a table!")
for i in range(1, 10):
cols = st.beta_columns(4)
cols[0].write(f'{i}')
cols[1].write(f'{i * i}')
cols[2].write(f'{i * i * i}')
cols[3].write('x' * i)
你甚至可以做到相当复杂（这对宽屏显示器来说可能很棒！）这是一个例子，展示了如何将可变宽度列与宽模式布局结合使用：
# Use the full page instead of a narrow central column
st.beta_set_page_config(layout="wide")
# Space out the maps so the first one is 2x the size of the other three
c1, c2, c3, c4 = st.beta_columns((2, 1, 1, 1))
以防你在想：是的，列在各种设备上都很美观，并且会根据移动设备和不同浏览器宽度自动调整大小。
现在我们已经最大化了水平空间，试试 st.beta_expander，来最大化你的 垂直 空间！你们中的一些人可能之前使用过 st.checkbox，而 expander 是一个更漂亮、更高效的替代品????
这是隐藏次要控件的好方法，或者提供用户可以切换的更长解释！
如果你稍微眯起眼睛，st.beta_columns、st.beta_expander 和 st.sidebar 看起来有点相似。它们都返回 Python 对象，这些对象允许你调用所有的 Streamlit 函数。我们给这些对象起了一个新名字：容器。既然直接创建容器会很方便，你可以做到！
st.beta_container 是一个构建块，帮助你组织你的应用。就像 st.empty 一样，st.beta_container 允许你留出一些空间，然后再无序地写入内容。但虽然对同一个 st.empty 的后续调用会 替换 它内部的项目，后续对同一个 st.beta_container 的调用会 追加 到其中。再次强调，这与你熟悉并喜欢的 st.sidebar 一样有效。
最后，我们引入了一种新语法，帮助你管理所有这些新容器：with container。它是如何工作的？好吧，不是直接在容器上调用函数...
my_expander = st.beta_expander()
my_expander.write('Hello there!')
clicked = my_expander.button('Click me!')使用容器作为 上下文管理器，并调用 st. 命名空间中的函数！
my_expander = st.beta_expander()
with my_expander:
'Hello there!'
clicked = st.button('Click me!')为什么？这样，你可以用纯 Python 编写自己的组件，并在不同的容器中重用它们！
def my_widget(key):
st.subheader('Hello there!')
clicked = st.button("Click me " + key)
# This works in the main area
clicked = my_widget("first")
# And within an expander
my_expander = st.beta_expander("Expand", expanded=True)
with my_expander:
clicked = my_widget("second")
# AND in st.sidebar!
with st.sidebar:
clicked = my_widget("third")
最后一点：with 语法允许你将自定义组件放在任何你喜欢的容器中。查看社区成员 Sam Dobson 的这个应用，它在应用本身旁边的列中嵌入了 Streamlit Ace 编辑器——用户可以编辑代码并实时查看更改！
要开始使用布局功能，只需升级到最新版本的 Streamlit (v0.68)。
$ pip install streamlit --upgrade接下来会有关于内边距、对齐、响应式设计和 UI 自定义的更新。敬请关注，但最重要的是，让我们知道你对布局的需求。有什么问题？建议？还是有一个很酷的应用想展示？加入我们的 Streamlit 社区论坛——我们迫不及待想看看你创造的东西????
向 Streamlit 社区和创作者们致敬，他们的反馈真正塑造了布局的实现：Jesse、José、Charly 和 Synode —— 特别感谢 Fanilo 为了寻找漏洞、建议 API 并整体尝试我们的一些原型所付出的额外努力。非常感谢你们 ❤️
简介：Austin Chen 是 Streamlit 的高级软件工程师。
原文。经许可转载。
相关：
-
构建一个使用 TensorFlow 和 Streamlit 生成逼真面孔的应用
-
使用 Streamlit Sharing 部署 Streamlit 应用
-
使用 Docker Swarm、Traefik 和 Keycloak 在 AWS 上部署安全且可扩展的 Streamlit 应用