QT技术架构的设计文档 基于qt的设计

Qt应用程序可使用Stylesheet、QPallete等方式设置控件的显示风格，如按钮的背景图片、comboBox的选中图标等。

         StyleSheet语法

样式表可以应用在QApplication上，也可以单独应用在控件上。一条样式表规则由选择器 (Selector)和属性定义(declaration)组成。

指向直接子控件（“>”）

“Record>QLabel”：表示Record类中为QLabel的子控件。

指向多个子控件

子控件间用空格隔开。

例： “ShadowWidget QGroupBox QLabel”：表示ShadowWidget类中的所有“QGroupBox”和“QLabel”或其派生类。

类型选择器（对象名#对象实例名）

例： “QLabel#title”：表示objectName为“title”的QLabel或者QLabel的派生类。

指向子部件（“：：”）

例： “QMenu::item”：表示QMenu的选项卡。

指向状态描述（“：”）

例： “QMenu::item:selected:enabled”：表示使能并且选中状态下的QMenu的选项卡。

指向某些派生类

派生类间用逗号隔开。

例： “QFrame run_unit,step”，其中run_unit和step均是派生类。

的用法

可以通过QApplication::setStyleSheet 或 QWidget::setStyleSheet来设置应用程序或特定控件要使用的样式表。样式比较多的情况下，可在外部编写“.qss”文件，在程序中将样式嵌入到程序。如下所示：

QFile styleSheet("./mainpage.qss");
if (!styleSheet.open(QIODevice::ReadOnly))
    {
        qWarning("Can't open the style sheet file.");
        return;
    }
 qApp->setStyleSheet(styleSheet.readAll());//qApp表示整个应用程序

设置Item高度

comboBox->setStyleSheet("QComboBox { min-height: 40px; min-width: 60px; }"        "QComboBox QAbstractItemView::item { min-height: 40px; min-width: 60px; }");
comboBox ->setView(new QListView); //执行了该语句，下拉item的高度才能改变

改变文字颜色

可用QPalette中的Text属性或者Stylesheet中的“color”。

QPalette pe;
pe.setColor(QPalette::Text,Qt::red);
comboBox ->setPalette(pe); //设置comboBox的显示颜色为红色

改变下拉图标

默认的下拉图标是类似于带有灰色背景的按钮，不好看，可自定义下拉箭头的图片。

QComboBox::drop-down{
width:30px;
background:transparent;
image:url(images/down_arrow.png);
border:0px;
}

 

设置按钮的显示图标

QPalette pe;

pe.setColor(QPalette::Button,QColor(0,250,250));//按钮按下后背景颜色RGB(0，250，250)
QIcon Icon("images/xx.png");
btn->setIconSize(m_btnRealtimeInformation->size()*0.9);
btn ->setIcon(Icon);//未按下时，按钮显示xx.png图片，效果如下图
btn ->setPalette(pe);

 

设置按钮点击前和点击后，显示不同图片

btn->setStyleSheet(
"QPushButton{background-color:rgb(0,0,0,0);//背景颜色为透明
border-width:0px;//无边框
border-radius:10px;//边缘弧度了10px
background-image:url(images/key1.png);}
QPushButton:pressed{background-image:url(images/key1down.png);//设置点击后的图片
}");

统一设定某一名称的按钮样式

以下代码将objectName为“close”的QPushButton的显示设置成“close_normal.png”图片。

qApp->setStyleSheet(
“QPushButton #close //”#”后面跟随着具体的objectName
{
  image: url(images/close_normal.png);  
  border: 0px;
  background:transparent;”
});

设置按钮边沿颜色不一样的效果。

QToolButton{
background-color:#0044cc;
            border-style: outset;
            border-width:3px;
border-color:#00ff00 #00ff00 #ff0000;//设置边沿颜色
            padding:1px;border-radius:10px;color:#ffffff;}
            QToolButton:pressed {background-color:#003bb3;}

 

设置QCheckBox选中、不选中、不使能情况下的图片显示。

checkbox->setStyleSheet(
"QCheckBox::indicator:checked{image: url(images/checkbox_checked.png);}"\
"QCheckBox::indicator:unchecked{image: url(images/checkbox_unchecked.png);}"\
"QCheckBox::indicator:disabled{image: url(images/checkbox_disabled.png);}"
);

效果图：

      

默认的日期编辑器增加子部件较小，不方便触摸屏操作。以下代码改变子部件的显示位置。

dateEdit->setStyleSheet("::down-button{subcontrol-position:left;width:30px;height:30px; }"
"::up-button{subcontrol-position:right;width: 30px;height:30px;}");
dateEdit->setDisplayFormat("yyyy-MM-dd");//设置时间的显示格式为年-月-日

 

QMenu{
          background:white;          border:1px solid lightgray;
}
QMenu::item{
padding:0px 100px 0px 20px;    height:25px;
}
QMenu::item:selected:enabled{
    background:lightgray;        color:white;
}
QMenu::item:selected:!enabled{
    background:transparent;
}
QMenu::separator{
    height:1px; background:lightgray;margin:2px 0px 2px 0px;
}

 

         设置页面背景

Stylesheet设置类名为MainWindow的背景图为images目录下的图片11.png。
MainWindow{
border-image: url(images/11.png);
}
 用QPalette设置背景为images目录下的图片11.png。
QPixmap pixmap("images/11.png ");
QPalette palette;
palette.setBrush(backgroundRole(),QBrush(pixmap));
setPalette(palette);
setAutoFillBackground(true);//执行这句，以上设置生效