Qt界面外观装饰

• Qt风格

Qt中各种风格是一组继承自QStyle的类，QStyle类是一个抽象基类，封装了一个GUI的外观。Qt的内建部件使用它来执行几乎所有的绘制工作，确保看起来像各个平台上的本地部件一样。

 

比如：指定程序运行时使用Fusion风格

 

int main(int argc, char *argv[])

{

QApplication a(argc, argv);

 

a.setStyle(QStyleFactory::create("Fusion"));

 

    MainWindow w;

    w.show();

 

    return a.exec();

}

 

比如设置单独控件为具体某种风格：

 

MainWindow::MainWindow(QWidget *parent) :    QMainWindow(parent),

    ui(new Ui::MainWindow)

{

    ui->setupUi(this);

    ui->progressBar->setStyle(QStyleFactory::create("Fusion"));

}

 

• 调色板

//获取pushbutton的调色板

 QPalette palette = ui->pushButton->palette();

 //设置按钮文本颜色为红色

 palette.setColor(QPalette::ButtonText, Qt::red);

 

 //设置按钮背景颜色为绿色，这两种方式都不起作用，

 //因为在windows中QPushButton的颜色涉及到样式表，所以应该设置样式表才可以

 //palette.setColor(QPalette::Button, Qt::green);

 //palette.setColor(QPalette::Background, Qt::green);

 

 //pushButton使用修改后的调色板

 ui->pushButton->setPalette(palette);

 

 ui->pushButton->setStyleSheet("background-color: rgb(170, 0, 255);");

 

 

 //设置spinBox不可用

 ui->spinBox->setDisabled(true);

 

 QPalette palette2 = ui->spinBox->palette();

 //设置spinBox不可用时的背景颜色为蓝色

 palette2.setColor(QPalette::Disabled, QPalette::Base, Qt::blue);

 ui->spinBox->setPalette(palette2);

 

• 样式表

1. Qt样式表介绍

Qt样式表是一个可以自定义外观的十分强大的机制，除了那些能够通过子类化QStyle更改的外观，其余的都可以使用Qt样式来美化。

 

样式表可以使用QApplication::setStyleSheet()函数将其设置到整个应用程序

也可以使用QWidget::setStyleSheet()函数将其设置到一个指定的部件以及他的子部件上。

 

1、在代码中设置样式表

 

ui->pushButton->setStyleSheet("background:yellow");

ui->horizontalScrollBar->setStyleSheet("background:blue");

想对所有的相同部件都使用相同的样式表，可以在其父部件上设置样式表

 

setStyleSheet("QPushButton{background:yellow}QScrollBar{background:blue}");

 

2、在设计模式中设置样式表

1. Qt样式表语法

1. 样式规则

样式表包含一些列的样式规则，每一个样式规则由选择器和声明组成。

选择器指定了受该规则影响的部件；

声明指定了这个部件上设置的属性；

 

QPushButton{color:red}

 

QPushButton是选择器，{color:red}是声明，color是属性，red是值；

 

这个规则指定了QPushButton和它的子类应该使用红色作为前景色。

 

Qt样式表中一般不区分大小写。

 

多个选择器指定相同的声明，使用逗号隔开。

 

QPushButton, QLineEdit, QComboBox{color : red}

 

样式规则的声明部分可以是一些“属性：值”对组成的列表，使用分号分隔

 

QPushButton {color : red ; background-color : white}