【Dash】Dash 应用的布局 app.layout

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)