Python＋Dash快速web应用开发——页面布局篇

本文示例代码已上传至我的仓库https://github.com/CNFeffery/DataScienceStudyNotes

1 简介

这是我的系列教程「Python+Dash快速web应用开发」的第二期，在上一期中，我带领大家认识了什么是，可以做什么，以及中最基本的一些概念，而今天开始，我将开始带领大家正式学习有关的实用知识，以及各种奇淫巧技~

图1

今天的文章，我将带大家学习中「页面布局」的先进方法，通过今天的文章，你将学会以非常简单的方式实现现代化的页面布局，下面让我们开始吧~

2 为Dash应用设计页面布局

我们都知道，一个好的网页设计通常都需要编写甚至来定制前端内容，譬如非常流行的框架。

图2

但我们既然想使用来搭建web应用，很大的一个原因是不熟悉或者不想写繁琐的前端代码，而的第三方拓展库中就有这么一个库——，借助它，我们就可以纯编程调用到 框架中的诸多特性来让我们的web应用页面更美观。

首先需要通过来安装它，安装完成之后，我们来验证一下是否可以正常使用，推荐以的方式导入：

app1.py

执行后打开所提示的网址，看到下列信息就说明安装成功：

图3

这里我们使用到中的参数，用于引入外部的文件，有了这些补充进来的，我们才得以实现更多彩的样式，而除了上述填入的方式之外，我更推荐的方式是在我们的应用文件同级目录创建文件夹，放在这个目录中的文件会被自动扫描到：

app2.py

图4

这时在页面抓包可以看到对应的url信息指向域名下的对应目录：

图5

这种方式最稳妥，不受网络波动影响，推荐大家养成好习惯。

在测试完的可用性之后，接下来我们就开始学习构造页面布局。

2.1 认识Container()、Row()与Col()

「Container()」

封装了框架中的「网格系统」，我们在使用它进行布局时，首先要了解的是组件，它是我们组织页面元素的容器，其参数默认为False，会以两边填充空白区域的方式居中其内部嵌套的子元素：

app3.py

图6

可以看到，第一个部分呈现出两边空白填充中间居中的形式，而第二个则充满了整个水平方向。

「Row()与Col()」

在上面所介绍的之内，我们就可以按照的网格系统进行内容的排布：「行」嵌套「列」，再向「列」内嵌套各种部件。

而所谓的网格系统指的是每个部件内部分成宽度相等的「12」份，传入的部件具有参数可以传入「整数」来分配对应数量的宽度，如下例：

app4.py

图7

可以看到当部件下所有部件宽度之和为12时是正好充满的，当宽度之和不足12时剩余的宽度会被空出来，而宽度之和若大于12，则会把导致宽度溢出的部件挤到下一行中，所以我们在利用这种网格系统排布网页元素时要注意规范。

而「行部件」也是可以嵌套到上一级「列部件」中的，因此如果你觉得12份不够自己实现更精确的宽度分配，就可以写个嵌套，实现固定宽度下再次划分12份，就像下面例子中我们：

app5.py

图8

在get到这一小节的知识点后，我们就可以更规矩地编写页面内容，譬如写出下面这样的调查问卷就比较轻松（受限于篇幅，下面例子对应的不便放出代码，你可以在文章开头的仓库对应路径找到它）：

app6.py

图9

2.2 Row()与Col()部件的进阶设置

通过上一小节的例子，想必你已经学习到如何在中编排出网格系统风格的页面，而为了在已初步编排好的网页基础上做更多实用优化，还为与部件提供了一些微调布局的参数：

「利用order设定顺序」

我们在前面为部件所设定的参数都只是1到12之间的整数，其实它还可以接受字典输入，从而拓展其功能，原先的整数宽度输入就由转化为。

除此之外，我们还可以添加键参数来为同一个下的部件设置顺序，接受三种输入：表示置于当前行第一列，表示置于当前行最后一列，而1到12的整数则可以直接以序号编排列部件顺序。

结合下面这个简单的例子理解这部分内容：

app7.py

可以很直观地看出参数对列部件顺序的影响：

图10

「利用offset设置偏移」

列部件的参数字典中还可以使用键值对参数，传入1到12的整数，它的作用是为对应的部件左侧增加对应宽度的位移，就像下面的例子一样：

app8.py

为了更明显，我给每个部件加了轮廓线，可以看到效果非常直观：

图11

「设置水平对齐方式」

在前面的内容中，我们在同一个部件下组织的所有部件，其顺序都是从左到右一个紧贴下一个排布的，即使设置了参数，也只是插空后紧贴。

但在很多页面布局需求中需要对于同一行的多个列元素设置「对齐方式」，这在中可以通过对部件设置参数来实现，可选项有、、、以及五种，每种产生的效果如下面的例子：

app9.py

图12

2.3 实际案例

通过对上面知识内容的学习，我们掌握了如何基于拓展库，在中实现的网格系统。

下面我们来利用今天学到的知识点，搭建下图所示的登录页面，其中涉及到一些还未给大家介绍的知识点，但很简单，之后的课程会介绍，而涉及到一些额外的css的内容我都已写好注释非常简单~

图13

对应代码如下：

app10.py

以上就是本文的全部内容，欢迎在评论区与我进行讨论，「点赞」越多下一期更新越快哦~

加入我们的知识星球【我们谈论数据科学】

爱上数据分析！