Dash中 基本的 callback 5

@app.callback

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

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

python 复制代码
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:app = Dash(**name**, external_stylesheets=\[dbc.themes.BOOTSTRAP\])这是将样式引入页面。 ```python pip install dash-bootstrap-components ``` 代码: ```python 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://file.jishuzhan.net/article/1739273400251060225/07926ae9f3cf8c6da9bc7ab20d59bbe1.webp)

相关推荐
David Bates4 分钟前
代码随想录第40天:图论1
python·算法·图论
Johny_Zhao17 分钟前
堆叠、MLAG、VPC、VSS 技术对比及架构建议
linux·网络·人工智能·python·网络安全·ai·信息安全·云计算·cisco·等保测评·huawei·系统运维
颜淡慕潇17 分钟前
【Python】超全常用 conda 命令整理
chrome·python·conda
jie1889457586621 分钟前
Python中,正则表达式,
开发语言·python·正则表达式
waterHBO24 分钟前
python 上海新闻爬虫, 上观新闻 + 腾讯新闻
爬虫·python
白开水就盒饭33 分钟前
Python代码编程基础
windows·python·microsoft
Auc2434 分钟前
Java 原生实现代码沙箱(OJ判题系统第1期)——设计思路、实现步骤、代码实现
java·开发语言·python
oioihoii43 分钟前
C++23 中的 views::chunk:深入探索与应用
开发语言·python·c++23
fie88891 小时前
Java中的控制流语句:if、switch、for、foreach、while、do-while
java·开发语言·python
zhanghongyi_cpp1 小时前
当当网Top500书籍信息爬取与分析
python·网络爬虫·数据可视化