本篇准备开始介绍Streamlit
的组件。
Streamlit
的组件非常多,后续几篇打算按照用途的分类,介绍每个分类中最常用的组件。
本次从最简单的组件开始,介绍文本和标题相关的组件,也就是以下4个组件:
st.text
:用于显示普通的文本内容st.title
:用于显示页面的大标题st.header
:用于显示一级标题st.subheader
:用于显示二级标题
1. st.text 组件
st.text
是 Streamlit
中最基本的文本展示组件。
它的主要功能是显示普通的文本内容,没有特殊的格式或样式,
主要用于展示段落、说明性文字或任何不需要特殊强调的文本。
使用场景主要包括:
- 展示应用程序的说明文字
- 显示用户输入或动态生成的文本内容
- 作为其他组件之间的过渡文本
st.text
既可以显示单行文本,也可以通过三引号来显示多行文本。
import streamlit as st
st.text("这是一个使用 st.text 显示的普通文本。")
st.text(
"""这是一个使用 st.text 显示的多行文本。
每一行都会单独显示,
并且保持原有的格式。"""
)
2. st.title 组件
st.title
是用于显示页面大标题的组件。
它的字体大且加粗,非常醒目,通常位于页面的顶部或重要内容的开头。
st.title
的主要作用是吸引用户的注意力,明确应用程序的主题或当前部分的核心内容。
它的使用场景有:
- 作为整个应用程序的标题
- 标识应用程序中的重要部分或章节
- 在页面顶部提供清晰的导航指示
st.title
使用非常简单。
st.title("XXX数据应用程序")
3. st.header 组件
st.header
是用于显示一级标题的组件。
它的字体和加粗程度略小于 st.title
,但仍然足够显眼,能够清晰地标识出页面内容的不同部分。
st.header
的主要作用是帮助用户理解应用程序的结构,快速定位到感兴趣的内容部分。
st.header
可以当成HTML
中的H1
标签来看,它的使用场景主要有:
- 划分应用程序的不同区块或章节
- 为特定部分的内容提供标题
- 在长页面中提供视觉上的分隔
st.header
的使用和st.title
类似,下面的示例把它当作内容分割的标题。
import streamlit as st
st.header("引言")
st.text("本文介绍了 Streamlit 的基本文本展示组件。")
st.header("方法")
st.text("我们采用了多种方法来分析数据。")
st.header("结果")
st.text("以下是我们的分析结果。")
4. st.subheader 组件
st.subheader
是用于显示二级标题的组件。
相对于 st.header
,它的字体和加粗程度进一步减小,但仍然能够清晰地标识出内容的子部分。
st.subheader
的主要作用是进一步细化内容结构,为用户提供更详细的导航或内容概述,可以把它当成HTML
中的H2
标签来看。
它的使用场景:
- 在一级标题下进一步划分内容子部分
- 为特定的小节或段落提供标题
- 在需要强调但不需要过分突出的地方使用
下面的示例展示二级标题的使用:
st.header("销售数据分析")
st.subheader("月度销售趋势")
st.text("这里将展示每月的销售数据趋势。")
st.subheader("年度销售趋势")
st.text("这里将展示整年的销售数据趋势。")
st.subheader("产品类别销售情况")
st.text("接下来,我们将分析不同产品类别的销售情况。")
5. 总结
上面介绍的4个组件st.text
、st.title
、st.header
和 st.subheader
并不是孤立存在的,它们通常会被组合在一起使用,以构建出具有层次感和逻辑性的页面布局。
使用时,根据内容层次选择组件,比如,
使用 st.title
作为整个页面或应用程序的开头,明确主题和核心目的;
使用 st.header
来划分页面的主要部分或章节,每个 st.header
都应该代表一个相对独立且完整的内容区块;
在 st.header
之下,使用 st.subheader
来进一步细化内容,为具体的小节或段落提供标题;
最后,用st.text
来填充上述标题之间的空白,提供具体的描述、解释或补充信息。
需要注意的是,虽然这些文本展示组件非常有用,但也要避免过度使用,过多的标题和文本可能会让用户感到混乱和迷失方向。
因此,在使用这些组件时,要确保它们真正为页面增加了价值,而不是成为冗余的信息。