让你的 Qt 桌面程序看上去更加 native(四):st

2019-08-28 18:23栏目:编程学习

临近春节,更新也慢了许多。今天再来写一篇,不知道会不会是春节前的最后一篇了。豆子先祝大家新春愉快!

使用setStyleSheet来设置图形界面的外观:
QT Style Sheets是一个很有利的工具,允许定制窗口的外观,
此外还可以用子类QStyle来完成,他的语法很大比重来源于html的CSS,但是适用于窗口

我们知道,HTML 仅仅被定义为一种内容布局的语言。也就是说,HTML 应该做的,是告诉浏览器,这个东西应该放在这里,那个东西应该放在那里。至于这些东西该怎么显示,例如,用红色还是用蓝色,这样的显示的定义应该交给 CSS 去做。所以,在新近版本的 HTML 中,font、color 这样的标签和属性已经不被推荐使用了。同样,在 Qt 中也有这么一个样式表,被称为 style sheet——这其实和 CSS 如出一辙。不仅名字相似,就连语法之类也相当雷同。

 

威尼斯人app,style sheet 虽然很好用,但是,我们应该提出几个需要注意的地方。style sheet 应该被小心使用,因为它会打破系统正常的 look and feel。还记得我们前面提到的那个同普通 Windows 程序格格不入的 safari 吗?所以在使用 style sheet 时应该尽量选用系统调色板,而不是自己定义一个另类的颜色。

概括:
Style Sheets是文字性的设定,对于整个应用程序可以使用QApplication::setStyleSheet() 或者对应一个窗口可以使用QWidget::setStyleSheet(),如果好几个样式表在不同的层次上设定,

关于 style sheet 语法更详细的手册,我们可以到这里去查看。当然,如果你安装的是 mingw 版本的 QtWindows 平台),这个文档已经在 Qt Help 里面了。在这里,我们不去详细介绍具体的语法细节,而是专注于如何正确使用 style sheet。所以,如果你有的语法看不懂,请自行查阅文档了解。

QT将会集合所有的样式表来设定外观,这称作级串联
例如:下面的样式表指定所有的QLineEdit应该用黄色作为他们的背景颜色,所有的核对框应该用红色作为他们的文本颜色
QLineEdit { background: yellow }
QCheckBox { color: red }

自己定义 label 的颜色固然很简单,请看以下代码:

 

#include <QtGui>  int main(int argc, char *argv[]) {     QApplication app(argc, argv);      QLabel label;     label.setText("Hello, style sheet!");     label.setStyleSheet(QString("color:red"));     label.show();      return app.exec(); } 

对于这种定制,样式表比palette调色板更强大,例如使用QPalette::Button role来设定一个按钮为红色可能引起危险

我们将 label 的颜色使用 style sheet 定义为红色,运行起来如下图所示:

对于单独使用QPalette很难完成的定制,样式表可以指定
样式表作用于当前窗口样式顶部,这意味这应用程序讲看起来尽可能的自然,但是任何样式表系统参数应该考虑,不像QPalette那样,样式表提供检查,如果你设定了一个按钮的背景颜色为红

威尼斯人app 1

色,你应该确定在所有的平台按钮将会有一个红色的背景,除此,Qt Designer提供样式表集成环境,使得在不同的窗口样式中更容易看到样式表的效果

这种预定义的颜色很简单,然而,如果我想用个系统颜色呢?比如,我希望是系统高亮的颜色?难道还得自己去找高亮色的 RGB 值吗?正确的做法是,使用系统调色板,如下代码所示:

 

label.setStyleSheet(QString("color:palette(highlight)")); 

此外,样式表可以用来为你的应用程序提供一个出众的外观,不需要使用子类QStyle,例如,可以指定任意的图片为单选按钮和核对按钮,来使它们出众,使用这个技术,也可以获得辅助的定

这样,我们直接从系统调色板中得到高亮色,即便是不同的系统,也不需要修改任何代码。以下是在 Windows 7 上面的运行结果:

制,这将使用几个子类,例如指定style hint(样式暗示),可以参看例子 Style Sheet。

威尼斯人app 2

当样式表有效时候,使用QWidget::style()可以返回QStyle,

即使你必须使用自定义颜色,也不应该将颜色硬编码。而是使用一种变通的方式,例如:

 

QColor color(128, 200, 128); label.setStyleSheet(QString("color:%1").arg(color.name())); 

样式表语法:
样式表语法基本和HTML CSS语法一致。
样式表包含了样式规则序列,样式规则有一个<selector>和<declaration>组成,<selector>指定哪些窗口将会被这些规则影响,<declaration>指定哪些属性将会被设定在窗口上,例如
QPushButton{color:red}
在上面的,规则中,QPushButton是<selector>,{color:red}是<declaration>,这个规则指定QPushButton和他的子类将使用红色作为前景颜色,就是字体颜色,并且对大小写没有分别,对于

这样做的好处是,你可以很方便地让用户选择颜色,存入配置文件,并且在以后的启动中从配置文件中读取 color 的值,而不需要修改代码。

color,ColoR,COLOR是一样的。
几个<selector>可以同时被列出,使用逗号","来分开各个<selector>,例如:
QPushButton, QLineEdit, QComboBox { color: red }
<declaration>部分是一对 属性:值  对,用{}来括起来,使用分号来分开各个属性,例如
QPushButton { color: red; font-family: Arial; line-height: 26px;">可以参看Qt Style Sheets Reference来查看部件以及样式表的属性列表

使用 style sheet 可以做出很漂亮的显示效果。由于使用 style sheet 要比 前面说的自定义 style 简单得多,因此,我们还是建议多多使用这一技术。下面,我们制作一个苹果风格的前进/后退按钮。效果如下:

 

威尼斯人app 3

关于样式表的级联属性
看下面代码的不同
 btn1->setStyleSheet("QPushButton{color:red}"); //设定前景颜色,就是字体颜色
 btn1->setStyleSheet("QPushButton{background:yellow}"); //设定背景颜色为红色

btn1->setStyleSheet("QPushButton{color:red;background:yellow}");
第一个代码只能显示黄色背景,第二个确实红色字体,黄色背景,
所以当设定一个部件时候,要在同一个>setStyleSheet()中完全写出来。

为了制作这一按钮,我们需要以下四幅图片:

 

威尼斯人app 4

 

威尼斯人app 5

源代码示例:

威尼斯人app 6

 

威尼斯人app 7

Dialog::Dialog(QWidget *parent) :
    QDialog(parent),
    ui(new Ui::Dialog)
{
    ui->setupUi(this);
    this->setWindowFlags(this->windowFlags()&Qt::WindowMaximizeButtonHint&Qt::WindowMinimizeButtonHint);//为对话框添加上最大化和最小化按钮
//    layout=new QBoxLayout(this);
    layout1=new QGridLayout(this);
    btn1=new QPushButton(this);
    btn1->setStyleSheet("QPushButton{color:red;background:yellow}"); //设定前景颜色,就是字体颜色
//    btn1->setStyleSheet("QPushButton{background:yellow}");
    btn1->setText("Button1");

按照从上向下的顺序分别命名为 btn_left.png, btn_left_pressed.png, btn_right.png 和 btn_right_pressed.png。然后,我们用下面的代码:

    btn2=new QPushButton(this);
    btn2->setStyleSheet("QPushButton{color:red; //使用rgb来设定背景颜色
    btn2->setText("Button2");

#include <QtGui>  int main(int argc, char *argv[]) {     QApplication app(argc, argv);      QWidget segmentedButton;     QToolButton *backButton = new QToolButton(&segmentedButton);     QToolButton *forwardButton = new QToolButton(&segmentedButton);     segmentedButton.setLayout(new QHBoxLayout);     segmentedButton.layout()->setSpacing(0);     segmentedButton.layout()->setMargin(0);     backButton->setStyleSheet(QString("QToolButton{border-image:url(:/btn_left.png)}"                                       "QToolButton:pressed{border-image:url(:/btn_left_pressed.png)}"));     forwardButton->setStyleSheet(QString("QToolButton{border-image:url(:/btn_right.png)}"                                       "QToolButton:pressed{border-image:url(:/btn_right_pressed.png)}"));     backButton->setFixedSize(28, 23);     forwardButton->setFixedSize(28, 23);     segmentedButton.layout()->addWidget(backButton);     segmentedButton.layout()->addWidget(forwardButton);      QWidget win;     win.setLayout(new QHBoxLayout);     win.layout()->setSpacing(0);     win.layout()->setMargin(0);     win.layout()->setAlignment(Qt::AlignLeft);     win.layout()->addWidget(&segmentedButton);     win.show();      return app.exec(); } 

     btn3=new QPushButton(this);
     btn3->setStyleSheet("QPushButton{background-image:url(image/1.png);background-repeat: repeat-xy;background-position: center;background-attachment: fixed;background-attachment: fixed;background-attachment: fixed;;background-clip: padding}");
     //设定按钮的背景图片,background-repeat可以设定背景图片的重复规则,这里设定仅在xy方向都重复,所以图片会被重复一次
     //background-position用来设定图片的位置,是左(left)还是右(right),还是在中间(center),是上(top)还是底部(bottom)
     //background-attachment用来这定背景图片是否卷动或者和窗口大小相匹配,默认是卷动的
     btn3->setText("Button3");

即可得到上图所示的效果。注意,我们之所以把 segmentedButton 又放入一个新的 widget 里面,是由于 Windows 平台下的窗口有一个最小值。如果直接调用 segmenedButton.show(); ,由于这个最小值的缘故,两个 button 并不会在一起。使用这一技术,我们很容易制作出很漂亮的界面。这一技术的关键就在于图片素材的制作,将界面大部分工作交予美工。

     btn4=new QPushButton(this);
     btn4->setStyleSheet("QPushButton{border: 3px solid red;border-radius:8px}"); //设定边框宽度以及颜色
     //可以使用border-top,border-right,border-bottom,border-left分别设定按钮的上下左右边框,
     //同样有border-left-color, border-left-style, border-left-width.等分别来设定他们的颜色,样式和宽度
     //border-image用来设定边框的背景图片。
     //border-radius用来设定边框的弧度。可以设定圆角的按钮
     btn4->setText("Button4");

本文出自 “豆子空间” 博客,请务必保留此出处

     //字体设定
     //font-family来设定字体所属家族,
     //font-size来设定字体大小
     //font-style来设定字体样式
     //font-weight来设定字体深浅
     //height用来设定其高低
     //selection-color用来设定选中时候的颜色
     edit1=new QLineEdit(this);
     edit1->setStyleSheet("QLineEdit{font: bold italic large /"Times New Roman/";font-size:25px;color:rgb(55,100,255);height:50px;border:4px solid rgb(155,200,33);border-radius:15px;selection-color:pink}");

我们知道,HTML 仅仅被定义...

     //父窗口的设定
     //icon-size来设定图片大小
     this->setWindowIcon(QIcon("image/1.png"));
      this->setStyleSheet("QWidget{background:write url(image/2.png);icon-size:20px 5px}");  //设定整个对话框的背景颜色
//      this->setStyleSheet("QWidget{icon-size:20px 5px}");
    layout1->addWidget(btn1,0,0);
    layout1->addWidget(btn2,0,1);
    layout1->addWidget(btn3,1,0);
    layout1->addWidget(btn4,1,1);
     layout1->addWidget(edit1,2,0);
}

 

这里只给出来widget主窗口的cpp文件,运行得到的结果如下图

威尼斯人app 8

我们看到连粘贴 复制板都变成了使用样式表来设定的样式

威尼斯人app 9

 

关于使用样式表 setStyleSheet()) 来设定窗口样式的时候因该注意的事项,可以参看

版权声明:本文由威尼斯人app发布于编程学习,转载请注明出处:让你的 Qt 桌面程序看上去更加 native(四):st