GUI五:认识Qt样式表
通过GUI前几篇文章我们已经学会了使用Qt创建界面了。不过现在的界面还是素颜的,为了对得起观众,有必要给她化个妆。这时就轮到样式表出场了。
样式表是Qt中用来描述外观的一种语言,简称qss 。她类似于网页里的css。qss可以让我们快速美化界面,又能将美化工作独立出来,非常的实用。
例:在GUI四的基础之上稍作修改
Widget::Widget(QWidget *parent) : QWidget(parent), ui(new Ui::Widget) { QLabel* lblUser = new QLabel(QString("用户:"),this);//创建一个标签 lblUser->setStyleSheet(QString("color:darkgray; font-weight:bold;")); //设置样式 QLineEdit* ldtUser = new QLineEdit(this); //创建一个单行输入框 ldtUser->setMinimumHeight(25); ldtUser->setStyleSheet(QString("border:1px solid lightgray; background:white; border-radius:5px;")); QLabel* lblPwd = new QLabel(QString("密码:"),this); lblPwd->setStyleSheet(QString("color:darkgray; font-weight:bold;")); QLineEdit* ldtPwd = new QLineEdit(this); ldtPwd->setMinimumHeight(25); ldtPwd->setStyleSheet(QString("border:1px solid lightgray; background:white; border-radius:5px;")); QPushButton* btnLogin = new QPushButton(QString("登录"),this); //创建一个按钮 btnLogin->setMinimumSize(70,25); btnLogin->setStyleSheet(QString("QPushButton{border:none; color:white; background:#90aaee;}" "QPushButton:hover{background:#aabbff;}")); QGridLayout* mainLayout = new QGridLayout; mainLayout->addWidget(lblUser,0,0,1,1); mainLayout->addWidget(ldtUser,0,1,1,1); mainLayout->addWidget(lblPwd,1,0,1,1); mainLayout->addWidget(ldtPwd,1,1,1,1); mainLayout->addWidget(btnLogin,2,0,1,2,Qt::AlignHCenter); //登录按钮占两列水平居中 mainLayout->setHorizontalSpacing(8); //水平方向的间隔 mainLayout->setVerticalSpacing(15); //设置垂直方向间隔 setLayout(mainLayout); }
void Widget::paintEvent(QPaintEvent *) { QPainter painter(this); painter.fillRect(rect(),Qt::white); }
首先重载了paintEvent,将窗口设置为白色的背景,接着每个控件都有调用了setStyleSheet函数。这个函数就是Qt设置样式表的函数,参数是一个QString。样式表的格式为"属性:值" 。例如background:white,表示设置背景为白色。 border:1px solid lightgray表示设置边框为1个像素浅灰色的实线。当然不同的控件有着不同的属性,样式表的规则也不止这些,后续学习中继续深入。