Dash中 callback 5

2023-12-24 05:48:34

@app.callback

在Dash中,@app.callback 被用于创建交互性应用程序,它用于定义一个回调函数,该函数在应用程序中发生特定事件时被触发。回调函数可以修改应用程序的布局或更新图表等内容,从而实现动态交互。

下面是一个简单的 @app.callback 的基本结构:

from dash import Dash, html, dcc, callback, Output, Input

app = Dash(__name__)

app.layout = html.Div([
    dcc.Input(id='input', type='text', value=''),
    html.Div(id='output')
])

@app.callback(
    Output('output', 'children'),
    [Input('input', 'value')]
)
def update_output(value):
    return f'You entered: {value}'

if __name__ == '__main__':
    app.run_server(debug=True)

说明

@app.callback 装饰器指定了回调函数 update_output,它将被触发当 Input 组件(dcc.Input)中的值发生变化时。
Output('output', 'children') 定义了回调函数的输出,它指示输出到 Output 组件(html.Div)的 'children' 属性。
[Input('input', 'value')] 则指定了回调函数的输入,表示回调函数接收来自 Input 组件 input 的 'value' 属性的输入。

在这个例子中,当用户在输入框中输入文本时,update_output 函数会被触发,将用户输入的文本显示在输出框中。

需要注意的是,回调函数中的参数名称必须与 @app.callback 装饰器中的 Input 和 Output 的组件和属性名称一致。
[Input(‘input’, ‘value’)]即指 dcc.Input(id=‘input’, type=‘text’, value=‘’),输入内容,则value改变。
Output(‘output’, ‘children’) 则是指将value写入到 html.Div(id=‘output’)

美化上述例子的界面

可以使用Dash Bootstrap Components(dash_bootstrap_components)库提供的样式。这个库提供了一系列Bootstrap样式,可以让你的Dash应用看起来更现代和专业。

首先,确保已经安装了 dash-bootstrap-components:

pip install dash-bootstrap-components

代码:

from dash import Dash, html, dcc, callback, Output, Input
import dash_bootstrap_components as dbc

app = Dash(__name__, external_stylesheets=[dbc.themes.BOOTSTRAP])

app.layout = dbc.Container(
    [
        dbc.Row(dbc.Col(html.H1("交互式输入输出"), width=12)),
        dbc.Row(
            dbc.Col(dcc.Input(id='input', type='text', value='', placeholder='在这里输入文本'), width=12),
            className="mb-3",
        ),
        dbc.Row(
            dbc.Col(html.Div(id='output', className="mt-3"), width=12),
            className="mb-3",
        ),
    ],
    className="mt-5",
)

@app.callback(
    Output('output', 'children'),
    [Input('input', 'value')]
)
def update_output(value):
    return f'你输入的是: {value}'

if __name__ == '__main__':
    app.run_server(debug=True)

在这里插入图片描述

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