Dash 应用的布局
在 Dash 中,app.layout 通常被设置为一个单一的组件或者组件的列表、元组或字典。下面逐一介绍设置 Dash 应用布局的四种方式:
1、单一组件
可以直接将一个组件赋值给 app.layout, Dash 将这个组件作为应用的根布局。
from dash import Dash, html
app = Dash()
app.layout = html.Div(children=['Hello World'])
if __name__ == '__main__':
app.run(debug=True)
2、元组
使用元组来定义布局,在需要有序放置组件但不关心它们的特定类型时很有用。
在 Dash 应用程序的用户界面布局中,通常包含一个或多个HTML组件,这些组件被组织在一个列表中。Dash布局中通常包括标题、子标题、数据表格等,这些元素都可以用HTML组件来构建。
import dash
import dash_html_components as html
# 创建 Dash 应用示例
app = dash.Dash(__main__)
# 使用元组定义应用布局
app.layout = html.Div((
# 元组中的第一个组件:页面标题
html.H1('Hello, Dash World!', style={'textAlign': 'center'}),
# 元组中的第二个组件:段落文本
html.Div([
html.P('This is a simple Dash application with a tuple layout.'),
html.P('Dash is great for interactive data visualizations.')
], style={'padding': '20px', 'border': '1px solid #ccc'}),
html.H4('原始数据'),
html.H4('......')
))
if __name__ == '__main__':
app.run_server(debug=True)
3、字典
使用字典来定义布局,其中键是组件的 ID,值是组件本身。这种方式在需要通过 ID 引用组件时使用。
import dash
import dash_html_components as html
import dash_core_components as dcc
from dash.dependencies import Input, Output
# 创建 Dash 应用实例
app = dash.Dash(__name__)
# 使用字典组织组件
components = {
'header': html.H1('Header Title Dictionary', style={'margin': '20px'}),
'content': html.Div('This is the content area.', style={'margin': '20px'}),
'footer': html.Footer('Footer content.', style={'margin': '20px'})
}
# 使用回调函数动态返回布局
@app.callback(
Output('main-container', 'children'),
Input('url', 'pathname')
)
def update_layout(pathname):
# 根据 URL 路径动态返回不同的组件
if pathname == '/page1':
return components['header']
elif pathname == '/page2':
return components['content']
elif pathname == '/page3':
return components['footer']
else:
# 默认返回 header 和 content
return [components['header'], components['content']]
# 定义应用的根布局,包含一个 ID 为 'main-container' 的容器
app.layout = html.Div(html.Main([
dcc.Location(id='url', refresh=False),
html.Div(id='main-container')
]))
if __name__ == '__main__':
app.run_server(debug=True)
4、使用回调函数动态更新布局
使用回调函数来动态更新布局,下面根据下拉菜单的选择动态更改应用程序的布局:
import dash
import dash_core_components as dcc
import dash_html_components as html
from dash.dependencies import Input, Output
app = dash.Dash(__name__)
app.layout = html.Div([
dcc.Dropdown(
id='dynamic-dropdown',
options=[
{'label': 'Layout 1', 'value': 'layout1'},
{'label': 'Layout 2', 'value': 'layout2'},
],
value='layout1'
),
html.Div(id='dynamic-layout')
])
@app.callback(Output('dynamic-layout', 'children'),
[Input('dynamic-dropdown', 'value')])
def update_layout(value):
if value == 'layout1':
return html.Div("This is layout 1")
elif value == 'layout2':
return html.Div("This is layout 2")
if __name__ == '__main__':
app.run_server(debug=True)
标签:__,dash,layout,app,Dash,html
From: https://blog.csdn.net/u010528690/article/details/140795045