中國 [ 選擇]      使用條款 
   
 
 
   dW 全部內容-----------------  DB2  Lotus  Tivoli  WebSphere-----------------  Java 技術  Linux  Open source  Security  SOA & Web services  Web architecture  Wireless  XML-----------------IBM 全部內容             
 
 
      首頁       產品       服務與解決方案       支持與下載       個性化服務        
 
 
 
developerWorks 中國 > Linux >    
 
 
 用QT創建新風格Howto    
  
 
 
   
內容： 
 
1．Qt的風格 
 
2．創建新風格 
 
3．使用新風格 
 
4．進一步工作 
 
參考資料  
 
關于作者 
 
對本文的評價 
 
 
 
訂閱: 
 
developerWorks 時事通訊 
 
 
 
 
 
 
級別: 中級
 

姚延棟
研究生, 中國科學院軟件所2002級
2003 年 11 月 

本文介紹了如何使用qt提供的接口來設計自己的GUI風格(look and feel)，并通過一個具體的例子(使QSpinBox垂直顯示)來詳細說明過程。運行環境：redhat 9.0，qt-x11-free-3.2.*
1．Qt的風格
a) Qt簡介 
Qt是一個跨平臺的C++圖形用戶界面應用程序開發庫，使用Qt可以開發出高質量的圖形用戶接口，它是完全面向對象的、易于擴展且允許真正的組件編程。 Qt獲得了很大的成功，特別是它的信號-槽機制是非常值得研究的通信機制，它也是Linux發行版標準組件KDE(K Desktop Enviroment)的基礎。 

b) 風格機制 
Qt的風格機制實現了不同平臺上的圖形用戶接口（GUI）的觀感（look and feel）,例如Windows平臺上通常使用Windows或Windows-xp風格，而Unix平臺上通常使用Motif、CDE風格。 

下圖顯示了Qt中與風格相關的類的繼承關系


 

QStyle 是所有風格類的基類，它控制著所有的部件（widget即windows編程中的控件）的界面風格或觀感，它定義了大量的枚舉類型和十幾個函數。枚舉類型表示界面上的不同元素（如組合框中的按鈕，按鈕的邊框等）；函數控制圖形用戶界面的繪制，但大多數函數基本上只是一些聲明而沒有函數實現，他們的實現在 QCommonStyle、QWindowStyle、QMotifStyle及其子類中。QStyle只實現了3個函數drawItem(), itemRect(), visualRect()。

drawItem(): 負責繪制文本和象素圖。 
itemRect(): 返回文本或圖像所占的區域。 
visualRect(): 返回邏輯坐標，這個函數使Qt實現right-to-left風格（阿文、維文傳統是文本從右向左顯示，因此控件布局也是從右向左）。如下圖所示： 


 

可以看到菜單、工具條是右對齊、單選框的按鈕在右邊

c) 創建新風格的步驟 
在Qt中實現一種新風格的步驟很簡單：只需選擇一個風格類（如QCommonStyle或QStyle）作為父類，然后實現感興趣的函數即可。難點在于函數的實現。 

選擇父類：可以選擇QStyle, QCommonStyle, QWindowStyle, QMotifStyle以及他們的子類的任意一個作為父類。通常可以選擇QWindowsStyle或QMotifStyle，也可以選擇 QCommonStyle甚至是QStyle，但是工作量會比較大，因為很多界面的細節需要自己實現。 

重新實現必要的函數：想修改界面風格的哪部分，就重新實現與繪制那部分相關的函數，下面解釋一下我們要重載的QStyle中的幾個函數，這幾個函數控制著圖形用戶界面上不同元素的布局和觀感。 


                        
1）void drawPrimitive( PrimitiveElement pe,
                    	 QPainter *p,
                        const QRect & r,
                        const QColorGroup & cg,
                        SFlags flags = Style_Default,
                        const QStyleOption &opt = QStyleOption::Default ) ;
                        
 

功能：繪制基本圖形元素，如QSpinBox中的帶箭頭的按鈕 等。 

參數： PrimitiveElement pe: 這個枚舉型變量表示將要繪制的基本圖形界面元素（這里說的基本圖形用戶界面元素指GUI中不可再分的一個原子元素，如組合框 


 

中的這個繪有黑色三角形的按鈕，spinBox中的按鈕 

 


QPainter *p：指向QPainter類的指針，Qt中的所有繪制操作不管是繪制文本、圖形還是圖像都由這個類來處理。 
QRect &r: 表示一個矩形區域，Qt在這個區域中繪制基本界面元素（PrimitiveElement）. 
QColorGroup &cg: QColorGroup表示一個部件(widget)的顏色組（color group），color group含有部件繪制自己時使用的各種顏色，譬如前景色背景色等。下圖展示了color group中的各種顏色屬性 

 

SFlags flags: 控制如何繪制圖形界面元素的標志。 
QStyleOption &opt: 繪制不同的部件(widget)時會需要不同的參數，如繪制面板（panel）可能需要線寬作為額外參數而繪制焦點矩形（focus rect）可能需要背景色作為額外參數，所以Qt專門提供了一個類QStyleOption來封裝不同的widget可能需要的不同的參數，opt指向這樣一個類的對象。 


2）void drawComplexControl( 	ComplexControl control,
			QPainter *p,
			const QWidget *widget,
			const QRect &r,
			const QColorGroup &cg,
			SFlags flags = Style_Default,
			SCFlags controls = QStyle::SC_All,
			SCFlags active = QStyle::SC_None,
			const QStyleOption& opt = QStyleOption::Default)
				       			
 

功能：繪制復雜控制部件（widget）如SpinWidget，comboBox，slider，listView等

參數：

ComplexControl control：是一個枚舉量，表示將要繪制的復雜控制部件（widget）如組合框、列表框等。 
QPainter *p：指向QPainter的指針，Qt中的所有繪制操作不管是繪制文本、圖形還是圖像都由這個類來處理。 
QWidget *widget：指向QWdget或其子類的指針，可以根據上面control的值轉變（cast）成合適的類型，例如如果要繪制 QSpinWidget，那么control取值為CC_SpinWidget,而widget指向一個QSpinWidget(QWidget的子類) 的實例（instance）。使用這個變量可以訪問QSpinWidget的成員函數和成員變量，譬如可以調用QSpinWidget的sizeHint 函數獲得這個部件的缺省大?。ㄒ粋€矩形空間）。 
QRect &r: 表示一個矩形區域，Qt在這個區域中繪制控件或其子部件。 
QColorGroup &cg: QColorGroup表示一個部件(widget)的顏色組（color group），color group含有部件繪制自己時使用的各種顏色，譬如前景色背景色等。 
SFlags flags: 控制如何繪制圖形界面元素的標志 
SCFlags controls表示繪制復雜控制部件control的哪個子部件，缺省為SC_All,即繪制整個control而不是其某個子部件（注意control, controls是兩個不同的參數） 
QStyleOption &opt: 在繪制不同的部件時可能需要不同的額外的參數，這個變量在繪制不同的widget時提供不同的信息。 

									
		3) QRect querySubControlMetrics(ComplexControl control,
    								const QWidget* widget,
									SubControl sc,
									const QStyleOption&
									 = QStyleOption::Default)
									
 

功能：獲取子部件的坐標和尺寸信息。這個函數控制著一個復雜控件的布局，重載這個函數可以使的組合框的下拉按鈕繪制在左邊 而不是默認的右邊。

參數： 
ComplexControl control: 枚舉量，表示將要繪制的復雜控制部件（widget）如組合框、列表框等。 
QWidget *widget：指向QWidget或其子類的指針，可以根據上面control的值轉變（cast）成合適的類型，例如如果要繪制 QSpinWidget，那么control取值為CC_SpinWidget,而widget指向一個QSpinWidget(QWidget的子類) 的實例。使用這個變量可以訪問QSpinWidget的成員函數和成員變量，譬如可以調用QSpinWidget的sizeHint函數獲得這個部件的缺省大?。ㄒ粋€矩形空間）。 
SubControl sc：枚舉量，一個復雜部件可能由多個的子部件組成，使用sc變量說明要獲取那個子部件的坐標和尺寸信息。 
QStyleOption &opt: 計算不同部件的尺寸時可能需要不同的額外信息,QStyleOption封裝了這些信息。 

2．創建新風格
下面用一個例子來介紹一下創建新風格的整個過程，在編程之前，先看一下最終的結果是什么樣的。(在Qt內部QSpinBox類是通過QSpinWidget實現的)

默認風格的效果：   使用新風格的效果：   

可以看到在新風格中我們的SpinBox有了垂直顯示的效果。下面我們按上面說明的步驟來創建一種新的風格。

1）選擇基類：我們選擇QWindowsStyle類作為我們新風格類的基類，當然也可以選擇QMotifStyle，在這個例子種也可以選擇 QCommonStyle。一般不建議選擇QCommonStyle作為基類，因為QCommonStyle只實現了一部分界面部件，如果要實現一個完整的風格類，我們需要重新寫很多代碼。

2）重載相關的函數：在這個例程中我們只修改了spinBox的風格，實現這個部件（widget）只與QStyle類的三個函數drawPrimitive, drawComplexControl, qureySubControlMerics相關，所以我們只需重載這三個函數的相關部分代碼.下面對代碼中的關鍵部分做一下注釋，不重要的部分省略了。詳細的代碼可以從后面下載。

繪制spinbox中按鈕的函數：


void CustomStyle::drawPrimitive( PrimitiveElement pe,
                        	QPainter * p,
                            const QRect & r,
                            const QColorGroup & cg,
                            SFlags flags,
                            const QStyleOption & opt ) const
{
/*PE_SpinWidgetUp,PE_SpinWidgetDown表示spinBox中的下按鈕和上按鈕，
下面的代碼使得這兩個按鈕中的三角形分別向左和向右*/
if ((pe == PE_SpinWidgetUp) || (pe == PE_SpinWidgetDown)){
		int fw = pixelMetric( PM_DefaultFrameWidth, 0 );//fw表示邊框寬度，默認為2
		QRect br;  //spinBox上按鈕的邊界矩形不是spinBox的邊界矩形。
		br.setRect( r.x() + fw, r.y() + fw, r.width() - fw*2,
		    r.height() - fw*2 );
		p->fillRect( br, cg.brush( QColorGroup::Button ) );
		int x = r.x(), y = r.y(), w = r.width(), h = r.height();
		int sw = w-4;
		int sh = sw/2 + 2;      // Must have empty row at foot of arrow
		int sx = x + w / 2 - sw / 2 - 1;
		int sy = y + h / 2 - sh / 2 - 1;

		QPointArray a;
/* 設置三角形的三個點的坐標，修改這三個點可以使得QSpinBox上按鈕里的三角型呈現任意的形狀，
下面的設置使得三角形表示的箭頭分別向左和向右。*/
		if ( pe == PE_SpinWidgetDown )
		    a.setPoints( 3,  0, sh/2,  sw-1, 1,  sw-1, sh-1 );
  	else