【Qt-Qss-Style】

Qt编程指南

[■ Qss](#■ Qss)
[■ Style](#■ Style)
- [■ setStyleSheet](#■ setStyleSheet)
[■ style.qss](#■ style.qss)
[■ border](#■ border)
[■ 去除弹框背景圆角](#■ 去除弹框背景圆角)
[■ QProgressBar样式表](#■ QProgressBar样式表)

■ Qss

Qt 支持很多种常见

符号

">"代表直属子部件，说明两个控件之间是父子关系。

"#"代表后面的字段是前面控件类型的名称，当然也可以省略控件类型直接写作#objectname这样.

. 表示当前的控件。

cpp 复制代码

.QWidget  //表示只设置当前的QWidget
{
    background-color:transparent;
}

/*提示工具*/
/*提示窗口的背景*/
QWidget#ToolTipForm
{
    background-color:transparent;
}

/*提示窗口的frame*/
QWidget#ToolTipForm>QFrame#frame
{
    background-color:#aaff7f;
    border:none;
    border-radius:20px;
}

/*标签*/
QFrame#frame>QLabel#label
{
    background-color:transparent;
    color:#ffffff;
    font:14px,"宋体";
}

//这样还没有达到完全的圆角窗口，窗口存在圆角下面的黑色方角，最关键的一步：需要在该提示工具的窗口类的构造函数中加入窗口无标题栏和背景透明的设置。
setAttribute(Qt::WA_TranslucentBackground);//设置背景透明
setWindowFlags(Qt::WindowTransparentForInput | Qt::ToolTip | Qt::FramelessWindowHint);//窗口仅用于输出，不接收任何输入事件
自定义类型中编写样式表。

c 复制代码

QLabel{
color: rgb(255, 255, 255);
}
label->setFrameShape (QFrame::Box);
label->setStyleSheet("border-width: 1px;border-style: solid;border-color: rgb(255, 170, 0);");
setStyleSheet("QLabel{border:2px solid rgb(200, 200, 200);}");

font: bold; 是否粗体显示
font-family:""; 来设定字体所属家族，
font-size:20px; 来设定字体大小
font-style: nomal; 来设定字体样式
font-weight:20px; 来设定字体深浅
color：black ;字体颜色

border: 1px solid gray;边框大小，样式，颜色
border-image:""; 用来设定边框的背景图片。
border-radius:5px; 用来设定边框的弧度。可以设定圆角的按钮
border-width: 1px； 边框大小 

background-color: green; 设置背景颜色
background:transparent; 设置背景为透明
color:rgb(241, 70, 62); 设置前景颜色
selection-color:rgb(241, 70, 62); 用来设定选中时候的颜色

■ Style

■ setStyleSheet

cpp 复制代码

btn->setStyleSheet(background-color:rgb(41,176,204);color:white;border:none;border-radius:1px;);

//设置按钮样式
QStringList list;
//list << QString("QAbstractSpinBox{border:2px solid #7C7C96;background:#FF0000;})";
list << QString("QPushButton{min-width:%1px;max-width:%1px;min-height:%1px;max-height:%1px;}").arg(btnSize);
list << QString("QPushButton{border-image:url(:/image/ycontrol/spinBoxButton_normal.png);}");
list << QString("QPushButton:pressed{border-image:url(:/image/ycontrol/spinBoxButton_select.png);}");
list << QString("#qt_spinbox_btnDown{image:url(:/image/ycontrol/spinBoxButton_normal_minus.png)}");
list << QString("#qt_spinbox_btnDown:pressed{image:url(:/image/ycontrol/spinBoxButton_select_minus.png)}");
list << QString("#qt_spinbox_btnUp{image:url(:/image/ycontrol/spinBoxButton_normal_plus.png)}");
list << QString("#qt_spinbox_btnUp:pressed{image:url(:/image/ycontrol/spinBoxButton_select_plus.png)}");
this->setStyleSheet(list.join(""));

示例一：
QRadioButton{
    spacing: 2px;
    color: white;
}
QRadioButton::indicator {
    width: 45px;
    height: 30px;
}
QRadioButton::indicator:unchecked {
    image: url(:/images/switch_off.png);
}
QRadioButton::indicator:checked {
    image: url(:/images/switch_on.png);
}
int main(int argc, char *argv[])
{
    QApplication a(argc, argv);
    /* 指定文件 */
    QFile file(":/style.qss");
    /* 判断文件是否存在 */
    if (file.exists() ) {
        /* 以只读的方式打开 */
        file.open(QFile::ReadOnly);
        /* 以字符串的方式保存读出的结果 */
        QString styleSheet = QLatin1String(file.readAll());
        /* 设置全局样式 */
        qApp->setStyleSheet(styleSheet);
        /* 关闭文件 */
        file.close();
    }
    MainWindow w;
    w.show();
    return a.exec();
}

■ style.qss

cpp 复制代码

QListWidget {
font-size: 30px;
outline:none;
}

QListWidget::item:active {
background: transparent;
}

QListWidget::item {
height:80;
}

QListWidget::item:selected:hover {
background:#22222222;
}

QListWidget::item:selected {
background:transparent;
color:#ee222222;
}

1、首先是实现插入项的功能，也就是新增一项
void Widget::on_InsertBtn_clicked()
{
    //首先是获取项的总数
    int itemCount = ui->listWidget->count();

    //new一个空的子项
    QListWidgetItem * item = new QListWidgetItem;
    //初始化空的子项,比如设置颜色,高度，内容等等
    //设置大小
    item->setSizeHint(QSize(ui->listWidget->width(),50));
    //设置内容
    item->setText(QString("自定义子项%1").arg(itemCount));
    //设置属性
    item->setFlags(Qt::ItemIsEditable|Qt::ItemIsEnabled|Qt::ItemIsUserCheckable);//双击可被编辑，可选中
    item->setCheckState(Qt::Unchecked);//默认 不选中状态

    //最后将初始化好的子项插入到listWidget控件中
    ui->listWidget->addItem(item);
}

2、删除项，删除当前选中的项，代码如下：
void Widget::on_DelBtn_clicked()
{
    //先判断当前是否选中，如果没有选中则提示
    if(!ui->listWidget->currentItem()){
        QMessageBox::warning(this,"警告","请先选中当前项再进行删除!");
        return;
    }

    //获取当前想要删除的子项
    QListWidgetItem * delItem = ui->listWidget->takeItem(ui->listWidget->currentRow());
    if(delItem)//注意需要手动删除
        delete delItem;
}

3、清空列表，调用clear()函数即可。
void Widget::on_ClearBtn_clicked()
{
    ui->listWidget->clear();
}
4、状态栏的显示
void Widget::on_listWidget_currentRowChanged(int currentRow)
{
    //如果没有子项，直接退出
    if(currentRow<0)
        return;

    //获取当前项
    QListWidgetItem *curItem = ui->listWidget->currentItem();
    //获取内容
    QString curText = curItem->text();
    //在状态栏进行显示内容和选中状态
    QString stateText;
    stateText = (QString("当前选中第%1项:").arg(currentRow)+curText);
    if(curItem->checkState() == Qt::Checked)
        stateText += "  选中";
    else
        stateText += "  没有选中";

    ui->StateLabel->setText(stateText);
}
5、排序
    ui->listWidget->setSortingEnabled(true);//生效排序
    ui->listWidget->sortItems(Qt::DescendingOrder); //降序

6、显示方式
    ui->listWidget->setViewMode(QListView::IconMode);

7、初始化
void Widget::InitListwidget()
{
    //自定义菜单策略
    ui->listWidget->setContextMenuPolicy(Qt::CustomContextMenu);
    //设置视图显示方式为图标模式（图标在上，文字在下）
    ui->listWidget->setViewMode(QListView::IconMode);
    //设置可以选择多项
    ui->listWidget->setSelectionMode(QAbstractItemView::ExtendedSelection);
    //设置背景颜色,使每个子项之间的间距有颜色区别
    //ui->listWidget->setStyleSheet("background:transparent;");
    //设置无边框
    ui->listWidget->setFrameShape(QFrame::NoFrame);
    //设置子项不能被拖拽
    ui->listWidget->setDragEnabled(false);
    //设置子项每个图标的大小
    ui->listWidget->setIconSize(QSize(200,200));
    //设置每个子项的大小固定
    ui->listWidget->setUniformItemSizes(true);
    //设置QLisView大小改变时，图标的调整模式，默认是固定的，可以改成自动调整
    ui->listWidget->setResizeMode(QListView::Adjust);
    //设置每个子项之间的间距
    ui->listWidget->setSpacing(10);

    //设置样式，直接在函数中设置
    ui->listWidget->setStyleSheet("QListWidget{border:1px solid gray; color:black;background:transparent;}"
                               "QListWidget::Item{padding-top:20px; padding-bottom:4px; }"
                               "QListWidget::Item:hover{background:skyblue; }"
                               "QListWidget::item:selected{background:lightgray; color:red; }"
                               "QListWidget::item:selected:!active{border-width:0px; background:lightgreen; }"
                               );

    }
注意点：
int n=ui->listWidget->count();//获取item的总数
//删去所有item
for(int i=0;i<n;i++)
{
    /*
     使用takeItem(row)函数将QListWidget中的第row个item移除，
     移除需要使用delete手动释放其在堆上占用的空间
    */ 
    //这里是0，不是i，因为每移除一个item都会导致每个item的row发生变化
    QListWidgetItem *item = ui->listWidget->takeItem(0);  
    delete item;
}


QListWidgetItem* item = ui->listWidget->currentItem();//被选中或背点击的item删除
// QListWidgetItem* item = ui->listWidget->takeItem(2);//指定删除
ui->listWidget->removeItemWidget(item);
delete item;

■ border

cpp 复制代码

color:rgb(255, 255, 255);  
border: 1px solid gray;
border-style:solid;  
border-radius:5px;
border-top-left-radius:2px;  
border-top-right-radius:2px;  
border-bottom-left-radius: 20px;
border-bottom-right-radius: 20px;
border-top-left-radius:2px;  
border-top-right-radius:2px;  

border:0px;
border-left:1px solid rgba(82,130,164,1); 
border-right:1px solid rgba(82,130,164,1);
border-top:1px solid rgba(82,130,164,1);
border-bottom:1px solid rgba(82,130,164,1);

background:rgba(17,24,47,1);
border:0px;
border-left:1px solid rgba(82,130,164,1); 
border-right:1px solid rgba(82,130,164,1);
border-top:1px solid rgba(82,130,164,1);}"
border-bottom:1px solid rgba(82,130,164,1);

■ 去除弹框背景圆角

cpp 复制代码

dialog->setModal(true);   //父窗口不能点击。
setWindowFlag(Qt::FramelessWindowHint); // 设置去除标题栏 无框窗提示

QFrame 支持圆角设置风格
有白色的角
setAttribute(Qt::WA_TranslucentBackground);  //设置背景透明；

■ QProgressBar样式表

cpp 复制代码

QProgressBar {   
	border: 2px solid grey;   
	border-radius: 5px;   
	background-color: #FFFFFF;
}
QProgressBar::chunk {   
	border-radius: 5px;
	background-color: #05B8CC;   
	width: 20px;
}

QProgressBar {   
	border: px solid grey;   
	border-radius: 5px;   
	text-align: center;
}
QProgressBar::chunk{
	border-radius: 5px;
	background:qlineargradient(spread:pad,x1:0,y1:0,x2:1,y2:0,stop:0 red,stop:1 blue);
}

第一步：
height:30;
background: red;
color:rgb(255,255,0);

第二步：
border:1px solid #FFFFFF;
height:30;
background: red;
color:rgb(255,255,0);
 
第三步：
border:1px solid #FFFFFF;
height:30;
background: red;
text-align: center;   // 控制文本位置left center right
color:rgb(255,255,0);
border-radius:10px;
 
第四步：添加斑马线。
QProgressBar{
border:1px solid #FFFFFF;"
       "height:30;"
       "background:red;"
       "text-align:center;"
       "color:rgb(255,255,0);"
       "border-radius:10px;}"
       "QProgressBar::chunk{"
       "border-radius:5px;"    // 斑马线圆角
       "border:1px solid black;" // 黑边，默认无边
       "background-color:skyblue;"
       "width:8px;margin:0.5px;
}

第五步：
QProgressBar::chunk{
border-radius: 5px;
background:qlineargradient(spread:pad,x1:0,y1:0,x2:1,y2:0,stop:0 red,stop:1 blue);
}