devbox
笔触狂放9
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

Python 应用开发：Streamlit 布局篇（容器布局）

作者：笔触狂放9 | 2024-06-08 03:34:34

赞

踩

streamlit 布局

st.columns

以并列方式插入容器。

插入若干并排排列的多元素容器，并返回一个容器对象列表。

要在返回的容器中添加元素，可以使用 with 符号（首选）或直接调用返回对象的方法。请参见下面的示例。

列只能放置在其他列的内部，最多只能嵌套一级。

注意

侧边栏中的栏目不能放在其他栏目内。只有在应用程序的主区域才可以这样做。

您可以使用 with 符号向列中插入任何元素： 

  1. import streamlit as st
  2.  
  3. //设定3列
  4. col1, col2, col3 = st.columns(3)
  5.  
  6. //设定不同的列标题和展示的内容
  7. with col1:
  8.    st.header("A cat")
  9.    st.image("https://static.streamlit.io/examples/cat.jpg")
  10.  
  11. with col2:
  12.    st.header("A dog")
  13.    st.image("https://static.streamlit.io/examples/dog.jpg")
  14.  
  15. with col3:
  16.    st.header("An owl")
  17.    st.image("https://static.streamlit.io/examples/owl.jpg")

或者，你也可以直接调用返回对象的方法： 

  1. import streamlit as st
  2. import numpy as np
  3.  
  4. col1, col2 = st.columns([3, 1])
  5. data = np.random.randn(10, 1)
  6.  
  7. col1.subheader("A wide column with a chart")
  8. col1.line_chart(data)
  9.  
  10. col2.subheader("A narrow column with the data")
  11. col2.write(data)

st.container

插入一个多元素容器。

在应用程序中插入一个不可见的容器，用于容纳多个元素。例如，这样您就可以在应用程序中不按顺序插入多个元素。

要向返回的容器中添加元素，可以使用 with 符号（首选），或者直接调用返回对象的方法。请看下面的示例。

  1. #导入app包
  2. import streamlit as st
  3.  
  4. #对容器进行设定，这个就是用with，
  5. with st.container():
  6.    st.write("This is inside the container")
  7.  
  8.    # 可用于接受 "类文件 "对象的任何地方：
  9.    st.bar_chart(np.random.randn(50, 3))
  10.  
  11. st.write("This is outside the container")

不按顺序插入元素： 起始这里仅仅插入了一个容器，而容器内仅仅放入了文本信息，

  1. import streamlit as st
  2.  
  3. #将边界设定为真，
  4. container = st.container(border=True)
  5. #在容器内写相应的文字
  6. container.write("This is inside the container")
  7. #外部容器
  8. st.write("This is outside the container")
  9.  
  10. # 在容器内插入一些文字
  11. container.write("This is inside too")

利用高度制作网格：

  1. import streamlit as st
  2. #设置行列
  3. row1 = st.columns(3)
  4. row2 = st.columns(3)
  5. #遍历行列，并设置每一个容器的高度信息，宽度信息没有设定
  6. for col in row1 + row2:
  7.     tile = col.container(height=120)
  8. #插入一个表情
  9.     tile.title(":balloon:")

 使用高度为长内容创建滚动容器：

  1. import streamlit as st
  2.  
  3. #选择一个文本信息，用于装入下面的容器
  4. long_text = "Lorem ipsum. " * 1000
  5.  
  6. #这里我们设定一个高度为300的容器
  7. with st.container(height=300):
  8.     st.markdown(long_text)

 st.experimental_dialog

 用于创建模式对话框的函数装饰器。

使用 @st.experimental_dialog 装饰的函数将成为对话框函数。调用对话框函数时，Streamlit 会在应用程序中插入一个模式对话框。在对话框函数中调用的 Streamlit 元素命令会在模式对话框中呈现。

对话框函数在调用时可以接受参数。需要从更广泛的应用程序中访问的对话框中的任何值通常都应存储在会话状态中。

用户可以通过点击模式对话框外侧、点击右上角的 "X "或按键盘上的 "ESC "键来解除模式对话框。解除模式对话框不会触发应用程序的重新运行。要以编程方式关闭模态对话框，请在对话框函数中明确调用 st.rerun()。

st.experimental_dialog 继承了 st.experimental_fragment 的行为。当用户与对话框函数内创建的输入部件交互时，Streamlit 只重新运行对话框函数，而不是整个脚本。

不支持在对话框函数中调用 st.sidebar。

对话框代码可以与会话状态、导入模块以及在对话框外创建的其他 Streamlit 元素交互。请注意，这些交互会在多个对话框重新运行时叠加。您需要负责处理该行为的任何副作用。

 警告

一个对话框不能打开另一个对话框。一个脚本运行中只能调用一个对话框函数，这意味着在任何时候都只能打开一个对话框。

示例
下面的示例演示了 @st.experimental_dialog 的基本用法。在此应用程序中，点击 "A "或 "B "将打开一个模式对话框，提示您输入投票原因。在模式对话框中，点击 "提交 "将您的投票记录到会话状态并重新运行应用程序。这将关闭模式对话框，因为在重新运行全脚本时不会调用对话框功能。

  1. import streamlit as st
  2.  
  3. #先设定一个标题
  4. @st.experimental_dialog("Cast your vote")
  5.  
  6. #定义一个投票系统
  7. def vote(item):
  8. #写入问题，
  9.     st.write(f"Why is {item} your favorite?")
  10.     reason = st.text_input("Because...")
  11. #这里如果点击发送就会展示
  12.     if st.button("Submit"):
  13.         st.session_state.vote = {"item": item, "reason": reason}
  14.         st.rerun()
  15. #这里定义初始界面，进行分析
  16. if "vote" not in st.session_state:
  17.     st.write("Vote for your favorite")
  18.     if st.button("A"):
  19.         vote("A")
  20.     if st.button("B"):
  21.         vote("B")
  22. #这里我们将结果输入出你选的内容，并通过输入的的原因展示出来
  23. else:
  24.     f"You voted for {st.session_state.vote['item']} because {st.session_state.vote['reason']}"

弹出一个对话框 

 返回的结果

 

st.empty

插入单元素容器

在应用程序中插入一个容器，用于容纳单个元素。这样，您就可以在任意位置移除元素，或同时替换多个元素（使用子多元素容器）。

要在返回的容器中插入/替换/清除元素，可以使用符号或直接调用返回对象的方法。请看下面的示例。

 使用符号就地重写元素：

  1. import streamlit as st
  2. import time
  3.  
  4. with st.empty():
  5.     for seconds in range(60):
  6.         st.write(f"⏳ {seconds} seconds have passed")
  7.         time.sleep(1)
  8.     st.write("✔️ 1 minute over!")
  1. import streamlit as st
  2.  
  3. placeholder = st.empty()
  4.  
  5. # 用一些文本替换占位符：
  6. placeholder.text("Hello")
  7.  
  8. # 用图表替换文本：
  9. placeholder.line_chart({"data": [1, 5, 2, 6]})
  10.  
  11. # 用几个元素替换图表：
  12. with placeholder.container():
  13.     st.write("This is one element")
  14.     st.write("This is another")
  15.  
  16. # 清除所有这些元素：
  17. placeholder.empty()

st.expander

插入一个可展开/折叠的多元素容器。

在应用程序中插入一个可容纳多个元素的容器，用户可以展开或折叠该容器。折叠时，可见的只是提供的标签。

要向返回的容器中添加元素，可以使用 with 符号（首选）或直接调用返回对象的方法。请看下面的示例。

警告

目前，您不能将扩展器放在另一个扩展器内。扩展器不能进行嵌套。

您可以使用 with 符号在扩展器中插入任何元素

  1. import streamlit as st
  2. #插入一个图表
  3. st.bar_chart({"data": [1, 5, 2, 6, 2, 1]})
  4.  
  5. #设定一个扩张器在图表中
  6. with st.expander("See explanation"):
  7.     st.write('''
  8.         The chart above shows some numbers I picked for you.
  9.         I rolled actual dice for these, so they're *guaranteed* to
  10.         be random.
  11.     ''')
  12.     st.image("https://static.streamlit.io/examples/dice.jpg")

或者，你也可以直接调用返回对象的方法：这种方法比较好，因为不需要担心对齐的问题，可以直接对expender进行写入。

  1. import streamlit as st
  2.  
  3. st.bar_chart({"data": [1, 5, 2, 6, 2, 1]})
  4.  
  5. expander = st.expander("See explanation")
  6. expander.write('''
  7.     The chart above shows some numbers I picked for you.
  8.     I rolled actual dice for these, so they're *guaranteed* to
  9.     be random.
  10. ''')
  11. expander.image("https://static.streamlit.io/examples/dice.jpg")

st.popover

插入一个弹出式容器。

插入一个多元素容器作为弹出窗口。它由一个类似按钮的元素和一个在点击按钮时打开的容器组成。

打开和关闭弹出窗口不会触发重新运行。与打开的弹出窗口内的部件进行交互将重新运行应用程序，同时保持弹出窗口打开。点击弹出窗口外的部件将关闭弹出窗口。

要在返回的容器中添加元素，可以使用 "with "符号（首选），或者直接调用返回对象的方法。请参阅下面的示例。

警告

不得将一个弹出窗口放在另一个弹出窗口内，并不能支持嵌套。

您可以使用 with 符号在弹出窗口中插入任何元素：

 

  1. import streamlit as st
  2.  
  3. #用with 进行写入
  4. with st.popover("Open popover"):
  5.     st.markdown("Hello World 
    声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/笔触狂放9/article/detail/688265
    推荐阅读
    相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。