Python 应用开发:Streamlit 布局篇(容器布局)

st.columns

以并列方式插入容器。

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

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

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

注意

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

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

import streamlit as st//设定3列
col1, col2, col3 = st.columns(3)//设定不同的列标题和展示的内容
with col1:st.header("A cat")st.image("https://static.streamlit.io/examples/cat.jpg")with col2:st.header("A dog")st.image("https://static.streamlit.io/examples/dog.jpg")with col3:st.header("An owl")st.image("https://static.streamlit.io/examples/owl.jpg")

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

import streamlit as st
import numpy as npcol1, col2 = st.columns([3, 1])
data = np.random.randn(10, 1)col1.subheader("A wide column with a chart")
col1.line_chart(data)col2.subheader("A narrow column with the data")
col2.write(data)

st.container

插入一个多元素容器。

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

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

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

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

import streamlit as st#将边界设定为真,
container = st.container(border=True)
#在容器内写相应的文字
container.write("This is inside the container")
#外部容器
st.write("This is outside the container")# 在容器内插入一些文字
container.write("This is inside too")

利用高度制作网格:

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

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

import streamlit as st#选择一个文本信息,用于装入下面的容器
long_text = "Lorem ipsum. " * 1000#这里我们设定一个高度为300的容器
with st.container(height=300):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 "将打开一个模式对话框,提示您输入投票原因。在模式对话框中,点击 "提交 "将您的投票记录到会话状态并重新运行应用程序。这将关闭模式对话框,因为在重新运行全脚本时不会调用对话框功能。

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

弹出一个对话框 

 返回的结果

 

st.empty

插入单元素容器

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

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

 使用符号就地重写元素:

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

st.expander

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

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

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

警告

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

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

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

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

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

st.popover

插入一个弹出式容器。

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

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

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

警告

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

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

 

import streamlit as st#用with 进行写入
with st.popover("Open popover"):st.markdown("Hello World 👋")name = st.text_input("What's your name?")#不在内部写入
st.write("Your name:", name)

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

 

import streamlit as stpopover = st.popover("Filter items")
red = popover.checkbox("Show red items.", True)
blue = popover.checkbox("Show blue items.", True)if red:st.write(":red[This is a red item.]")
if blue:st.write(":blue[This is a blue item.]")

 st.sidebar

 您不仅可以使用部件为应用程序添加交互性,还可以将它们组织到侧边栏中。可以使用对象符号和符号将元素传递给 st.sidebar。

以下两个代码段是等价的:

# Object notation
st.sidebar.[element_name]
# "with" notation
with st.sidebar:st.[element_name]

传递给 st.sidebar 的每个元素都会固定在左侧,让用户专注于应用程序中的内容。

提示
侧边栏可以调整大小!拖放侧边栏的右边界即可调整其大小!↔️

 下面举例说明如何在侧边栏中添加选择框和单选按钮:

import streamlit as st# Using object notation
add_selectbox = st.sidebar.selectbox("How would you like to be contacted?",("Email", "Home phone", "Mobile phone")
)# Using "with" notation
with st.sidebar:add_radio = st.radio("Choose a shipping method",("Standard (5-15 days)", "Express (2-5 days)"))

重要
不支持使用对象符号的元素只有 st.echo、st.spinner 和 st.toast。要使用这些元素,必须使用对象符号。

下面举例说明如何在侧边栏中添加 st.echo 和 st.spinner:

import streamlit as stwith st.sidebar:with st.echo():st.write("This code will be printed to the sidebar.")with st.spinner("Loading..."):time.sleep(5)st.success("Done!")

st.tabs

插入分隔成标签的容器。

以标签形式插入多个多元素容器。标签是一种导航元素,可让用户在相关内容组之间轻松移动。

要在返回的容器中添加元素,可以使用 with 符号(首选),或者直接调用返回对象的方法。请看下面的示例。tabs为列表中的每个字符串创建一个选项卡。默认情况下选择第一个标签页。字符串用作标签页的名称,可选择包含 Markdown,支持以下元素:粗体、斜体、删除线、内联代码、表情符号和链接。

警告

每个标签页的所有内容都会发送到前端并在前端呈现。目前不支持条件渲染。

 您可以使用 with 符号在制表符中插入任何元素:

import streamlit as st#设定三个tab 这个相当于三个界面
tab1, tab2, tab3 = st.tabs(["Cat", "Dog", "Owl"])#三个tab的设定
with tab1:st.header("A cat")st.image("https://static.streamlit.io/examples/cat.jpg", width=200)with tab2:st.header("A dog")st.image("https://static.streamlit.io/examples/dog.jpg", width=200)with tab3:st.header("An owl")st.image("https://static.streamlit.io/examples/owl.jpg", width=200)

或者,你也可以直接调用返回对象的方法:这里设定一个表格和数据 

import streamlit as st
import numpy as np#这里设定两个tabs并按照列表形式传入
tab1, tab2 = st.tabs(["📈 Chart", "🗃 Data"])#设定一个随机数列
data = np.random.randn(10, 1)#设定第一个tab
tab1.subheader("A tab with a chart")
tab1.line_chart(data)
#设定第二个tab
tab2.subheader("A tab with the data")
tab2.write(data)

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/pingmian/17508.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

你还别不信,停电停网也能玩超级玛丽,还能自己编辑关卡和地图呢!

网管小贾 / sysadm.cc 死神正了然无趣地翻阅着人间档案,突然,它眼前一亮。 艾瑞克牛,社畜属,躺平体质,1996年9月6日出生,现年59岁,剩余寿命1小时15分08秒…… 当晚,在不足20平的出…

【Unity之FGUI】Fairy GUI面板的创建相关

👨‍💻个人主页:元宇宙-秩沅 👨‍💻 hallo 欢迎 点赞👍 收藏⭐ 留言📝 加关注✅! 👨‍💻 本文由 秩沅 原创 👨‍💻 收录于专栏:就业…

vue组件的基本使用方法

组件 【1】组件是什么? 组件就是:扩展 HTML 元素,封装可重用的代码,目的是复用例如:有一个轮播图,可以在很多页面中使用,一个轮播有js,css,html组件把js,cs…

【移动云】5G时代——你我的智慧云

文章目录 0.引言1.移动云简介2.移动云学习资源3.移动云产品介绍3.1 大数据—数据可视化(DataInsight)3.1.1 应用场景3.1.2 产品基本架构3.1.3 优势 3.2 云主机ECS3.2.1 云主机ECS优势3.2.2 云主机主要功能3.2.3 应用场景 4.移动云解决方案4.1 热门案例1&…

男士内裤哪个品牌好穿舒服?适合夏季的五款男士内裤推荐

很多男性对内裤的不重视,似乎是与生俱来的,错把“糙汉”当“硬汉”。特别是一直以来都由女性包办内裤的男士,经常是不合适也勉强穿着。即使是生活条件不断提升的今天,还是有不少男士表面光鲜亮丽,对内裤反而不太讲究。…

解读:Mint Blockchain 最新路线图,释放 NFT 生态重磅发展计划

作者:Mint Ecosystem 关于 Mint Blockchain:Mint Blockchain 是一个以太坊原生 L2 网络,核心是发展 NFT 生态和产业,促进 NFT 领域的 Mass Adoption 产生。MintCore 团队致力于将 Mint Blockchain 打造成一个围绕服务 NFT 资产的…

SqlServer 2016 2017 2019安装失败-无法找到数据库引擎启动句柄

SqlServer 2016 2017 2019安装失败-无法找到数据库引擎启动句柄 出现以上问题的原因是因为系统账户无法操作数据库引擎服务。需要调整权限。 按照以下步骤解决,成功完成安装,已亲测: 1、如果您已经安装了相同版本的SQL Server,…

数据结构算法题day03

数据结构算法题day03 题目 题目 2.设计一个高效算法&#xff0c;将顺序表L的所有元素逆置&#xff0c;要求算法的空间复杂度为O(1)算法思想&#xff1a; 1、常规的解法&#xff1a; Void reverse (sqlist &L){Elemtype temp; //辅助变量for(i 0,i < L.length; i){temp…

基于NAMUR开放式架构(NOA)的工业设备数据采集方案

一 NAMUR开放式架构 传统自动化金字塔结构的优越性在过去许多年里已被证明。然而&#xff0c;传统的自动化金字塔在获取和利用对物联网和工业4.0有价值的数据方面却存在一定挑战。这是因为传统系统通常是封闭的&#xff0c;数据访问受到限制&#xff0c;难以集成到新的数字化解…

剖析【C++】——类与对象(中)——小白篇—超详解

目录 1.类的6个默认成员函数&#xff1a; 1. 默认构造函数&#xff08;Default Constructor&#xff09; 2. 析构函数&#xff08;Destructor&#xff09; 3. 拷贝构造函数&#xff08;Copy Constructor&#xff09; 4. 拷贝赋值运算符&#xff08;Copy Assignment Operato…

Docker部署后的中文乱码问题

本地和服务器上面生成图片文字多没有乱码&#xff0c;但是服务部署到docker上面就开始出现乱码。排查了一下发现是docker上缺少相应的中文字体&#xff0c;添加字体即可解决。 1.在网站上找到相关资源并下载字体-字体下载-字体下载大全-字体免费下载|字体下载 2.上传到服务器 …

8D和FMEA的关系是什么?——FMEA软件

免费试用FMEA软件-免费版-SunFMEA 在质量管理领域中&#xff0c;8D和FMEA是两个非常重要的工具。它们各自有着独特的作用&#xff0c;但同时又存在着紧密的联系。本文旨在深入探讨8D和FMEA之间的关系&#xff0c;以及它们如何协同工作以提高产品质量和客户满意度。 8D&#x…

电子商务商城B2B2C:JAVA实现的商家间直播带货商城系统概览

电子商务商城&#xff1a;构建全行业全渠道的一体化SaaS解决方案 在数字化转型的浪潮中&#xff0c;企业对于高效、集成的管理系统的需求日益增长。电子商务商城的SaaS云平台应运而生&#xff0c;它旨在为各行各业提供全面的一体化解决方案&#xff0c;无论是门店经营的区域化…

UE5 Cesium2 最新使用地理配准子关卡构造全球场景

参考官方最新教程&#xff1a;Building Global Scenes with Georeferenced Sublevels – Cesium 创建持久关卡&#xff08;主关卡&#xff09; 这里一般包含DynamicPawn、CesiumSunSky 和 Cesium World Terrain 全球场景通用的对象。子关卡的创立&#xff0c;官方教程分为了两…

低代码与人工智能:革新智能客服系统的高效之道

引言 在当前数字化和智能化浪潮的推动下&#xff0c;企业对智能客服系统的需求呈现显著增长。随着客户期望的不断提升&#xff0c;企业需要更加高效、智能和个性化的客户服务解决方案。传统的人工客服方式不仅成本高昂&#xff0c;且难以满足大规模、多样化的客户需求。而智能客…

如何远程访问Redis?

远程访问Redis是一种常见的需求&#xff0c;特别是在分布式系统或跨地域网络中。通过远程访问&#xff0c;我们可以轻松地对远程的Redis数据库进行操作和管理。 天联保障数据安全 对于远程访问Redis的安全性问题&#xff0c;我们可以借助天联来保障数据的安全。天联是一种基于…

免费无限换脸,火了,图片/视频/直播都行!

最强换脸AI工具Facefusion软件在近期更新到了2.6.0版本&#xff0c;带来了一系列的更新和改进&#xff0c;今天为大家分享一下最新的整合包。 Facefusion2.6.0版本介绍 FaceFusion不仅仅是一款换脸软件&#xff0c;它更是一个多功能的数字人和实时直播助手&#xff0c;真正开启…

python Windows电脑设置定时启动程序,定时运行代码

Windows设置定时 一&#xff0c;新建文件txt, .txt改为.bat 路径填exe的路径D:\test\main.py 如下是启动exe,如果运行python代码则写入如&#xff1a;python D:\test\main.py 二&#xff0c;搜索计算机管理 三&#xff0c;点击创建基本任务 填写任意名称 选择什么时候开始…

Element-Plus中表格及分页功能

导入Element-Plus 具体步骤如下&#xff1a;&#xff08;内容参照官网&#xff1a;安装 | Element Plus&#xff09; # 选择一个你喜欢的包管理器# NPM $ npm install element-plus --save# Yarn $ yarn add element-plus# pnpm $ pnpm install element-plus 安装完成后即可…

实现按块复制元素的进阶技巧

新书上架~&#x1f447;全国包邮奥~ python实用小工具开发教程http://pythontoolsteach.com/3 欢迎关注我&#x1f446;&#xff0c;收藏下次不迷路┗|&#xff40;O′|┛ 嗷~~ 目录 一、按块复制元素的重要性 二、使用LED模块创建数组并复制 三、实现按块复制的具体步骤 四…