streamlit实现非原生的按钮触发效果 + flask实现带信息的按钮触发

---

简介

由于streamlit可以同时在实现前后端结合，非常方便，但是这也造成了user难以方便的对页面的组件进行位置控制，本文将使用streamlit+flask，实现普通按钮触发与携带信息

不携带信息的触发

隐藏指定st.button(label, key)

这里给出隐藏指定button的方法

hidden_button_class = 'div[data-testid="stElementContainer"].st-key-hidden_trigger button[data-testid="stBaseButton-secondary"]'
hide_button_style = f"""

"""  # 如果已经使用f方法，想使用花括号就必须使用{{代替{
st.markdown(hide_button_style, unsafe_allow_html=True)

hidden_button中的st-key-hidden_trigger可以根据你的button的key进行修改
如果key = “test”, 这里就改为st-key-test,就可以实现对某个指定button的隐藏！
当然，把.st-key-{key_name}删掉，就可以直接隐藏所有button

触发button的html

通过在页面插入iframe，在iframe内进行JavaScript操作，实现对隐藏button的模拟点击

all_html = f"""
    
    点我 // 这里button的样式可以随便修改，根据需求
    """
st.components.v1.html(all_html)

但是需要注意：外部的button样式对v1.html的样式不生效，内部的button样式对v1.html同样不生效
所以所有内部样式css必须写入all_html中

代码汇总

如果想要实现

import streamlit as st

hide_button_style = """

"""
st.markdown(hide_button_style, unsafe_allow_html=True)

def generate_button():
    all_html = f"""
    
    点我
    """
    st.components.v1.html(all_html)
    return


generate_button()
if st.button("hidden_trigger", key="hidden_trigger"):
    st.success("可以修改为你想实现的功能~")
st.button("no_hidden_trigger", key="no_hidden_trigger")

css样式指定隐藏的button
我们在点击自己设定的button后，触发了隐藏的button，没有触发不隐藏的button

---

携带信息的触发

为什么需要携带信息

假设有这么一个股票信息管理界面，很明显，如果使用streamlit原生的组件，将难以实现查看详情的按钮效果（嵌入在内容卡片中），而一支股票有很多信息（意味着更多的查看详情），为每一个查看详情都提供一个隐藏button，会导致无意义的内存占用，所以可以通过设置一个隐藏按钮，并通过flask后端处理数据，接收并传递信息

前端JavaScript修改

def generate_button():
    all_html = f"""
    
    点我
    """
    st.components.v1.html(all_html)
    return

关键在于向flask发送一个post请求，携带我们需要传递的信息（发送json串，解析为dict）
event.target.dataset是（点我）中，data-title的值
所以：event.target.dataset.title = “test”
利用这个属性来传递信息

flask处理

from flask import Flask, request, jsonify
from flask_cors import CORS
import requests

app = Flask(__name__)
CORS(app)

@app.route('/api/data', methods=['POST'])
def receive_data():
    data = request.get_json()
    title = process_data(data["title"])
    with open("data.txt", "w", encoding="utf-8") as f:
        f.write(title)
    return jsonify({200: "成功"})

def process_data(data):
    # 数据处理逻辑
    return data.upper()

if __name__ == '__main__':
    app.run(port=8000, debug=True)

一定需要CORS()，这意味着能不能实现跨域接收信息，只有加上这个才能实现网页发送信息，而flask后端能够接收网页发送的信息
同时在接收信息之后，能够将信息写入data.txt供其他文件调用（信息传递）

总代码

import time

import streamlit as st

def generate_button():
    all_html = f"""
    
    点我
    """
    st.components.v1.html(all_html)
    return


generate_button()
if st.button("hidden_trigger", key="hidden_trigger"):
    time.sleep(0.05)  # 让flask能够写入信息，设置一小段时间延时
    with open("data.txt", "r", encoding="utf-8") as fr:
        content = fr.read()  # 读取携带的信息
    	st.success("接收到信息:" + content)