首页 > 极客资料 博客日记

『玩转Streamlit』--页面布局

2024-10-31 09:30:04极客资料围观12

文章『玩转Streamlit』--页面布局分享给大家,欢迎收藏极客之家,专注分享技术知识

一个优秀的数据应用不仅仅是功能的强大,更在于其用户体验的打造。

而良好的页面布局,作为用户体验的重要组成部分,不仅能够提升信息的可读性,还能引导用户高效地完成操作。

反之,混乱的布局会让人感到困惑和挫败,甚至导致用户放弃使用应用。

Streamlit中,Sidebar(侧边栏)、Columns(列布局)和Tabs(标签页)是三个至关重要的布局组件,它们各自有不同的使用场景,共同构成了应用界面的骨架。

1. 侧边栏 st.sidebar

Sidebar(侧边栏)在Streamlit应用中主要是导航作用。

Sidebar通常位于应用界面的左侧或右侧,它的优势在于,既不会占用主内容区域的空间,又同时保持了对关键功能的即时访问,特别适用于那些需要频繁切换功能或具有多层导航结构的应用。

Sidebar不是菜单,一般不用于页面的切换,它的里面可以包含其他的组件。

下面构建一个简化的数据分析场景,演示Sidebar的使用方法。

我们在Sidebar中设置需要选择的数据集和数据分类(分为测试集验证集),

然后在主页面中获取选择的数据集和数据分类,只实现操作数据的功能。

# 侧边栏中选择数据集
dataset = st.sidebar.selectbox(
    "选择数据集?",
    (
        "手写数字数据",
        "房屋成交数据",
        "股市交易数据",
    ),
)

# 侧边栏中选择数据分类
data_type = st.sidebar.radio(
    "数据分类: ",
    ("测试集", "验证集", "所有数据"),
)

# 右侧页面中的模拟操作
st.title(f"数据集: {dataset}")
st.divider()
st.write(f"数据分类: 【{data_type}】")
st.write(f"TODO!!!: 操作数据的功能")

2. 列布局 st.columns

Columns布局,即列布局,是一种将页面内容分割成多个垂直排列的列,以便更有效地展示信息的布局方式。

这种布局方式不仅提升了页面的视觉吸引力,还显著增强了用户体验,使得信息获取更加直观和便捷。

Streamlit中,可以使用st.columns函数来创建列布局。

这个函数接受一个列表作为参数,列表中的每个元素都是一个函数,代表一列的内容。

Streamlit会按照列表的顺序和长度来渲染列。

比如,我们构造一个数据分析的示例,分3列展示内容,

  • 第一列模拟选择数据
  • 第二列模拟一些配置信息
  • 第三列根据配置模拟绘制图形
# 绘图的类型放在session中
if "graph" not in st.session_state:
    st.session_state.graph = ""

# 第一列
def column_1():
    st.header("1. 选择数据")
    st.selectbox(
        "选择数据集?",
        (
            "手写数字数据",
            "房屋成交数据",
            "股市交易数据",
        ),
    )
    # 随机模拟的数据
    data = pd.DataFrame(np.random.randn(5, 3), columns=["A", "B", "C"])
    st.table(data)


def column_2():
    st.header("2. 配置数据")
    graph = st.radio(
        "图形类型: ",
        ("折线图", "柱状图", "散点图"),
    )

    st.session_state.graph = graph


def column_3():
    st.header("3. 绘制图形")

    chart_data = pd.DataFrame(np.random.randn(20, 3), columns=["A", "B", "C"])
    if st.session_state.graph == "散点图":
        st.scatter_chart(chart_data)

    if st.session_state.graph == "折线图":
        st.line_chart(chart_data)

    if st.session_state.graph == "柱状图":
        st.bar_chart(chart_data)


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

with col1:
    column_1()

with col2:
    column_2()

with col3:
    column_3()

3. 标签页 st.tabs

Tabs组件的主要用途在于将复杂的信息结构分解为多个独立的、可切换的部分,每个部分(或称为“标签页”)都包含相关的内容或功能。

这种设计方式有助于减少用户在同一时间内需要处理的信息量,避免界面过载,同时也便于用户快速找到所需内容。

同样是上面的例子,如果数据的字段很多,配置数据的项目也很多,那么上面的Columns布局就显得很拥挤,

这时,用Tabs布局更好,代码调整很简单。

tab1, tab2, tab3 = st.tabs(["1. 选择数据", "2. 配置数据", "3. 绘制图形"])

with tab1:
    tab_1()

with tab2:
    tab_2()

with tab3:
    tab_3()

上面函数tab_1()tab_2()tab_3()中的代码和Columns布局示例中的column_1()column_2()column_3()代码基本一样。

随着Columns布局的每个Columns内容逐渐增多时,可以考虑改用Tabs布局。

4. 总结

总之,这三种布局方式各有千秋,选择哪种布局取决于应用的具体需求、用户习惯以及设计目标。

Sidebar(侧边栏)提供持续可见的导航菜单,适合功能繁多或需频繁切换的应用,帮助用户快速定位所需功能,同时保持主内容区域的清晰。

Columns(列布局)则通过分割界面为多个并列区域,实现图文混排或数据报表的灵活展示。

它提高了信息密度,使得用户能够在同一视图中获取更多信息,适用于需要同时展示多种数据类型或视图的场景。

Tabs(标签页)将内容划分为多个独立的、可切换的部分,每个部分包含相关功能或信息。

它有助于节省屏幕空间,同时帮助用户对信息进行逻辑分组,提高信息检索效率。

Tabs适用于功能或信息分类明确,且用户可能需要根据不同需求切换查看的应用。


版权声明:本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若内容造成侵权/违法违规/事实不符,请联系邮箱:jacktools123@163.com进行投诉反馈,一经查实,立即删除!

标签:

相关文章

本站推荐

标签云