本文最后更新于:7 个月前
框架类图
效果预览
完整项目及资源文件请在Github查看。
页面布局
初始化标题栏
1 2 3 4 5 6 7 8 9 10 11 12 13
| void LoginWindow::initMyTitle() { m_titleBar->move(0, 0); m_titleBar->raise(); m_titleBar->setBackgroundColor(100, 0, 0, true); m_titleBar->setButtonType(MIN_BUTTON); m_titleBar->setTitleWidth(this->width()); m_titleBar->setMoveParentWindowFlag(false); ui->pButtonArrow->raise(); }
|
raise()
将控件置于顶层
程序在打开后一般都在所有窗体的顶层,打开其他程序后之前的程序就会被放到下一层,在这里,当设置完my_titleBar
后对其他控件操作就会把my_titleBar
控件覆盖。所有要用raise()
方法将其置于顶层。
初始化窗口
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40
| void LoginWindow::initWindow() { QLabel* pBack = new QLabel(this); QMovie *movie = new QMovie(); movie->setFileName(":/Resources/LoginWindow/back.gif"); pBack->setMovie(movie); movie->start(); pBack->move(0, 0);
ui->accountComboBox->setEditable(true); QLineEdit* lineEdit = ui->accountComboBox->lineEdit(); lineEdit->setPlaceholderText(QStringLiteral("QQ号码/手机/邮箱")); QRegExp regExp("[A-Za-z0-9_]{6,30}"); lineEdit->setValidator(new QRegExpValidator(regExp,this)); ui->passwordEdit->setPlaceholderText(QStringLiteral("密码"));
m_keyboardButton = new QPushButton(); m_keyboardButton->setObjectName("pButtonKeyboard"); m_keyboardButton->setFixedSize(QSize(16, 16)); m_keyboardButton->setCursor(QCursor(Qt::PointingHandCursor));
QHBoxLayout* passwordEditLayout = new QHBoxLayout(); passwordEditLayout->addStretch(); passwordEditLayout->addWidget(m_keyboardButton); passwordEditLayout->setSpacing(0); passwordEditLayout->setContentsMargins(0, 0, 8, 0);
ui->passwordEdit->setLayout(passwordEditLayout); ui->passwordEdit->setTextMargins(0, 0, m_keyboardButton->width() + 12, 0);
ui->userHead->setPixmap(QPixmap(":/Resources/LoginWindow/HeadImage.png")); ui->loginState->setIcon(QIcon(":/Resources/LoginWindow/LoginState/state_online.png")); ui->loginState->setIconSize(QSize(13, 13)); }
|
lineEdit->setPlaceholderText
QStringLiteral:如果该QString不会修改的话,那使用QStringLiteral
setPlaceholderText()
设置文本提示
该方法可以设置文本框中的默认文字提示,如图片中的QQ号码/手机/邮箱。
setCursor()
设置鼠标形态
共有以下19种鼠标形态:
图片来自这里
addStretch()
布局加入弹簧
1 2 3
| QHBoxLayout* passwordEditLayout = new QHBoxLayout(); passwordEditLayout->addStretch(); passwordEditLayout->addWidget(m_keyboardButton);
|
addStretch()
用来在布局中平分布局,他就是个弹簧的作用。如果不加参数,就是等于加个弹簧,会把小键盘图标挤到边上。如图:
如果将代码改一下:
1 2 3 4
| QHBoxLayout* passwordEditLayout = new QHBoxLayout(); passwordEditLayout->addStretch(1); passwordEditLayout->addWidget(m_keyboardButton); passwordEditLayout->addStretch(1);
|
意思就是将除了小键盘图标以外的空间分成两份,那么刚好小键盘图标就是在中间位置,就像两遍各防止了一个弹簧。效果如下:
setSpacing()
设置空间之间上下距离,还有一个容易混淆的设置setMargin()
表示设置空间与窗口边缘的左右距离。
setContentsMargins
设置左侧、顶部、右侧和底部边距,以便在布局周围使用。
现在我们设置的是setContentsMargins(0, 0, 8, 0)
,现在我们设置大一点看看效果。
QLineEdit.setTextMargins(left=,top=,right=,bottom=)
设置文本边距,这里主要为了设置密码输入过长时,最后一个字符距离小键盘图标有一定间隙。
初始化用户登录信息
1 2 3 4 5 6 7 8 9 10 11
| void LoginWindow::initAccountList() { for (int i = 0; i < 3; i++) { AccountItem *account_item = new AccountItem(); account_item->setAccountInfo(i, QStringLiteral("Dominic_%1号").arg(i), QString(":/Resources/LoginWindow/headImage/head_%1.png").arg(i)); QListWidgetItem *list_item = new QListWidgetItem(m_Accountlist); m_Accountlist->setItemWidget(list_item, account_item); } }
|