基于Qt实现的163音乐登录界面

闲来无事，前同事做登录界面遇到问题再三 “骚扰”在下。缘由，自己也依样画葫芦写了个基于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~