Qt Widgets之常见样式表

环境：Qt5.15.2

目录

• 简介
• 文本输入框
• 按钮
  • • • 1.图标按钮
      • 2.图标在左，文字在右的按钮
      • 3.带下拉菜单按钮
• 复选框
  • • • 1.打开关闭状态按钮
• 下拉框
• 进度条
• 滑块
• null

简介

Qt样式表：Qt Style Sheets，类似于Web开发中的CSS（Cascading Style Sheets，层叠样式表）。

文本输入框

1. 样式可设置为如下：

QLineEdit{
	border: 1px solid #ABCDA0;      /* 边框宽度为1px，颜色为#A0A0A0 */
	border-radius: 3px;             /* 边框圆角 */
	padding-left: 5px;              /* 文本距离左边界有5px */
	background-color: #F2F2F2;      /* 背景颜色 */
	color: black;                   /* 文本颜色 */
	selection-background-color: #A0A0A0;     /* 选中文本的背景颜色 */
	selection-color: #F2F2F2;               /* 选中文本的颜色 */
	font-family: "Microsoft YaHei";         /* 文本字体族 */
	font-size: 10pt;                        /* 文本字体大小 */
}
/* 鼠标悬浮在QLineEdit时的状态 */
QLineEdit:hover { 
    border: 1px solid #298DFF;
	border-radius: 3px;
	background-color: #F2F2F2;
	color: #298DFF;
	selection-background-color: #298DFF;
	selection-color: #F2F2F2;
}
/* QLineEdit在禁用时的状态 */
QLineEdit:disabled { 
	border: 1px solid #CDCDCD;
	background-color: #CDCDCD;
	color: #B4B4B4;
}

/* QLineEdit在只读时的状态 */
QLineEdit:read-only { 
	background-color: #CDCDCD;
	color: #F2F2F2;
}

/* QLineEdit作为密码输入框时的状态 */
QLineEdit[echoMode="2"] { 
    /*9679对应字符实心圆点*/
	lineedit-password-character: 9679;
	
}

按钮

1.图标按钮

1. 样式可设置如下：

QPushButton
{
	background-image:url(":/resources/xxx.png");
	background-position:center;
	background-repeat: no-repeat;
	border:none
}
 
QPushButton:hover
{
	background-color:rgb(10,210,210);
	background-image:url(":/resources/xxx.png")
}
 
QPushButton:pressed
{
	background-color:rgb(255, 0, 0);
	background-image:url(":/resources/xxx.png");
}

2.图标在左，文字在右的按钮

1. 样式可设置如下：

ui->pushButton->setText("示例按钮");
ui->pushButton->setFixedSize(80, 64);
ui->pushButton->setIcon(QIcon(":/resources/xxx.png"));
ui->pushButton->setLayoutDirection(Qt::LeftToRight);

3.带下拉菜单按钮

1. 样式可以设置为如下：

// QPushButton::menu-indicator:open：当按钮的下拉菜单展开时
// QPushButton::menu-indicator:closed：当按钮的下拉菜单收起时
// subcontrol-origin属性用于 定义子控件定位基准区域 的关键属性，它决定了子控件（如 menu-indicator 箭头图标）的位置计算起点（指定子控件的定位相对于父控件的哪个区域计算）
string button_qss = R"(
    QPushButton
    {
        font:18px "Microsoft YaHei";
        color:rgb(255,255,255);
        border:none
    }
    
    QPushButton::menu-indicator:open
    {
        image:url(:/resources/down_arrow.svg);
        subcontrol-position:right center;
        subcontrol-origin:padding;
        border:none;
    }

    QPushButton::menu-indicator:closed
    {
        image:url(:/resources/up_arrow.svg);
        subcontrol-position:right center;
        subcontrol-origin:padding;
        border:none;
    }
)";

复选框

1.打开关闭状态按钮

1. 样式可设置如下：

ui->checkBox->setFixedSize(128, 64);

// 设置复选框的指示器图标，默认情况是方框
QString qss = "QCheckBox::indicator:unchecked{ \
    image:url(:/resources/status_close.png); \
    } \
    QCheckBox::indicator:checked { \
    image: url(:/resources/status_open.png); \
    }";

ui->checkBox->setStyleSheet(qss);
ui->checkBox->setChecked(true);

下拉框

1. 样式可以设置如下：

QStringList strList;
strList << "item1" << "item2" << "item3" << "item4"
        << "item1" << "item2" << "item3" << "item4"
           << "item1" << "item2" << "item3" << "item4"
              << "item1" << "item2" << "item3" << "item4";

ui->comboBox->addItems(strList);
// Sets the view to be used in the combobox popup to the given itemView
ui->comboBox->setView(new QListView(this));
ui->comboBox->setEditable(true);

进度条

1. 样式可设置如下：

QProgressBar
{
	border-radius:5px;  
	background-color:darkgray;
	text-align:center   /* 进度文本居中显示 */
}
// 进度块样式
QProgressBar::chunk
{
	background-color:#1F0FEF;/* 进度块颜色为深蓝色 */
	width:6px;  /* 每个进度块宽度6像素 */
	margin:5px; /* 进度块之间的间距5像素 */
}

滑块

1. 滑块样式可设置如下：

// 滑块整体样式
QSlider 
{
	background-color: rgba(22, 22, 22, 0.7);    /* 半透明深灰色背景 */
	padding-top: 15px;      /* 顶部内边距（控制上端点位置） */
	padding-bottom: 15px;   /* 底部内边距（控制下端点位置） */
	border-radius: 5px;     /* 外边框圆角 */
}
 
 // 上半部分（已滑过区域）
QSlider::add-page:vertical 
{
	background-color: #FF7826;  /* 灰色 */
	width:5px;/* 轨道宽度 */
	border-radius: 2px;/* 轨道圆角 */
}
// 下半部分（
QSlider::sub-page:vertical 
{
	background-color: #7A7B79;/* 橙色 */
	width:5px;
	border-radius: 2px;
}
// 轨道凹槽
QSlider::groove:vertical 
{
	background:transparent;/* 透明 */
	width:6px;               /* 凹槽总宽度（略宽于轨道） */
}
// 滑块手柄
QSlider::handle:vertical    
{
	height: 14px;  
	width: 14px;
	margin: 0px -4px 0px -4px;  /*上右下左 */
	border-radius: 7px;
	background: white;
}

2. 效果如下：