本章节主要介绍程序的外观相关设置，比如位置大小颜色等属性的修改。

窗体设置 #

常见的窗体设置包括标题，图标，大小，位置，透明度等。

设置方法如下。

widget.cpp

#include "widget.h"
#include <QStyle>

Widget::Widget(QWidget *parent) : QWidget(parent)
{
    // 设置标题
    setWindowTitle("this is app title");
    // 设置图标
    setWindowIcon(style()->standardIcon(QStyle::SP_DesktopIcon));
    // 设置最大尺寸
    setMaximumHeight(800);
    setMaximumWidth(1000);
    // 设置最小尺寸
    setMinimumHeight(300);
    setMinimumWidth(500);
    // 设置当前尺寸
    resize(600,400);
    // 设置固定大小
//    setFixedSize(600, 400);
    // 设置当前位置和大小, 左上角为（0，0）
//    setGeometry(0, 0, this->width(), this->height());
    // 全屏
//    showFullScreen();
    // 显示最小尺寸
//    showMinimized();
    // 显示最大尺寸
//    showMaximized();
    // 显示正常大小
    showNormal();
    // 设置无边框模式
//    setWindowFlag(Qt::FramelessWindowHint);
    // 设置窗口置顶
    setWindowFlag(Qt::WindowStaysOnTopHint);

    // 设置窗口透明度
    setWindowOpacity(0.5);
}

窗口标题和图标演示。

透明窗口，无边框，置顶演示。

颜色字体 #

Qt程序界面颜色设置，主要分为前景色和背景色，每一个widget组件都有一个QPalette类的对象，它可以进行对组件的设置颜色。

我们通过一个程序来演示，设计一个UI包含按钮，标签，输入框等常用组件，两个Combox下拉框分别用来选择背景色和前景色。

示例代码。

#include "widget.h"
#include <QStyle>
#include <QPalette>
#include <QVBoxLayout>
#include <QHBoxLayout>
#include <QLineEdit>
#include <QTextEdit>
#include <QToolButton>
#include <QLabel>
#include <QComboBox>
#include <QFont>
#include <QPushButton>

Widget::Widget(QWidget *parent) : QWidget(parent)
{
    setWindowTitle("QPalette demo");

    QLabel *label = new QLabel("label");
    QLineEdit *line = new QLineEdit("lineedit");
    QTextEdit *text = new QTextEdit();
    QPushButton *button = new QPushButton("push button");
    QComboBox *cb_bg = new QComboBox();
    QComboBox *cb_text = new QComboBox();
    cb_bg->addItems(QColor::colorNames());
    cb_text->addItems(QColor::colorNames());
    QVBoxLayout *main_layout = new QVBoxLayout();
    main_layout->addWidget(label);
    main_layout->addWidget(button);
    main_layout->addWidget(cb_bg);
    main_layout->addWidget(cb_text);
    main_layout->addWidget(line);
    main_layout->addWidget(text);
    this->setLayout(main_layout);



    connect(cb_bg, &QComboBox::currentTextChanged,[=] () {
        QPalette pale = this->palette();
        QColor color = QColor(cb_bg->currentText());
        // 设置背景颜色
        pale.setColor(QPalette::Background, color);
        // 设置文本选中后背景色
        pale.setColor(QPalette::Highlight, Qt::red);
        // 设置文字编辑框的底色
        pale.setColor(QPalette::Base, color);
        // 设置按钮背景色，经过测试windows平台无效
        pale.setColor(QPalette::Button, color);
        this->setPalette(pale);
    });
    connect(cb_text, &QComboBox::currentTextChanged,[=](){
        QPalette pale = this->palette();
        QColor color = QColor(cb_text->currentText());
        // 设置前景色，既就是文字颜色
        pale.setColor(QPalette::WindowText, color);
        // 设置选中文字的颜色
        pale.setColor(QPalette::HighlightedText, Qt::white);
        // 设置编辑框输入文本的颜色
        pale.setColor(QPalette::Text, color);
        // 设置按钮文本的颜色
        pale.setColor(QPalette::ButtonText, color);
        this->setPalette(pale);
    });

    this->setAutoFillBackground(true);

    // 获取当前字体，并设置字体大小
    QFont font = this->font();
    font.setPixelSize(36);
    this->setFont(font);
}

运行演示。

QSS样式 #

QSS样式是Qt程序中一个类似于CSS语法的自定义控件外观的语言，使用QSS既可以对单个组件进行设置，也可以对程序整体进行设置，而且功能更加强大，细节更加丰富。

演示代码。

#include "widget.h"
#include <QStyle>
#include <QPalette>
#include <QVBoxLayout>
#include <QHBoxLayout>
#include <QLineEdit>
#include <QTextEdit>
#include <QToolButton>
#include <QLabel>
#include <QListWidget>
#include <QComboBox>
#include <QSlider>
#include <QFont>
#include <QPushButton>

Widget::Widget(QWidget *parent) : QWidget(parent)
{
    setWindowTitle("QSS demo");

    QPushButton *pb = new QPushButton("push button");
    QComboBox *cb = new QComboBox();
    cb->addItems(QColor::colorNames());
    QListWidget *lw = new QListWidget();
    lw->addItems(QColor::colorNames());
    QSlider *sl_h = new QSlider(Qt::Horizontal);

    QVBoxLayout *main_layout = new QVBoxLayout();
    main_layout->addWidget(pb);
    main_layout->addWidget(cb);
    main_layout->addWidget(lw);
    main_layout->addWidget(sl_h);

    this->setLayout(main_layout);

    QString qss;

    qss = QString("background-color: rgb(50,50,50); "
          "border:1px solid #a36a30;"
          "border-radius:5px;"
          "color:white;");

    this->setStyleSheet(qss);

}

运行结果。

QSS样式也可以写入*.css文件，在程序运行时加载并设置。

以下是QSS的其他样式，可供参考。

QPushButton
{
    background-color: rgb(134,183,200); //背景色
    border:2px solid #5F92B2; //边界和边界颜色
    border-radius:5px; //边界圆滑
    color:white; //字体颜色
}
 
QPushButton:hover
{
    background-color: rgb(0,130,150); //伪状态经过时背景色
    border:2px solid #5F92B2; //边界和边界颜色
    border-radius:5px; //边界圆滑
    color:white; //字体为白色
}
 
QPushButton:hover:pressed
{
    background-color:rgb(85,170,255); //伪状态，点击时的背景色
    border:2px solid #3C80B1; //
    border-radius:5px;
    color:white;
}

QComboBox
{
    color:white;                   //设置字体颜色
    min-height: 50px;                //设置最小高度
    min-width: 60px;                //设置最小宽度
    background-color:transparent;          //背景色
    selection-background-color: rgb(80, 80, 80); //选中背景色
}
 
QComboBox QAbstractItemView
{
    font:14px;                   //下拉列表中的字体大小
    selection-color:white;            //选中时的字体颜色
    selection-background-color:rgb(80, 80, 80); //选中背景色
    background-color:rgb(80, 80, 80);      //背景色
}
 
QComboBox QAbstractItemView::item
{
    color:white;                //item的字体颜色
    min-height: 50px;             //item的最小高度
    min-width: 60px;              //item的最小宽度
}
 
QComboBox::down-arrow
{
    image:url(:/image/image/down.png);    //设置下拉的按钮样式图片
}
 
QComboBox::drop-down
{
    border:0px;                //设置下拉按钮边界宽度为0，将阴影边界取出
    min-width: 40px;              //设置下拉按钮宽度
}

更多关于CSS样式的介绍请查看Qt帮助文档。