自定义QT窗口部件外观之QStyle

Posted 2020-08-29 朝闻道

自定义QT窗口部件外观

重新定义Qt内置窗口部件的外观常用的方法有两种：一是通过子类化QStyle 类或者预定义的一个样式，例如QWindowStyle，来定制应用程序的观感；二是使用Qt样式表。

 

QStyle 类的使用

1.      准备必要的背景图片。在你想添加自定义风格的工程目录下新建一个文件夹“images”，将背景图片等放入文件夹“images”。

2.      点击Qt Creator的“文件”->“新建文件或工程”->模板选择“Qt”，再选择Qt资源文件->点击“选择”按钮->输入名称->点击“下一步”->点击“完成”。

3.      双击打开Qt Creator的项目管理器中的“**.qrc”资源文件，单击“添加”->“添加前缀”，将前缀名“/new/***”更名为“/”->再次单击“添加”->“添加文件”->将工程目录下“images”文件夹的图片添加进来。保存并关闭资源管理器。

4.      下面开始创建样式子类。新建C++类，命名为myStyle。

5.      修改头文件“mystyle.h”。头文件修改好后如下：

#include<QtGui>

#include<QPalette>

#include<QMotifStyle>

classmyStyle:publicQMotifStyle

{

   Q_OBJECT

public:

   myStyle();

//以下三个函数在装载Style和卸载Style时调用,它可以是适当修改窗口部件和调色板

   voidpolish(QPalette&palette);//改变调色板为样式指定的颜色调色板

   voidpolish(QWidget*widget);//初始化给定窗口部件的外观,窗口部件每一次创建后首次显示之前调用

   voidunpolish(QWidget*widget);//取消polish()的作用

   intpixelMetric(PixelMetricmetric,constQStyleOption*option,

                    constQWidget*widget)const;//设置各部件的线宽，大小等

   intstyleHint(StyleHinthint,constQStyleOption*option,

                  constQWidget*widget,QStyleHintReturn*returnData)const;//分别设置各种部件的布局，比如checkbox的text在左边或者在右边

 

   voiddrawPrimitive(PrimitiveElementelement,constQStyleOption*option,

                       QPainter*painter,constQWidget*widget)const;

//这个则是最重要的，在这里面可以实现对不同部件的原始元素的绘制，当然你也可以调用默认的方法.element这个参数就是我们需要重绘的部件的原始元素

 

   voiddrawControl(ControlElementelement,constQStyleOption*option,

                     QPainter*painter,constQWidget*widget)const;

};

 

我们这里用QMotifStyle类作为基类，当然你也可以采用其他预定义的样式作为基类。至于选择哪个基类来继承完全取决用户，通常选择和自己所期望的最相近的类来继承。这里贴一个图，主要是继承层次的图：

       

6.      实现文件“mystyle.cpp”的函数定义。

voidmyStyle::polish(QPalette&palette)

{

   QColorbrown(212,140,95);//褐色

   QColorslightlyOpaqueBlack(0,0,0,63);

   QColorveryLightGreen(204,232,215);//浅绿色

   QPixmapbackgroundImage(":/images/bgPortrait.jpg");

   QPixmapbuttonImage(":/images/wood.jpg");

   QPixmapmidImage=buttonImage;//滑动条背景

   QPainterpainter;//画笔

   painter.begin(&midImage);

   painter.setPen(Qt::NoPen);

   painter.fillRect(midImage.rect(),slightlyOpaqueBlack);

   painter.end();

   palette=QPalette(brown);//调色板

   palette.setBrush(QPalette::BrightText,Qt::white);

   palette.setBrush(QPalette::Base,veryLightGreen);//设置输入框背景

   palette.setBrush(QPalette::Highlight,Qt::darkGreen);//设置鼠标选中的背景色为深绿色

   palette.setBrush(QPalette::Button,buttonImage);//设置按钮背景

   palette.setBrush(QPalette::Mid,midImage);//设置滑动条背景

   palette.setBrush(QPalette::Window,backgroundImage);//设置应用程序背景

   QBrushbrush=palette.background();

   brush.setColor(brush.color().dark());

   palette.setBrush(QPalette::Disabled,QPalette::WindowText,brush);

   palette.setBrush(QPalette::Disabled,QPalette::Text,brush);

   palette.setBrush(QPalette::Disabled,QPalette::ButtonText,brush);

   palette.setBrush(QPalette::Disabled,QPalette::Base,brush);

   palette.setBrush(QPalette::Disabled,QPalette::Button,brush);

   palette.setBrush(QPalette::Disabled,QPalette::Mid,brush);

}

应用程序的颜色外观主要在这个函数设定，至于可以设置哪些外观，请参考Qt帮助文档的 “QPalette::ColorRole”部分。

 

voidmyStyle::polish(QWidget*widget)

{

   if(qobject_cast<QPushButton*>(widget)

            ||qobject_cast<QComboBox*>(widget))

       widget->setAttribute(Qt::WA_Hover,true);

   //鼠标进入或者离开窗口部件所在区域时，会产生一个绘制事件

}

 

voidmyStyle::unpolish(QWidget*widget)

{

   if(qobject_cast<QPushButton*>(widget)

            ||qobject_cast<QComboBox*>(widget))

       widget->setAttribute(Qt::WA_Hover,false);

}

 

intmyStyle::pixelMetric(QStyle::PixelMetricmetric,

                         constQStyleOption*option,constQWidget*widget)const

{

   switch(metric)

   {

   casePM_ComboBoxFrameWidth:

       return6;

   casePM_ScrollBarExtent:

       returnQMotifStyle::pixelMetric(metric,option,widget)+4;

   default:

       returnQMotifStyle::pixelMetric(metric,option,widget);

   }

}

intmyStyle::styleHint(QStyle::StyleHinthint,

                       constQStyleOption*option,constQWidget*widget,

                       QStyleHintReturn*returnData)const

{

   switch(hint)

   {

   caseSH_DitherDisabledText:

       returnint(false);

   caseSH_EtchDisabledText:

       returnint(true);

   default:

       returnQMotifStyle::styleHint(hint,option,widget,returnData);

   }

}

voidmyStyle::drawPrimitive(QStyle::PrimitiveElementelement,

                            constQStyleOption*option,QPainter*painter,constQWidget*widget)const

{

   QMotifStyle::drawPrimitive(element,option,painter,widget);

}

这里采用的是默认的绘制函数，如果要改变PushButton等部件的形状外观，请上网查阅相关资料或查阅相关书籍。

voidmyStyle::drawControl(QStyle::ControlElementelement,

                          constQStyleOption*option,QPainter*painter,constQWidget*widget)const

{

   QMotifStyle::drawControl(element,option,painter,widget);

}

这里也是采用默认的绘制函数。

 

 

7.       修改“main.cpp”文件。首先添加 #include"mystyle.h"

然后在main函数中添加QApplication::setStyle(newmyStyle);

 

这样，自定义样式的工作就全部完成了。这里只是对QStyle类的使用做了简单介绍。你也可以参考Qt的Demo例子“styles”。如需详细了解自定义样式的相关知识，请访问网站http://doc.trolltech.com/4.3/style-reference.html

 

http://blog.csdn.net/liuguangzhou123/article/details/7458450