Python Dash（五进阶）

高冷男孩不吃苹果

已于 2023-02-05 12:48:41 修改

阅读量980

点赞数

CC 4.0 BY-SA版权

分类专栏： Python Dash 文章标签： python html 可视化前端

于 2021-09-07 14:44:06 首次发布

本文链接：https://blog.csdn.net/lcf0000/article/details/120133092

Python Dash 专栏收录该内容

8 篇文章

订阅专栏

本文档介绍了如何使用Bootstrap库为PythonDash应用中的长度单位换算功能增添美观的界面。通过定义函数生成重复HTML代码和利用@app.callback更新输出值，实现了交互式的前端展示。然而，最终美化效果未能完全达到预期，需要进一步调试和完善。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、学习内容：

“人靠衣装，佛靠金装”，在Python Dash（五）中我们实现了长度单位换算的功能，本节我们用bootstrap给该工具穿上美丽的衣服。

二、学习过程

相关代码模板网址：https://dash-bootstrap-components.opensource.faculty.ai/

代码：

# author : 高冷男孩不吃苹果


import dash
import dash_core_components as dcc
import dash_bootstrap_components as dbc
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")
# ])

def item(name):
    return dbc.ListGroupItem([
        html.H5(name),
        html.H5("--",id=name,className="float-right")
    ])

list_group = dbc.ListGroup(
    [
        dbc.ListGroupItem(children=[
            html.H1('长度单位换算器'),
            html.P("Input:"),
            dcc.Input(value=0,id='m',type='number'),
            html.P("Output:")
        ],action=True),
        item('mm'),
        item('cm'),
        item('dm'),
        item('km')
    ],
    className='shadow'
)

app.layout = dbc.Container([list_group],style={"padding-Top":"3rem"})

#技巧二：长字符串用变量存储
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 (
        "{}mm".format(value*0.001),
        "{}cm".format(value*0.01),
        "{}dm".format(value*0.1),
        "{}km".format(value*10.0),
    )


app.run_server(debug=True)

结果：