基于Qt实现的163音乐登录界面
来源:互联网 发布:mac截图路径 编辑:程序博客网 时间:2024/05/12 21:05
闲来无事,前同事做登录界面遇到问题再三 “骚扰”在下。缘由,自己也依样画葫芦写了个基于QWidget+qss的登录界面。
闲话就不多扯了,先上图,主要为了方便理解代码更直观,有参考。
如图所示,我把界面分割成三部分去实现,这三个部分都是放在独立的QWidget中然后用一个QVBoxLayout来布局整个界面。
首先看 下登录界面最顶层QWidget的实现代码:
//登录界面最顶层布局 auto topWidget = new QWidget(this); topWidget->setObjectName("topWidget"); topWidget->setFixedSize(360,160); auto topWidgetHLayout = new QHBoxLayout(topWidget); auto iconLab = new QLabel(topWidget); iconLab->setObjectName("iconLab"); auto txtLab = new QLabel("163音乐",topWidget); txtLab->setAlignment(Qt::AlignCenter); topWidgetHLayout->addWidget(iconLab); topWidgetHLayout->addWidget(txtLab); topWidget->setLayout(topWidgetHLayout);由于代码中用到c++11的auto,所以要在pro工程文件中加上 CONFIG+=c++11 。
最顶层主要是图标QLabel和文字QLabel通过QHBoxLayout布局在topWidget里面。
接着就是中间层界面布局的实现代码:
//登录界面中间层布局 auto middleWidget = new QWidget(this); middleWidget->setFixedSize(360,300); auto accountWidget = new QWidget(middleWidget); accountWidget->setObjectName("accountWidget"); accountWidget->setGeometry(40,20,280,50); auto accountBtn = new QPushButton(accountWidget); accountBtn->setObjectName("accountBtn"); auto accountLedt = new QLineEdit(accountWidget); m_accountLineEdit = accountLedt; accountBtn->setGeometry(10,0,30,50); accountLedt->setGeometry(40,0,230,50); accountLedt->setPlaceholderText(QObject::tr("请输入账号")); auto pwdWidget = new QWidget(middleWidget); pwdWidget->setObjectName("pwdWidget"); pwdWidget->setGeometry(40,80,280,50); auto pwdBtn = new QPushButton(pwdWidget); pwdBtn->setObjectName("pwdBtn"); auto pwdLedt = new QLineEdit(pwdWidget); m_pwdLineEdit = pwdLedt; pwdBtn->setGeometry(10,0,30,50); pwdLedt->setGeometry(40,0,230,50); pwdLedt->setPlaceholderText(QObject::tr("请输入密码")); pwdLedt->setEchoMode(QLineEdit::Password); auto loginBtn = new QPushButton(QObject::tr("登录"),middleWidget); loginBtn->setObjectName("loginBtn"); loginBtn->setGeometry(40,140,280,50); auto registerBtn = new QPushButton(QObject::tr("还没有账号,点此注册"),middleWidget); registerBtn->setObjectName("registerBtn"); registerBtn->setGeometry(40,200,280,50);
参照文章开头的图片可以很明了的理解每一行代码,这里就不再详细介绍了,你要关心的只是界面上每个控件要摆放的位置加上灵活地使用布局就可以构建出完美的ui。
界面最底部的代码实现如下:
//登录界面底层布局 auto bottomWidget = new QWidget(this); bottomWidget->setFixedSize(360,80); auto bottomLayout = new QHBoxLayout(bottomWidget); auto threePartyLogInBtn = new QPushButton(QObject::tr("第三方登录"),bottomWidget); threePartyLogInBtn->setObjectName("threePartyLogInBtn"); auto splitteLab = new QLabel("|",bottomWidget); splitteLab->setObjectName("splitteLab"); splitteLab->setFixedWidth(6); auto forgetPwdBtn = new QPushButton(QObject::tr(" 忘记密码?"),bottomWidget); forgetPwdBtn->setObjectName("forgetPwdBtn"); bottomLayout->addWidget(threePartyLogInBtn); bottomLayout->addWidget(splitteLab); bottomLayout->addWidget(forgetPwdBtn);
最底部的主要由两个按钮和中间显示“|”的一个标签组成。
最后就是用垂直布局实现整个登录界面的布局,具体代码如下所示:
//布局整个页面 mainLayout->addWidget(topWidget); mainLayout->addWidget(middleWidget); mainLayout->addWidget(bottomWidget); mainLayout->setSpacing(0); mainLayout->setMargin(0); this->setLayout(mainLayout);
manLayout是一个QVBoxLayout,这里要提示一下小伙伴们的是记得把布局setSpacing(0):设置布局的中的控件间隙为0;setMargin(0)设置布局的上下左右边框的间隙为0。因为楼主的登录界面是使用的绝对的坐标去实现控件摆放的位置的,如果你没设置这两个属性为0,当你去用代码给控件设置坐标位置时就会摸不着头脑。楼主一开始就是因为忘了设置导致一直以为控件的宽和高设置的没错但是就是达不到自己在草稿纸上自己粗略布局的效果,相差甚远。最后,发现就是这两个属性忘了设置成0的原因。因为Qt默认给这两个属性的值不是0,所以就会在摆放控件位置的时候出现各种摸不着头脑。
最后,当然少不了用强大的qss样式表来给ui穿上一件靓丽的衣服了。
楼主将整个界面的样式都写在一个叫做style.qss中,在程序的开头读取这个样式文件的所有内容然后通过setStylesheet(const QString& sheet )设置样式。
上qss代码:
QLabel { color:red; font:bold 36px;}QLabel#iconLab { image:url(":/image/bg.png");}QLabel#splitteLab { color:black; text-align:center; font:18px;}QPushButton#accountBtn { border:none; image:url(":/image/icon1.png");}QPushButton#pwdBtn { border:none; image:url(":/image/icon2.png");}QPushButton#loginBtn { border:none; background-color:rgb(233,233,233); border-radius:15px; text-align:center;}QPushButton#loginBtn:pressed { border:none; background-color:rgb(222,222,222);}QPushButton#loginBtn:hover { border:none; background-color:rgb(222,222,222);}QPushButton#registerBtn { border:none; color:blue; text-align:center bottom;}QPushButton#threePartyLogInBtn { border:none; text-align:right;}QPushButton#forgetPwdBtn { border:none; text-align:left;}QWidget#accountWidget,#pwdWidget { border:solid 1px white; background-color:white; border-radius:15px;}QLineEdit{ border:none; border-radius:5px;}
最后,希望楼主的代码有给你带来帮助,鉴于楼主水平有限,有不足和有待提高的地方还是很多,期待你的意见。
Enjoy coding~
1 0
- 基于Qt实现的163音乐登录界面
- 【QT】:QT实现登录界面
- QT实现一个登录界面
- qt基于qstackedwidget的同一窗口界面变换实现
- 登录界面的实现
- 登录界面的实现
- QT学习笔记(实现登录注册界面)
- QT模拟实现网页登录界面
- qt 完全实现qq翻转登录界面
- 基于QT的音乐播放器
- 基于QT的音乐播放器
- 基于QT的五子棋音乐部分功能
- Qt基于libzplay库的音乐播放工具
- 基于Qt的Caffe界面
- Qt(二)--- 使用Qt完成QQ登录界面的输入文本框的实现
- 音乐播放器-引导界面的实现
- 【Qt编程】基于Qt的词典开发系列<八>--用户登录及API调用的实现
- QT仿QQ音乐界面
- 新手机器学习-tensorflow
- 用API函数读写初始化文件(*.ini)的方法
- 日交易笔百万级,Ping++的大数据平台架构
- C/C++:提升_指针的指针和指针的引用
- 飞行员配对方案问题
- 基于Qt实现的163音乐登录界面
- 开发的辅助外挂
- 3天撸完一个团队半年的项目,单客户数据动辄几百万的行业也玩云?
- Api编程 Api取COOKIE
- settings->about phone->Build number 修改系统版本号
- 搭建Android开发环境
- java中for与foreach的区别?
- 技术创业难?看汇合营销如何玩转大数据与机器学习
- 同步请求和异步请求的区别