本文示例代码已上传至我的仓库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
以上就是本文的全部内容,欢迎在评论区与我进行讨论,「点赞」越多下一期更新越快哦~
加入我们的知识星球【我们谈论数据科学】
爱上数据分析!
领取专属 10元无门槛券
私享最新 技术干货