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

---

简介

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

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

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

1. hidden_button_class = 'div[data-testid="stElementContainer"].st-key-hidden_trigger button[data-testid="stBaseButton-secondary"]'
2. hide_button_style = f"""
3. <style>
4. {hidden_button_class} {{
5.     display: none;
6.     }}
7. </style>
8. """  # 如果已经使用f方法，想使用花括号就必须使用{{代替{
9. 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的模仿点击

1. all_html = f"""
2.     <script>
3.     function handleButtonClick(event) {{
4.         // 查找隐藏的streamlit按钮按钮
5.         const hiddenButton = parent.document.querySelector(
6.             'div[data-testid="stElementContainer"].st-key-hidden_trigger button[data-testid="stBaseButton-secondary"]'
7.         );
9.         if (hiddenButton) {{
10.             // 触发点击
11.             hiddenButton.click();
12.         }}
13.     }}
15.     // 事件委托处理点击
16.     document.addEventListener('click', function(event) {{
17.         if (event.target.matches('.detail-btn')) {{
18.             handleButtonClick(event);
19.         }}
20.     }});
21.     </script>
22.     <button class="detail-btn" data-title="test">点我</button> // 这里button的样式可以随便修改，根据需求
23.     """
24. st.components.v1.html(all_html)

复制代码

但是须要留意：外部的button样式对v1.html的样式不见效，内部的button样式对v1.html同样不见效
以是所有内部样式css必须写入all_html中
代码汇总

假如想要实现

1. import streamlit as st
3. hide_button_style = """
4. <style>
5. div[data-testid="stElementContainer"].st-key-hidden_trigger button[data-testid="stBaseButton-secondary"] {
6.     display: none;
7.     }
8. </style>
9. """
10. st.markdown(hide_button_style, unsafe_allow_html=True)
12. def generate_button():
13.     all_html = f"""
14.     <script>
15.     function handleButtonClick(event) {{
16.         // 查找隐藏按钮
17.         const hiddenButton = parent.document.querySelector(
18.             'div[data-testid="stElementContainer"].st-key-hidden_trigger button[data-testid="stBaseButton-secondary"]'
19.         );
21.         if (hiddenButton) {{
22.             // 触发点击
23.             hiddenButton.click();
24.         }}
25.     }}
27.     // 事件委托处理点击
28.     document.addEventListener('click', function(event) {{
29.         if (event.target.matches('.detail-btn')) {{
30.             handleButtonClick(event);
31.         }}
32.     }});
33.     </script>
34.     <button class="detail-btn" data-title="test">点我</button>
35.     """
36.     st.components.v1.html(all_html)
37.     return
39. generate_button()
40. if st.button("hidden_trigger", key="hidden_trigger"):
41.     st.success("可以修改为你想实现的功能~")
42. st.button("no_hidden_trigger", key="no_hidden_trigger")

复制代码

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

---

携带信息的触发

为什么须要携带信息

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

前端JavaScript修改

1. def generate_button():
2.     all_html = f"""
3.     <script>
4.     function handleButtonClick(event) {{
5.         const title = event.target.dataset.title;
7.         // 查找隐藏按钮
8.         const hiddenButton = parent.document.querySelector(
9.             'div[data-testid="stElementContainer"].st-key-hidden_trigger button[data-testid="stBaseButton-secondary"]'
10.         );
12.         if (hiddenButton) {{
13.             // 触发点击
14.             hiddenButton.click();
16.             // 发送数据到Flask
17.             fetch('http://localhost:8000/api/data', {{
18.                 method: 'POST',
19.                 headers: {{
20.                     'Content-Type': 'application/json',
21.                 }},
22.                 body: JSON.stringify({{title, stock}}),
23.             }})
24.             .then(response => response.json())
25.             .then(data => console.log('Success:', data))
26.             .catch(error => console.error('Error:', error));
27.         }}
28.     }}
30.     // 事件委托处理点击
31.     document.addEventListener('click', function(event) {{
32.         if (event.target.matches('.detail-btn')) {{
33.             handleButtonClick(event);
34.         }}
35.     }});
36.     </script>
37.     <button class="detail-btn" data-title="test">点我</button>
38.     """
39.     st.components.v1.html(all_html)
40.     return

复制代码

关键在于向flask发送一个post请求，携带我们须要通报的信息（发送json串，剖析为dict）
event.target.dataset是（<button class=“detail-btn” data-title=“test”>点我</button>）中，data-title的值
以是：event.target.dataset.title = “test”
使用这个属性来通报信息
flask处置惩罚

1. from flask import Flask, request, jsonify
2. from flask_cors import CORS
3. import requests
5. app = Flask(__name__)
6. CORS(app)
8. @app.route('/api/data', methods=['POST'])
9. def receive_data():
10.     data = request.get_json()
11.     title = process_data(data["title"])
12.     with open("data.txt", "w", encoding="utf-8") as f:
13.         f.write(title)
14.     return jsonify({200: "成功"})
16. def process_data(data):
17.     # 数据处理逻辑
18.     return data.upper()
20. if __name__ == '__main__':
21.     app.run(port=8000, debug=True)

复制代码

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

flask的返回值是返回给客户端的，好比从客户端向flask发送了post信息，flask乐成接收后会向客户端发送jsonify({200: “乐成”})，代表了状态码200，携带值为乐成
总代码

1. import time
3. import streamlit as st
5. def generate_button():
6.     all_html = f"""
7.     <script>
8.     function handleButtonClick(event) {{
9.         const title = event.target.dataset.title;
10.         const stock = event.target.dataset.stock;
12.         // 查找隐藏按钮
13.         const hiddenButton = parent.document.querySelector(
14.             'div[data-testid="stElementContainer"].st-key-hidden_trigger button[data-testid="stBaseButton-secondary"]'
15.         );
17.         if (hiddenButton) {{
18.             // 触发点击
19.             hiddenButton.click();
21.             // 发送数据到Flask
22.             fetch('http://localhost:8000/api/data', {{
23.                 method: 'POST',
24.                 headers: {{
25.                     'Content-Type': 'application/json',
26.                 }},
27.                 body: JSON.stringify({{title, stock}}),
28.             }})
29.             .then(response => response.json())
30.             .then(data => console.log('Success:', data))
31.             .catch(error => console.error('Error:', error));
32.         }}
33.     }}
35.     // 事件委托处理点击
36.     document.addEventListener('click', function(event) {{
37.         if (event.target.matches('.detail-btn')) {{
38.             handleButtonClick(event);
39.         }}
40.     }});
41.     </script>
42.     <button class="detail-btn" data-title="test">点我</button>
43.     """
44.     st.components.v1.html(all_html)
45.     return
47. generate_button()
48. if st.button("hidden_trigger", key="hidden_trigger"):
49.     time.sleep(0.05)  # 让flask能够写入信息，设置一小段时间延时
50.     with open("data.txt", "r", encoding="utf-8") as fr:
51.         content = fr.read()  # 读取携带的信息
52.             st.success("接收到信息:" + content)

复制代码