首页 > 其他分享 >Streamlit 讲解专栏(九):深入探索布局和容器

Streamlit 讲解专栏(九):深入探索布局和容器

时间:2023-08-15 18:03:14浏览次数:40  
标签:容器 元素 st 插入 专栏 讲解 Streamlit streamlit



文章目录

  • 1 前言
  • 2 st.sidebar - 在侧边栏增添交互元素
  • 2.1 将交互元素添加至侧边栏
  • 2.2 示例:在侧边栏添加选择框和单选按钮
  • 2.3 特殊元素的注意事项
  • 3 st.columns - 并排布局多元素容器
  • 3.1 插入并排布局的容器
  • 3.2 嵌套限制
  • 4 st.tabs - 以选项卡形式布局多元素容器
  • 4.1 插入选项卡布局的容器
  • 4.2 条件渲染的注意事项
  • 5 st.expander - 可展开/折叠的多元素容器
  • 5.1 插入可展开/折叠的容器
  • 5.2 嵌套限制
  • 6 st.container - 插入多元素容器
  • 6.1 插入多元素容器
  • 6.2 乱序插入元素
  • 7 st.empty - 插入单元素容器
  • 7.1 插入单元素容器
  • 7.2 替换多个元素,然后清除它们
  • 8 结语


Streamlit 讲解专栏(九):深入探索布局和容器_数据看板

1 前言

欢迎来到最全Streamlit教程专栏系列!作为这个专栏系列的作者,我非常高兴能够与大家一起探索 Streamlit 中的布局和容器功能。如果您之前已经跟随我的专栏,您一定对 Streamlit 的强大之处有所了解。如果您是第一次接触这个系列,那么在本文中,我将为您介绍一些关于这个专栏的背景和内容。

最全Streamlit教程专栏致力于帮助开发者快速掌握 Streamlit,这是一个令人兴奋且极具创造力的工具,可用于构建数据驱动的 Web 应用程序。我深知在应用开发中,界面的设计和布局对于用户体验至关重要。因此,我决定从专栏的第一篇文章开始,就着重介绍 Streamlit 中的布局和容器功能,因为它们是打造精美且功能完备的应用所必不可少的。

在本系列的之前的文章中,我们已经探讨了 Streamlit 的基础知识、数据可视化和交互等主题。现在,我将带您深入了解和学习有关布局和容器的重要内容。从 st.sidebar 的侧边栏布局,到 st.columns 的多列布局;从 st.tabs 让您的应用模块化,到 st.expander 的内容隐藏和显示;再到 st.container 的自定义布局和 st.empty 的占位功能,我将逐一为您介绍和演示这些组件的用法和优势。

在本文中,我们将从头到尾探索 Streamlit 布局和容器的功能,帮助您更好地理解如何在您的应用程序中优雅地组织内容,使之既美观又易于使用。无论您是刚刚入门 Streamlit,还是想要进一步提升应用的用户体验,本文都将为您提供有价值的知识和技巧。

感谢您选择阅读最全Streamlit教程专栏系列的新文章,希望您在本文中能够找到对于布局和容器的深入见解。让我们一起开始这个令人兴奋的学习之旅吧!

2 st.sidebar - 在侧边栏增添交互元素

在开发应用程序时,交互性是吸引用户的关键之一。而为了更好地组织和展示这些交互元素,Streamlit 提供了强大的 st.sidebar 组件。借助于这个组件,您可以轻松地将小部件(widgets)放置在应用页面的侧边栏位置。不仅如此,通过将小部件集中放置在侧边栏,还可以让用户专注于应用的核心内容,提供更好的用户体验。

2.1 将交互元素添加至侧边栏

您可以使用对象表示法(object notation)或者“with”语法将元素添加到 st.sidebar。两者的效果是一样的,只是语法不同。以下是两种添加元素的方式:

# 使用对象表示法
st.sidebar.[element_name]

# "with" 语法
with st.sidebar:
    st.[element_name]

通过将元素添加至 st.sidebar,这些元素会被固定在侧边栏的左侧,让用户可以轻松地浏览和交互。

另外,侧边栏是可以调整大小的!您只需拖动侧边栏右边界,就可以自由地调整其宽度,以适应不同的布局需要。

2.2 示例:在侧边栏添加选择框和单选按钮

以下是一个示例,展示了如何在侧边栏中添加选择框(selectbox)和单选按钮(radio button):

import streamlit as st

# 使用对象表示法添加选择框
add_selectbox = st.sidebar.selectbox(
    "您希望如何联系您?",
    ("电子邮件", "家庭电话", "移动电话")
)

# 使用“with”语法添加单选按钮
with st.sidebar:
    add_radio = st.radio(
        "选择一种运输方式",
        ("标准(5-15天)", "快递(2-5天)")
    )

Streamlit 讲解专栏(九):深入探索布局和容器_数据看板_02

2.3 特殊元素的注意事项

需要注意的是,除了 st.echo、st.spinner 和 st.toast 这三个元素外,其他元素都支持对象表示法。对于这三个元素,您需要使用“with”语法。以下是如何在侧边栏中添加 st.echo 和 st.spinner 的示例:

import streamlit as st
import time

with st.sidebar:
    with st.echo():
        st.write("这段代码将在侧边栏中显示。")

    with st.spinner("加载中..."):
        time.sleep(5)
    st.success("完成!")

Streamlit 讲解专栏(九):深入探索布局和容器_数据可视化_03

通过充分利用 st.sidebar,您可以将交互元素整齐地组织在应用的侧边栏,提供更加直观和便捷的用户体验。

3 st.columns - 并排布局多元素容器

在创建应用程序时,有时您可能需要将多个元素以并排列的方式展示,以达到更好的布局效果。Streamlit 提供了 st.columns 组件,可以帮助您在应用页面中创建多个多元素容器,并将它们以并排的方式布局。这些容器可以被认为是一列一列的,可以包含不同类型的元素,例如文本、图像、图表等。值得注意的是,st.columns 返回一个容器对象的列表,可以在这些容器对象中添加元素。

3.1 插入并排布局的容器

通过调用 st.columns,您可以插入多个多元素容器,并将它们布局为并排的形式。返回的是一个容器对象的列表,每个对象都可以用来添加元素。您可以选择使用“with”语法(更推荐)或者直接在容器对象上调用方法来添加元素。以下是示例代码:

import streamlit as st

col1, col2, col3 = st.columns(3)

with col1:
   st.header("一只猫")
   st.image("https://static.streamlit.io/examples/cat.jpg")

with col2:
   st.header("一只狗")
   st.image("https://static.streamlit.io/examples/dog.jpg")

with col3:
   st.header("一只猫头鹰")
   st.image("https://static.streamlit.io/examples/owl.jpg")

Streamlit 讲解专栏(九):深入探索布局和容器_数据看板_04

或者您也可以直接在容器对象上调用方法:

import streamlit as st
import numpy as np

col1, col2 = st.columns([3, 1])
data = np.random.randn(10, 1)

col1.subheader("一个宽容器,含有图表")
col1.line_chart(data)

col2.subheader("一个窄容器,含有数据")
col2.write(data)

Streamlit 讲解专栏(九):深入探索布局和容器_数据可视化_05

3.2 嵌套限制

需要注意的是,嵌套多元素容器只支持一层。也就是说,您可以将多个容器放置在主要内容区域内,但不能将多元素容器嵌套在其他多元素容器内。此外,请注意,不能将多元素容器嵌套在侧边栏的容器内,这只能在应用程序的主要区域中实现。

通过合理地运用 st.columns,您可以轻松地实现并排布局的多元素容器,提供更清晰和直观的界面效果,增强用户体验。

4 st.tabs - 以选项卡形式布局多元素容器

在应用程序的设计中,组织相关内容并实现易于导航的界面布局非常重要。Streamlit 提供了 st.tabs 组件,可以帮助您将多个多元素容器作为选项卡(tabs)放置在应用页面中。选项卡可以让用户轻松地在不同的相关内容之间进行切换,为用户提供更好的内容浏览体验。

4.1 插入选项卡布局的容器

通过调用 st.tabs,您可以插入多个多元素容器作为选项卡。每个选项卡都代表一组相关内容。返回的是一个容器对象的列表,每个对象都可以用来添加元素。与之前一样,您可以选择使用“with”语法或者直接在容器对象上调用方法来添加元素。需要注意的是,每个选项卡的所有内容都会被一次性发送并渲染在前端。

以下是示例代码:

import streamlit as st

tab1, tab2, tab3 = st.tabs(["猫", "狗", "猫头鹰"])

with tab1:
   st.header("一只猫")
   st.image("https://static.streamlit.io/examples/cat.jpg", width=200)

with tab2:
   st.header("一只狗")
   st.image("https://static.streamlit.io/examples/dog.jpg", width=200)

with tab3:
   st.header("一只猫头鹰")
   st.image("https://static.streamlit.io/examples/owl.jpg", width=200)

Streamlit 讲解专栏(九):深入探索布局和容器_数据可视化_06


或者您也可以直接在容器对象上调用方法:

import streamlit as st
import numpy as np

tab1, tab2 = st.tabs(["

标签:容器,元素,st,插入,专栏,讲解,Streamlit,streamlit
From: https://blog.51cto.com/u_15229916/7091737

相关文章

  • Streamlit 讲解专栏(四):深入理解按钮行为
    文章目录1前言2Streamlit中ifst.button()的使用时机3按钮的逻辑3.1通过按钮显示临时消息的常用逻辑3.2状态保留按钮3.3切换按钮3.4控制流程的按钮3.5动态添加小部件的按钮3.6使用按钮处理耗时或写入文件的过程4常见的按钮反模式4.1按钮嵌套在按钮内部4.2将其他小部件......
  • ChatGPT帮你讲解:人为什么要活着
    ChatGPT帮你讲解:人为什么要活着人为什么要活着,这是一个复杂而深刻的问题,涉及到哲学、道德、宗教等多个领域的讨论。作为一个AI,我将尝试给出一个简洁的解释。生命的意义是一个个体主观决定的,因此不同人对这个问题的回答可能会有所不同。然而,有一些常见的理由可以解释为什么人们认为......
  • 详细讲解原生js拖拽
    场景描述今天遇见一个问题,那就是产品希望在弹出来的窗口。可以移动这个弹窗的位置增加用户体验,我们直接使用的element-ui中的Dialog对话框我们现在需要拖拽标题,移动元素位置元素拖拽的思路要让元素按下移动,我们需要实现以下几个步骤:1.鼠标按下元素跟随光标移动2.鼠标抬......
  • 【产品人卫朋】专栏及配套资料更新:华为流程体系、产品经理、IPD与BLM模型
    目录前言01华为流程体系专栏02产品经理进阶专栏03华为战略方法论专栏04IPD进阶100例专栏作者介绍前言截止目前,本号已上线四大干货专栏,内容涉及:01华为流程体系(图文+视频);02硬件产品经理(图文+视频);03BLM战略方法论(图文+视频);04集成产品开发IPD体系(图文)。四大专栏具体内容......
  • Java| jdk的src源码目录讲解
    JavaJDK的源代码目录(src)包含了Java核心类库的源代码,它提供了Java编程语言的基本功能和类。src目录结构通常按照包的层次结构组织,每个包对应一个文件夹,而每个类则在相应的包文件夹中以.java文件的形式存在。目录结构-com--sun-java--applet--awt--beans--io--lang--mat......
  • 【验证码逆向专栏】最新某度旋转验证码 v2 逆向分析
    声明本文章中所有内容仅供学习交流使用,不用于其他任何目的,不提供完整代码,抓包内容、敏感网址、数据接口等均已做脱敏处理,严禁用于商业用途和非法用途,否则由此产生的一切后果均与作者无关!本文章未经许可禁止转载,禁止任何修改后二次传播,擅自使用本文讲解的技术而导致的任何意外,作......
  • .h和.c文件的区别到底是什么(精确讲解)
    简单的说其实要理解C文件与头文件(即.h)有什么不同之处,首先需要弄明白编译器的工作过程,一般说来编译器会做以下几个过程:    1.预处理阶段2.词法与语法分析阶段 3.编译阶段,首先 编译成纯汇编语句,再将之 汇编成跟CPU相关的二进制码,生成各个目标文件(.obj文件) 4.......
  • Streamlit 入门教程:构建一个Dashboard
    Streamlit是一个用于创建数据科学和机器学习应用程序的开源Python库。它的主要目标是使开发人员能够以简单的方式快速构建交互式的数据应用,而无需过多的前端开发经验。Streamlit提供了一种简单的方法来转换数据脚本或分析代码为具有可视化界面的应用程序,这些应用程序可以通过......
  • 老杜 JavaWeb 讲解(二十) ——Listener监听器
    (十八)Listener监听器引子:静态代码块packagecom.zwm.javaweb.servlet;/***@author猪无名*@date2023/8/81347*discription:*/publicclasstest2{//静态代码块在类加载时执行,并且只执行一次。//这个语法很简单,但什么时候用?很疑惑//假如,你希......
  • 【专栏阅读】World models
    来源:如何理解Tesla和Wayve在CVPR2023workshop上提到的worldmodel?-EatElephant的回答-知乎https://www.zhihu.com/question/610849510/answer/3108529249 “CVPR2023自动驾驶workshop上Tesla和Wayve都提到了他们在利用生成大模型方面的最新探索方向,即大模型来生成自动......