当前位置：首页 > news >正文

dash 中的模式匹配回调函数Pattern-Matching Callbacks 8

news 来源：原创 2024/5/9 15:26:23

模式匹配

模式匹配回调选择器 MATCH、ALL 和 ALLSMALLER 允许您编写可以响应或更新任意或动态数量组件的回调函数。
此示例呈现任意数量的 dcc. Dropdown 元素，并且只要任何 dcc. Dropdown 元素发生更改，就会触发回调。尝试添加几个下拉菜单并选择它们的值，以查看应用程序如何更新。
效果：
在这里插入图片描述

代码

# 导入Dash库及其相关组件  
from dash import Dash, dcc, html, Input, Output, ALL, Patch, callback# 创建一个Dash应用实例  
app = Dash(__name__)# 设置应用的布局  
app.layout = html.Div([# 添加一个按钮，用于添加过滤器，id为"add-filter-btn"，并设置初始点击数为0  html.Button("添加过滤器", id="add-filter-btn", n_clicks=0),# 创建一个div容器，用于存放下拉菜单组件，id为"dropdown-container-div"，初始子元素为空  html.Div(id="dropdown-container-div", children=[]),# 创建一个div容器，用于显示下拉菜单的选择结果，id为"dropdown-container-output-div"  html.Div(id="dropdown-container-output-div"),]
)# 定义一个回调函数，当"add-filter-btn"按钮被点击时触发
@callback(# 设置输出目标为"dropdown-container-div"的子元素  Output("dropdown-container-div", "children"),# 设置输入源为"add-filter-btn"的点击事件  Input("add-filter-btn", "n_clicks")
)
def display_dropdowns(n_clicks):# 创建一个Patch对象，用于存放新的下拉菜单组件  patched_children = Patch()# 创建一个新的下拉菜单组件，包含四个城市选项，id根据点击次数动态生成  new_dropdown = dcc.Dropdown(["NYC", "MTL", "LA", "TOKYO"],id={"type": "city-filter-dropdown", "index": n_clicks},)# 将新的下拉菜单组件添加到Patch对象中  patched_children.append(new_dropdown)# 返回Patch对象，更新"dropdown-container-div"的子元素  return patched_children# 定义一个回调函数，当下拉菜单的值发生变化时触发
@callback(# 设置输出目标为"dropdown-container-output-div"的子元素  Output("dropdown-container-output-div", "children"),# 设置输入源为所有"city-filter-dropdown"类型的下拉菜单的值变化事件  Input({"type": "city-filter-dropdown", "index": ALL}, "value"),
)
def display_output(values):# 遍历所有下拉菜单的值，创建一个包含结果的div组件列表  return html.Div([html.Div(f"下拉菜单 {i + 1} = {value}") for (i, value) in enumerate(values)])# 当脚本作为主程序运行时，启动Dash应用，并开启调试模式
if __name__ == "__main__":app.run(debug=True)