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个像素浅灰色的实线。当然不同的控件有着不同的属性,样式表的规则也不止这些,后续学习中继续深入。

    


标签: gui 样式表

演示站
上一篇:GUI四:Qt网格布局
下一篇:初识QFile

发表评论