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)
相关推荐
丕羽2 小时前
【Pytorch】基本语法
人工智能·pytorch·python
bryant_meng3 小时前
【python】Distribution
开发语言·python·分布函数·常用分布
m0_594526304 小时前
Python批量合并多个PDF
java·python·pdf
工业互联网专业4 小时前
Python毕业设计选题:基于Hadoop的租房数据分析系统的设计与实现
vue.js·hadoop·python·flask·毕业设计·源码·课程设计
钱钱钱端4 小时前
【压力测试】如何确定系统最大并发用户数?
自动化测试·软件测试·python·职场和发展·压力测试·postman
慕卿扬4 小时前
基于python的机器学习(二)—— 使用Scikit-learn库
笔记·python·学习·机器学习·scikit-learn
Json____5 小时前
python的安装环境Miniconda(Conda 命令管理依赖配置)
开发语言·python·conda·miniconda
小袁在上班5 小时前
Python 单元测试中的 Mocking 与 Stubbing:提高测试效率的关键技术
python·单元测试·log4j
白狐欧莱雅5 小时前
使用python中的pygame简单实现飞机大战游戏
经验分享·python·游戏·pygame
阿_旭5 小时前
基于YOLO11/v10/v8/v5深度学习的维修工具检测识别系统设计与实现【python源码+Pyqt5界面+数据集+训练代码】
人工智能·python·深度学习·qt·ai