Python Dash（五）

一、学习内容

通过一个具体的案例——“长度单位换算器”学习callback的高级特性：

1. callback的一对多关系（一个Input对应多个Output）
2. 两个使用的dash技巧

二、学习过程

代码：

# author : 高冷男孩不吃苹果


import dash
import dash_core_components as dcc
import dash_html_components as html
from dash.dependencies import Input, Output

app = dash.Dash(__name__)

#技巧一：使用函数生成重复html代码
def item(name):
    return html.Div([name,html.Span('--',id=name)])

app.layout = html.Div([
    html.H3('长度单位换算器'),
    dcc.Input(value=0,id='m',type='number'),
    item("mm"),
    item("cm"),
    item("dm"),
    item("km")
])

#技巧二：长字符串用变量存储
NODE = 'children'
@app.callback(
    output = [Output("mm",NODE),Output("cm",NODE),Output("dm",NODE),Output("km",NODE)],
    inputs = [Input('m','value')]
)
def calc(value):
    if value == '':
        value = 0
    return (
        f":{value*0.001}mm",
        f":{value*0.01}cm",
        f":{value*0.1}dm",
        f":{value*10.0}km"
    )


app.run_server(debug=True)

结果：

点击Callbacks按钮查看关系：