（資料科學學習手札108）Python+Dash快速web應用開發——靜態部件篇（上）
阿新 • • 發佈：2021-02-20
> 本文示例程式碼已上傳至我的`Github`倉庫[https://github.com/CNFeffery/DataScienceStudyNotes](https://github.com/CNFeffery/DataScienceStudyNotes)
# 1 簡介
這是我的系列教程**Python+Dash快速web應用開發**的第六期，在上一期的文章中，我們完成了對`Dash`中回撥互動高階特性的探討，在今後陸續推出的教程內容中，我們將一起來學習`Dash`生態中那些豐富的**頁面部件**，從而賦予我們打造各種強大互動式web應用的能力。
而在今天的教程內容中，我將帶大家學習`Dash`中實用的一些基礎性的**靜態部件**，它們可以幫助我們打造更加正式的web應用。
圖1
# 2 Dash中的基礎靜態部件
我們在這裡所說的靜態頁面部件，主要指的是其本身不具備直接的互動功能，而是以**呈現內容**為主要功能，就像下面的簡單對比一樣：
> app1.py
```Python
import dash
import dash_html_components as html
import dash_bootstrap_components as dbc
import dash_core_components as dcc
app = dash.Dash(__name__)
app.layout = html.Div(
dbc.Container(
[
html.Br(),
html.H1('靜態部件示例'),
html.Hr(),
html.H2('這是二級標題'),
html.H3('這是三級標題'),
html.H4('這是四級標題'),
html.P(
[
'這是一個',
html.A('連結', href='#'),
'，而這是一段',
html.Strong('加粗文字'),
'，這是一段帶上下標的文字：',
'測試',
html.Sup('上標'),
'，測試',
html.Sub('下標')
]
),
html.Br(),
html.H1('互動部件示例'),
html.Br(),
dcc.Dropdown(
options=[
{'label': '測試1', 'value': '測試1'},
{'label': '測試2', 'value': '測試2'},
{'label': '測試3', 'value': '測試3'},
]),
html.Br(),
dcc.Checklist(
options=[
{'label': '測試1', 'value': '測試1'},
{'label': '測試2', 'value': '測試2'},
{'label': '測試3', 'value': '測試3'},
],
value=['測試1']
),
html.Br(),
dcc.RangeSlider(
min=0,
max=20,
step=0.5,
value=[5, 15]
)
]
)
)
if __name__ == '__main__':
app.run_server(debug=True)
```
圖2
可以看到，靜態部件其實就是我們平時瀏覽網頁看到的各種內容元素，他們本身不直接承擔回撥互動功能，只能配合其他互動部件來實現互動功能。
## 2.1 Dash中常用的基礎靜態部件
在`Dash`中所整合的一些常用基礎性靜態部件，其實就是對一些常見`html`元素的遷移，對應著`dash_html_components`中封裝的眾多類，這裡我們只介紹部分比較常用的：
### 2.1.1 與文字格式相關的常用部件
首先我們來介紹`Dash`眾多基礎靜態部件中，與組織頁面或文字格式相關的一些：
- **H1()到H6()**
在`dash_html_components`中，`H1()`到`H6()`分別對應著1級到6級標題。
- **Br()與Hr()**
`dash_html_components`中的`Br()`表示換行，而`Hr()`則表示水平分割線，這在我們佈局元素時經常使用到。
- **P()**
`P()`用於表示一段文字或內容，典型如我們在部落格中看到的每一段落內容都是由`P()`標籤所組織的，配合`css`中的`text-indent`屬性可以用來設定首行縮排。
- **A()**
`A()`用於表示一個可點選的連結，其引數`href`用於填入對應跳轉的地址，也可以配合`id`，實現點選重新定位到頁面內的其它元素，其`target`引數用於設定跳轉方式，譬如`target="_blank"`會在新標籤頁跳轉開啟，具體內容可參考（https://www.w3school.com.cn/tags/att_a_target.asp）。
- **I()、Code()、U()、Mark()**
`I()`主要用於在段落中將包裹的文字內容變為*斜體*，`Code()`用於在一段文字中表示`程式碼片段`，`U()`用於給所包含內容新增下劃線，`Mark()`則用於高亮標註文字。
以上所介紹的這些靜態部件可以通過下面的小例子直觀的感受一下：
> 
圖3
### 2.1.2 與內容組織相關的常用部件
前面我們針對常用的一些與文字格式相關的靜態部件進行了介紹，而在實際應用中我們不僅要展示文字內容，還需要展示圖片、音訊、視訊等多媒體內容，下面我們來學習如何在`Dash`中構造更加豐富的內容展示形式：
- **基於Blockquote()實現塊引用**
利用`dash_html_components`中的`Blockquote()`，我們可以直接傳入字串，或巢狀其他元素，從而構造出塊引用，就像`markdown`中的`>`所包含渲染的內容那樣，參考下面的例子：
> app3.py
```Python
import dash
import dash_html_components as html
import dash_bootstrap_components as dbc
app = dash.Dash(__name__)
app.layout = html.Div(
dbc.Container(
html.Blockquote(
html.P('這是一段由塊引用包裹的文字內容' * 10),
style={
'background-color': 'rgba(211, 211, 211, 0.25)',
'text-indent': '3rem'
}
)
)
)
if __name__ == "__main__":
app.run_server(debug=True)
```
圖4
- **基於Ol()與Li()渲染有序列表**
利用`Ol()`巢狀多個`Li()`，可以自動渲染出帶序號的有序列表，就像下面這個簡單的例子：
> app4.py
```Python
import dash
import dash_html_components as html
import dash_bootstrap_components as dbc
app = dash.Dash(__name__)
app.layout = html.Div(
dbc.Container(
html.Ol(
[
html.Br(),
html.Br(),
html.Li('待辦事項1'),
html.Li('待辦事項2'),
html.Li('待辦事項3'),
html.Li('待辦事項4')
]
)
)
)
if __name__ == "__main__":
app.run_server(debug=True)
```
圖5
- **基於Ul()與Li()渲染層級列表**
而除了與`Ol()`相互配合之外，`Li()`還可以巢狀在`Ul()`中渲染帶層級關係的列表：
> app5.py
```Python
import dash
import dash_html_components as html
import dash_bootstrap_components as dbc
app = dash.Dash(__name__)
app.layout = html.Div(
dbc.Container(
html.Ul(
[
html.Br(),
html.Br(),
html.Li('1'),
html.Li('2'),
html.Ul(
[
html.Li('2.1'),
html.Li('2.2'),
html.Li('2.3'),
html.Ul(
[
html.Li('2.1.1'),
html.Li('2.1.2'),
html.Li('2.1.3'),
]
)
]
),
html.Li('3'),
html.Li('4')
]
)
)
)
if __name__ == "__main__":
app.run_server(debug=True)
```
圖6
- **利用Img()渲染圖片**
`Img()`等價於`html`中的`img`標籤，我們通過`src`引數傳入圖片地址來渲染出圖片，以我以前一篇部落格的作品圖片為例：
> app6.py
```Python
import dash
import dash_html_components as html
import dash_bootstrap_components as dbc
app = dash.Dash(__name__)
app.layout = html.Div(
dbc.Container(
[
html.H5('（在模仿中精進資料視覺化05）疫情期間市值增長top25公司'),
html.Img(src='https://img2020.cnblogs.com/blog/1344061/202011/1344061-20201129183046286-1089258422.png',
style={'width': '100%'})
]
)
)
if __name__ == "__main__":
app.run_server(debug=True)
```
圖7
- **利用Audio()與Video()播放音訊與視訊**
利用`Audio()`和`Video()`，我們可以通過引數`src`傳入對應音訊與視訊檔案的url地址，從而實現在網頁中嵌入音訊與視訊，其中引數`controls`必須設定為`True`否則不會正常渲染：
> app7.py
```Python
import dash
import dash_html_components as html
import dash_bootstrap_components as dbc
app = dash.Dash(__name__)
app.layout = html.Div(
dbc.Container(
[
html.H5('音訊示例：'),
html.Audio(src='https://interactive-examples.mdn.mozilla.net/media/cc0-audio/t-rex-roar.mp3',
controls=True),
html.H5('視訊示例：'),
html.Video(src='https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.mp4',
controls=True,
style={'width': '100%'}),
]
)
)
if __name__ == "__main__":
app.run_server(debug=True)
```
圖8
- **利用Iframe()嵌入其他網頁**
類似`iframe`標籤，我們也可以利用`Iframe()`來在網頁中嵌入其他網頁，可以通過`src`引數直接傳入目標網頁url，也可以通過`srcDoc`引數傳入整個網頁的html原始碼字串：
> app8.py
```Python
import dash
import dash_html_components as html
import dash_bootstrap_components as dbc
app = dash.Dash(__name__)
app.layout = html.Div(
dbc.Container(
[
html.Iframe(src='https://www.baidu.com/',
style={'width': '100%', 'height': '800px'})
]
)
)
if __name__ == "__main__":
app.run_server(debug=True)
```
圖9
- **利用Textarea()構造輸入框**
有時候我們需要構造出一個能供使用者輸入大段文字的輸入框，譬如很多的線上編輯器，而在`Dash`中我們可以使用`dash_core_components`中的`Textarea()`來實現這個功能，並且`dcc.Textarea()`同樣具有`value`和`placeholder`屬性，可以配合回撥函式實現很多功能。
譬如下面的例子中我們編寫了一個簡單的髒話和諧工具，會將使用者輸入的所有~~他媽~~替換為“**”