零基础python编程系统课（木辛老师的编程课堂之Python和Qt实战慕课软件开发）

注册界面的作用是非常重要的，是留住用户的第一个门槛！

注册界面友好且足够吸引人，用户就会在非常愉快的心情下完成注册，并且会对当前的这个项目产生好感。快点跟着木辛老师一起学习吧！

请点击右上角“关注”按钮关注我们哟：跟着木辛老师学习Python编程知识，变身快乐的编程达人吧~

之前的课程，我们已经完成了登录界面的开发，接下来呢，我们会对注册页面的开发分步骤进行讲解。

用户注册

注册界面的作用是非常重要的，是一个留住用户的第一个门槛！

注册界面友好且足够吸引人，用户就会在非常愉快的心情下完成注册，并且会对当前的这个项目产生好感。

不论是对人，对事，还是对软件的项目，吸睛的第一印象，和优化的挽留用户的手段，是这个事情成功最重要的第一步。

注册方式

一般情况下，软件提供注册的方式包括且不局限于以下几种：

1. 静默注册，用户打开软件的第一时间，获取当前设备的唯一标识码，作为用户身份的标识
2. 第三方授权登录，这种注册方式是目前最为广泛，且最友好的；通过包括不仅限于微信授权、QQ授权、支付宝授权、淘宝授权、华为授权等方式进行注册，直接拉取第三方平台上用户的部分信息
3. 手机号注册，这种方式是通过手机号下方验证码的方式完成
4. 邮箱密码注册，通过发送邮件的方式获取登录验证
5. 用户名密码注册，通过用户在软件注册页面输入信息

页面UI

木辛老师今天带来这大家来尝试一下制作注册页面，效果如下：

注册页面效果图

需求分析

我们采用了最简单的注册方式：使用用户名和密码注册新用户

软件的需求如下：

1. 需要用户提供姓名、学号、密码和确认密码四个必填项
2. 需要选择用户身份：学生、教师、后期制作
3. 通过点击“注册”按钮，完成注册
4. 点击“《xxxxxxx协议》”需要跳转到注册协议页面
5. 如果用户不想注册了，点击“取消”按钮，应该跳转到登录页面
6. 另外，左侧布局仍然与登录页面相同采用了通用背景图片和logo组合的方式
7. 右侧顶端，仍然需要显示软件标题和关闭按钮，最小化按钮

开始制作

首先我们还是需要打开Qt Designer工具，进行页面布局的初步设计。

控件布局情况

大概齐，我们需要的控件如上图所示，大家看一下页面结构吧，页面中总共包含这几类控件：

1. QPushButton
2. QCheckBox
3. QComboBox
4. QLineEdit
5. QLabel

如上五类控件。

然后，大家PyCharm进行QSS样式设置和逻辑代码的实现。通过PyCharm的插件PyUIC将.ui文件转换为.py文件，并打开看一下代码结构。

此时，我们还是采用界面和逻辑分离的方式编写代码，所以需要先新建Python的逻辑文件，我们姑且叫做CallRegisterMainWin.py吧。

通过这个Python文件去调用注册页面的逻辑。

输入框样式设置

通过设计稿，可以看到输入框的样式比较统一，我们通过QSS的类型选择器，给对应控件设置样式

QLineEdit { background-color: #DEDFE1; font-size: 12px; color: #262727; padding: 7 10 9 10; border-width:0; border-style:outset; }

填充用户身份下拉列表控件的数据和样式

用户身份总共包含：学生、教师、后期制作三个身份；

第一步，需要先将这些输入填入combobox控件

identities = ["教师", "学生", "制作"] self.comb_identities.addItems(identities) self.comb_identities.activated[int].connect(self.change_identity)

第二步，需要连接下拉框选中事件对应的槽函数，我们定义如下：

@pyqtSlot(int) def change_identity(self, index): if index == 0: self.identity = teacher elif index == 1: self.identity = student elif index == 2: self.identity = editor

第三步，设置combobox的QSS样式

QComboBox:down-arrow { image: url(images/drop_down.png) } #comb_identities { border-radius: 3px; border: 1px solid #E2E2E2; padding: 5 23 5 23 }

设置按钮样式

在登录界面，我们设置了登录确认按钮的样式，在这里直接复用就可以了。另外需要设置“取消”按钮的样式。

通过类型选择器将共同的属性设置完毕之后，再根据不同按钮的区别，通过ID选择器分别设置，代码如下：

QPushButton { color: #ffffff; border-width:0; border-style:outset; font-size: 12px; } #btn_confrim_register { background: #FAAB1E; } #btn_cancel_register { background: #B5C0CC; }

咱们运行一下看看效果吧：

注册页面初步实现效果

QCheckBox样式和跳转设置

剩下一个控件：CheckBox，“我已阅读并同意xxx协议”这个里，我们需要为CheckBox增加一个点击效果，通过点击文案跳转到协议详情页面。

self.chk_agreement.clicked.connect(self.go_agreement_page)

一般情况下，协议文件这里，都会保持默认选中状态，这样比较方便用户操作。

self.agreement_chkbox.setChecked(True)

最后，检查一下页面跳转逻辑和其他逻辑

注册的时候，需要用户名、学号，和密码是必填项；并且两次输入的密码需要一致。

所以呢，我们需要在点击“注册”按钮之后，判断输入框中的内容

两次密码是否一致

判断两次密码是否一致

是否已经输入了用户名

判断用户是否输入内容

如果上述验证全部通过了，说明用户的输入是没有问题的，就可以提交注册了！

好了，今天的课程就到这里吧，今天木辛老师带领着大家学习了如何实现一个注册界面，并通过QSS将页面的控件，进行了样式设置，咱们下节课再见吧~

请大家关注木辛老师的课程哟，获取更多编程知识和编程技巧。

快乐编程，快乐成长！

,