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)
相关推荐
B站计算机毕业设计超人2 分钟前
计算机毕业设计SparkStreaming+Kafka旅游推荐系统 旅游景点客流量预测 旅游可视化 旅游大数据 Hive数据仓库 机器学习 深度学习
大数据·数据仓库·hadoop·python·kafka·课程设计·数据可视化
IT古董26 分钟前
【人工智能】Python在机器学习与人工智能中的应用
开发语言·人工智能·python·机器学习
湫ccc1 小时前
《Python基础》之pip换国内镜像源
开发语言·python·pip
hakesashou1 小时前
Python中常用的函数介绍
java·网络·python
菜鸟的人工智能之路1 小时前
极坐标气泡图:医学数据分析的可视化新视角
python·数据分析·健康医疗
菜鸟学Python1 小时前
Python 数据分析核心库大全!
开发语言·python·数据挖掘·数据分析
小白不太白9501 小时前
设计模式之 责任链模式
python·设计模式·责任链模式
喜欢猪猪1 小时前
Django:从入门到精通
后端·python·django
糖豆豆今天也要努力鸭1 小时前
torch.__version__的torch版本和conda list的torch版本不一致
linux·pytorch·python·深度学习·conda·torch
何大春2 小时前
【弱监督语义分割】Self-supervised Image-specific Prototype Exploration for WSSS 论文阅读
论文阅读·人工智能·python·深度学习·论文笔记·原型模式