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

2023-12-27 17:43:04

模式匹配

模式匹配回调选择器 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)

上一篇

文章来源:https://blog.csdn.net/hzether/article/details/135242522
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。