关于Streamlit中button的扩展用法

最近团队在制作一个车辆管理系统，本人刚好负责streamlit的页面可视化。这篇Blog就不详细赘述系统的各项功能了，今天主要是想写点东西，加深一下知识的理解和消化，各位看官看个开心~

（手动分界线  /doge）

---------------------------------------------------------------------------------------------------------------------------------

我们知道，在Streamlitl中，常用的关于Button的使用方法有：

import streamlit as st

if st.button('按钮1'):
    st.write('是的，我被你click了！')
    st.markdown('<style>p {color: red;}</style><p>结合HTML和CSS后的产物 TnT</p>', unsafe_allow_html=True)
    st.balloons()

if st.button('按钮2'):
    st.write('怎么事，还点两次呢？')
    st.markdown('''
    | Lebron James | The Best basketplayer in SF |
    | --- | --- |
    | Stephen Curry | The NBA All-Time three-point Champion |
    | Kevin Durant | The most temperamental Player in NBA |
    ''')
    st.balloons()

if st.button('按钮3'):
    st.write('按钮3被Attack了!')
    st.markdown('这是一个 **粗体** 和 *斜体* 的例子')
    st.markdown('# 这是一个一级标题')
    st.markdown('## 这是一个二级标题')
    st.balloons()

显然，在Streamlit中，按钮的点击事件通常是通过"st.button"函数的返回值来判断，当按钮被点击时返回"True"，否则返回"False"。同时，我们也能看到在上述代码的第一个button中，我们采用了button和HTML/CSS结合的方法，构造出了多样式的按钮（是的，实训我做的内容就是这玩意）。但是，直接使用"st.button"是最推荐的方法，并且它是与Streamlit生态系统最兼容的方式（学了前端的可以遮住眼睛了）

重点来了，这种结合方式会有什么后果：在和st.colume函数配合使用时，往往不是点击按钮显示效果，而是在加载页面后直接显示结果！（有大佬告诉孩子该怎么解决吗 #乞讨ing）

但是我不知悔改，还是喜欢花里胡哨的东西！

st.markdown("""
<style>
    .button-style {
        background-color: #4CAF50; /* 绿色背景 */
        border: none; /* 无边框 */
        color: white; /* 文字颜色白色 */
        padding: 15px 32px; /* 按钮的内边距 */
        text-align: center; /* 文字居中 */
        text-decoration: none; /* 无下划线 */
        display: inline-block; /* 行内块显示 */
        font-size: 16px; /* 字体大小 */
        margin: 4px 2px; /* 外边距 */
        cursor: pointer; /* 鼠标指针 */
        border-radius: 12px; /* 圆角 */
    }
</style>
""", unsafe_allow_html=True)

# 按钮1
if st.markdown('<a href="#" class="button-style">按钮1</a>', unsafe_allow_html=True):
    st.write('你点击了按钮1')

# 按钮2
if st.markdown('<a href="#" class="button-style">按钮2</a>', unsafe_allow_html=True):
    st.write('你点击了按钮2')

# 按钮3
if st.markdown('<a href="#" class="button-style">按钮3</a>', unsafe_allow_html=True):
    st.write('你点击了按钮3')

上述示例中，我们使用了CSS自定义了按钮的样式，并使用"st.markdown"添加了HTML内容，关键在于自定义HTML和CSS时，参数"unsafe_allow_html"要设置为"True"

如果学习了js，谁愿意当st的🐕呢！