Qt实战开发-CSDN登陆界面布局

在布局中需要用到的函数

• Lable显示图片
• button显示图片
• 去除button的边框
• 水平布局
• 垂直buju
• GroupBox
• QLineEdit

• QCheckBox

  使用到的重要函数

• QPixmap他是继承了QPaintDevice为图形显示做了优化，在绘图中可以使用函数drawPixmap()函数可以把这个文件绘制到一个QLabel上；还可以setPixmap（）函数添加到lable， 例如QPixmap pixmap(":/Images/pic/logo.png");
mImageLabel->setPixmap(pixmap);

• setText（）可以设置控件的标题
• setPlaceholderText();setEchoMode();这两个函数设置单行文本的密码的处理。
• setStyleSheet()对按钮的外观进行设置mLoginButton->setStyleSheet("QPushButton{color: white; font: 15pt 微软雅黑 bold; background-color:orange;}");设置文本字体，背景图片，字体颜色。 mAccountLogin->setStyleSheet(“border:none”); //隐藏边框线`
• setFixedHeight（）设置固定的高度
• 布局中要用到的addWidget();添加一个窗口，addLayout（）；添加一个布局；setSpacing（）添加布局间的距离；addStretch（）；自由伸缩，常用在两段；setLayout（）；在布局中放在最后，做一个总的布局框架。

• setMargin（）；设置距离边框的距离；
  布局的思路

• 采用的方式是水平布局和垂直布局的方法

• 布局思路如下图
  
  每一个边框代表的就是一个布局

代码

#ifndef DIALOG_H
#define DIALOG_H

#include <QDialog>
#include <QLabel>
#include <QLineEdit>
#include <QCheckBox>
#include <QPushButton>

class QLineEdit;
class QString;
class Dialog : public QDialog
{
    Q_OBJECT

public:
    Dialog(QWidget *parent = 0);
    ~Dialog();
private:
    QLabel *mImageLabel; //图片
    QLabel *mNoCSDN; //没有CSDN
    QLabel *mVerticalBar;  //竖线
    QLabel *mThirdPartyLogin;  //第三方登录
    QPushButton *mAccountLogin; //账号登陆
    QPushButton *mQuickLogin;   //手机快捷登陆
    QPushButton *mRegisterButton;   //注册
    QPushButton *mForgotButton ;   //忘记密码
    QPushButton *mSina;   //新浪
    QPushButton *mLinked;  //领英
    QPushButton *mBaidu;   //百度
    QPushButton *mTencent; //腾讯
    QPushButton *mGithub;  //Github
    QPushButton *mWechat;  //微信
    QPushButton *mLoginButton;  //登陆
    QLineEdit *mUserLineEdit;   //输入账号
    QLineEdit *mPasswordLineEdit; //输入密码
    QCheckBox *mAutoLoginCheckBox; //自动登陆

};

#endif // DIALOG_H

#include "dialog.h"
#include <QGridLayout>
#include <QAction>
#include <QLineEdit>
#include <QPushButton>
#include <QMessageBox>
#include <QHBoxLayout>
#include <QVBoxLayout>
#include <QGroupBox>

Dialog::Dialog(QWidget *parent)
    : QDialog(parent)
{
    resize(800,400);
   //setStyleSheet("background-color:black;");
    //对象的初始化
    mImageLabel =new QLabel(this);
    mNoCSDN =new QLabel(this);
    mVerticalBar=new QLabel(this);
    mThirdPartyLogin =new QLabel(this);
    mAccountLogin =new QPushButton(this);
    mQuickLogin =new QPushButton(this);
    mRegisterButton =new QPushButton(this);
    mForgotButton =new QPushButton(this);
    mSina =new QPushButton(this);
    mLinked =new QPushButton(this);
    mBaidu =new QPushButton(this);
    mTencent =new QPushButton(this);
    mGithub =new QPushButton(this);
    mWechat =new QPushButton(this);
    mLoginButton =new QPushButton(this);
    mUserLineEdit =new QLineEdit(this);
    mPasswordLineEdit =new QLineEdit(this);
    mAutoLoginCheckBox =new QCheckBox(this);


    // 设置头像
    /**************
     *QLable显示图片 和绘图两种方式，我下去lable
     *QPixmap继承了QPaintDevice
     *QPixmap专门为图像在屏幕上的显示做了优化
     *绘图的方法使用drawPixmap()函数可以把这个文件绘制到一个QLabel、QPushButton或者其他的设备上面
     *Scaled 按比例缩小
     *************/
    QPixmap pixmap(":/Images/pic/logo.png");
    mImageLabel->setPixmap(pixmap);
    mImageLabel->setGeometry(1,1,400,400); //测试用。布局后失效
    mImageLabel->setScaledContents(true); //设置QLabel自动缩放，既：显示图像大小自动调整为Qlabel大小。

    QAction *mImageAction = new QAction(this);
    mImageAction->setIcon(QIcon("C:/pic/lock.ico"));

    // 设置文本
    mUserLineEdit->setPlaceholderText(QStringLiteral("输入用户名/邮箱/手机号"));
    mPasswordLineEdit->setPlaceholderText(QStringLiteral("输入密码"));
    mPasswordLineEdit->setEchoMode(QLineEdit::Password);
    mAutoLoginCheckBox->setText(QStringLiteral("下次自动登录"));
    mLoginButton->setText(QStringLiteral("登录"));
    mRegisterButton->setText(QStringLiteral("立即注册"));
    mForgotButton->setText(QStringLiteral("忘记密码"));
    mAccountLogin->setText(QStringLiteral("账号登陆"));
    mQuickLogin->setText(QStringLiteral("手机快捷登陆"));
    mThirdPartyLogin->setText(QStringLiteral("第三方登录"));
    mNoCSDN->setText(QStringLiteral("还没有CSDN账号？"));
    mVerticalBar->setText(QStringLiteral("|"));

    mAccountLogin->setStyleSheet("border:none");   //隐藏边框线
    mQuickLogin->setStyleSheet("border:none");
    mForgotButton->setStyleSheet("border:none");
    mRegisterButton->setStyleSheet("border:none");

     mUserLineEdit->setFixedSize(250,35);
     mPasswordLineEdit->setEchoMode (QLineEdit::Password);
     mPasswordLineEdit->setFixedSize(250,35);
     mLoginButton->setFixedSize(250,35);
    mLoginButton->setStyleSheet("QPushButton{color: white; font: 15pt 微软雅黑 bold; background-color:orange;}");

    mSina->setStyleSheet("QPushButton{ background:url(:Images/pic/sina.png)-60px 0px no-repeat;}");
    mLinked->setStyleSheet("QPushButton{ background:url(:Images/pic/lingying.png)-60px 0px no-repeat;}");
    mBaidu->setStyleSheet("QPushButton{ background:url(:Images/pic/baidu.png)-60px 0px no-repeat;}");
    mTencent->setStyleSheet("QPushButton{ background:url(:Images/pic/tencent.png)-60px 0px no-repeat;}");
    mGithub->setStyleSheet("QPushButton{ background:url(:Images/pic/github.png)-60px 0px no-repeat;}");
    mWechat->setStyleSheet("QPushButton{ background:url(:Images/pic/wechat.png)-60px 0px no-repeat;}");

     mSina->setFixedHeight(35);
     mLinked->setFixedHeight(35);
     mBaidu->setFixedHeight(35);
     mTencent->setFixedHeight(35);
     mGithub->setFixedHeight(35);
     mWechat->setFixedHeight(35);


    //QGridLayout *mGridLayout = new QGridLayout();
     //布局
     QGroupBox *mgroupBox1 = new QGroupBox(this);
     QGroupBox *mgroupBox2 = new QGroupBox(this);

    QHBoxLayout *mHLayout1 = new QHBoxLayout;
    QHBoxLayout *mHLayout2 = new QHBoxLayout;
    QHBoxLayout *mHLayout3 = new QHBoxLayout;
    QHBoxLayout *mHLayout4 = new QHBoxLayout;
    QHBoxLayout *mHLayout5 = new QHBoxLayout;

     QVBoxLayout *mVLayout1 = new QVBoxLayout;
     QVBoxLayout *mVLayout2 = new QVBoxLayout;
     QVBoxLayout *mVLayout3 = new QVBoxLayout;

    mHLayout1->addWidget(mAccountLogin,Qt::AlignRight);
    mHLayout1->addWidget(mVerticalBar);
    mHLayout1->setSpacing(1);
    mHLayout1->addWidget(mQuickLogin,Qt::AlignRight);

    mHLayout2->addWidget(mAutoLoginCheckBox,Qt::AlignHCenter);
    mHLayout2->addWidget(mForgotButton,Qt::AlignHCenter);

    mVLayout1->addLayout(mHLayout1);
    mVLayout1->addWidget(mUserLineEdit,Qt::AlignHCenter);
    mVLayout1->addWidget(mPasswordLineEdit,Qt::AlignHCenter);
    mVLayout1->addLayout(mHLayout2);
    mVLayout1->setSpacing(20);
    mVLayout1->addWidget(mLoginButton,Qt::AlignHCenter);
    mVLayout1->addStretch();
    //mVLayout1->setContentsMargins(0,0,0,0);
    mgroupBox1->setLayout(mVLayout1);

    mHLayout3->addWidget(mSina);
    mHLayout3->addWidget(mLinked);
    mHLayout3->addWidget(mBaidu);
    mHLayout3->addWidget(mTencent);
    mHLayout3->addWidget(mGithub);
    mHLayout3->addWidget(mWechat);

    mHLayout4->addWidget(mNoCSDN);
    mHLayout4->addWidget(mRegisterButton);
    mVLayout2->addWidget(mThirdPartyLogin);

    mVLayout2->addLayout(mHLayout3);
    mVLayout2->addLayout(mHLayout4);
    mVLayout2->setSpacing(20);
    mgroupBox2->setLayout(mVLayout2);

    mVLayout3->addWidget(mgroupBox1);
    mVLayout3->addWidget(mgroupBox2);
  //  setLayout(mVLayout3);
    mHLayout5->addStretch();// 添加伸缩
    mHLayout5->addWidget(mImageLabel);
    mHLayout5->setSpacing(20);
    mHLayout5->addLayout(mVLayout3);
    mHLayout5->addStretch();

    mHLayout5->setMargin(100);
    this->setLayout(mHLayout5);

}

Dialog::~Dialog()
{

}

总的效果图

源代码
http://download.csdn.net/detail/osean_li/9770519