एक उदाहरण तालिका का उपयोग करके एक Qt इंटरफ़ेस शैली बनाएँ

जैसा कि आप जानते हैं, क्यूटी इंटरफेस बनाने के लिए डेवलपर्स को लगभग असीमित संभावनाएं प्रदान करता है। ज्यादातर मामलों में, यदि आप मानक विगेट्स का उपयोग करते हैं, तो आपके एप्लिकेशन की उपस्थिति (और इसके इंटरफ़ेस तत्व) आपके ऑपरेटिंग सिस्टम की उपस्थिति के अनुरूप होंगे। ऐसा करने के लिए, क्यूटी में तथाकथित शैलियों की एक प्रणाली है - कक्षाएं जो मानक इंटरफ़ेस तत्वों के प्रतिपादन के लिए जिम्मेदार हैं। इस लेख में, हम अपनी खुद की शैली बनाने की कोशिश करेंगे और इसे एक सरल अनुप्रयोग के लिए लागू करेंगे ताकि क्यूटेबलवेट विजेट के आधार पर एक सुंदर तालिका प्राप्त की जा सके ।

सैद्धांतिक भाग

तो, चलो सिद्धांत के साथ शुरू करते हैं। Qt में, एक अमूर्त वर्ग QStyle है , जिम्मेदार है, जैसा कि आप अनुमान लगा सकते हैं, आवेदन को स्टाइल करने के लिए। कई कक्षाएं इसे ( QWindowStyle , QMacStyle , आदि) से विरासत में मिली हैं, जो ऐसी शैलियाँ हैं जो ऑपरेटिंग सिस्टम के मानक स्वरूप का अनुकरण करती हैं। हम उनकी छवि और समानता में आवेदन के लिए अपनी खुद की शैली बनाएंगे। Qt को कस्टम स्टाइल की आवश्यकता है जो सीधे QStyle से विरासत में नहीं मिली है, लेकिन इसके व्युत्पन्न वर्गों में से एक है। प्रलेखन सिस्टम स्टाइल को वांछित के सबसे करीब चुनने और इसे "आपके लिए" बदलने की सिफारिश करता है। हम अपनी कक्षा को QStyle , क्लास QCommonStyle से कम सार से विरासत में नहीं लेंगे ।

तो आप एक शैली के अंदर तत्वों को कैसे आकर्षित करते हैं? QStyle वर्ग के कार्यों का एक समूह है, जिनके नाम शब्द ड्रा से शुरू होते हैं:

• drawComplexControl ()
• ड्राकंट्रोल ()
• drawItemPixmap ()
• drawItemText ()
• ड्रिमप्रिटिव ()

उनमें से प्रत्येक तत्व प्रदान करने के काम का अपना छोटा हिस्सा करता है।

drawComplexControl () का उपयोग कंपोजिट विजेट्स को आकर्षित करने के लिए किया जाता है, अर्थात, जो अपने भीतर कई अन्य विजेट्स रखते हैं।
एक उदाहरण QSpinBox है , जो, जैसा कि आप अनुमान लगा सकते हैं, सामान्य स्पिनबॉक्स को लागू करता है और इसमें इनपुट फ़ील्ड और दो छोटे रंग शामिल होते हैं:


drawControl () बटन और इनपुट फ़ील्ड की तरह मानक विगेट्स खींचता है।

drawPrimitive () तथाकथित आदिम तत्वों को खींचता है, उदाहरण के लिए, फ़्रेम।

drawItemPixmap () और drawItemText () में काफी बोलने वाले नाम हैं और ठीक वही करें जो आप उनसे उम्मीद कर सकते हैं। सभी कार्यों का विस्तृत विवरण, साथ ही उनके तर्क, क्यूटी प्रलेखन में बहुत आसानी से मिल सकते हैं, इसलिए मैं इस पर ध्यान नहीं दूंगा।

हमारे उदाहरण में, हम QTableWidget तत्व को स्टाइल करेंगे, जो एक साधारण तालिका है। बाकी तत्वों के लिए शैलियाँ बिल्कुल उसी तरह से की जाती हैं।

शुरुआत हो रही है

सबसे पहले, एक नया C ++ क्लास बनाएं। एक वर्ग बनाते समय, Qt हमें अपना नाम लिखने के लिए मदद करता है, साथ ही उस वर्ग का नाम भी बताता है, जहाँ से हम वारिस करना चाहते हैं। आइए इसे सरलता के लिए नाम दें MyStyle , और QCommonStyle से विरासत निर्दिष्ट करें। उसके बाद, Qt हमारे लिए (.h और .cpp) फ़ाइलों की एक जोड़ी बनाएगा, जिसमें शुरुआत के लिए, हम इस तरह से कुछ प्राप्त करना चाहते हैं:



हमारा मुख्य () फ़ंक्शन इस तरह दिखेगा:

 int main(int argc, char *argv[]) { QApplication::setStyle( new myStyle ); QApplication a(argc, argv); QTableWidget w(4,3); w.setGeometry(QRect(0,0,300,250)); w.show(); return a.exec(); } 

जैसा कि आप देख सकते हैं, हम जो कुछ भी करते हैं वह हमारी शैली सेट करता है, एक विजेट बनाता है और इसे प्रदर्शित करता है। इस स्तर पर, हमारे पास केवल एक खाली शैली है जो QCOMonStyle से विरासत में मिली है, इसलिए हमारी तालिका ... अच्छी तरह से कहेंगे, बहुत आकर्षक नहीं है:



आइए अधिक विस्तार से विचार करें कि तालिका में क्या है।


संरचना, सामान्य रूप से, काफी सरल और सीधी है। क्या सुर्खियों में एक सेकंड के लिए रुकना लायक है। क्यूटी में, दो प्रकार के हेडर को अलग किया जाता है: क्षैतिज (शीर्ष पर एक) और ऊर्ध्वाधर (बाईं ओर एक)। "शीर्षक क्षेत्र" से मेरा मतलब है कि पूरा क्षेत्र जिस पर शीर्षक बाद में प्रदर्शित किया जाएगा। एक अनुभाग प्रत्येक विशिष्ट हेडर सेल है। एक असंबद्ध क्षेत्र हेडर का वह हिस्सा होता है जहाँ कोई खंड नहीं होते हैं (यह तब होता है जब सभी वर्गों का कुल आकार तालिका के आकार से कम होता है)।

तो, इस ज्ञान से लैस, आप प्रत्येक तत्व को स्टाइल कर सकते हैं। हमारी कक्षा में फ़ंक्शंस जोड़कर शुरू करते हैं।

 void drawControl(ControlElement element, const QStyleOption *opt, QPainter *p, const QWidget *w) const; void drawItemText(QPainter *painter, const QRect &rect, int flags, const QPalette &pal, bool enabled, const QString &text, QPalette::ColorRole textRole) const; void drawPrimitive(PrimitiveElement pe, const QStyleOption *opt, QPainter *p, const QWidget *w) const; 

चलो drawControl () फ़ंक्शन के साथ शुरू करते हैं। कार्यान्वयन के लिए कोड जोड़ें:

 switch(element) { default: QCommonStyle::drawControl(element, opt, p, w); break; } 

इस फ़ंक्शन का मुख्य गुण तत्व है , जो उस प्रकार को इंगित करता है जो हम आकर्षित करेंगे। अंदर स्विच 'हम उन तत्वों में से प्रत्येक के लिए मामला जोड़ देंगे' y जो हम खुद को आकर्षित करेंगे। मूल वर्ग के समान फ़ंक्शन का उपयोग करके अन्य सभी को डिफ़ॉल्ट अनुभाग में संसाधित किया जाएगा।

आइए उस फ्रेम से शुरू करें जो हमारी पूरी तालिका को घेरे हुए है। मैं एक ढाल बनाऊंगा। ऊपरी और निचली सीमाएं सफेद होंगी, और ऊर्ध्वाधर सीमाएं एक ढाल के साथ खींची जाएंगी: वे किनारों पर सफेद और बीच में हल्के भूरे रंग के होंगे।

ऐसा करने के लिए, drawControl () फ़ंक्शन के लिए निम्न कोड जोड़ें:

 case CE_ShapedFrame: { //  QLinearGradient gradient(0, 0, 0, opt->rect.height()); gradient.setColorAt(0, QColor(255,255,255)); gradient.setColorAt(0.5, QColor(225,225,225)); gradient.setColorAt(1, QColor(255,255,255)); QPen pen; pen.setBrush( gradient ); p->setPen(pen); //  p->drawRect( 0,0,opt->rect.width()-1, opt->rect.height()-1); } break; 

अब सुर्खियों में आते हैं। स्वयं हेडर क्षेत्र ( CE_Header ) को संसाधित करने की आवश्यकता नहीं है। हम वर्गों और खाली क्षेत्र से निपटेंगे। खाली क्षेत्र के साथ, सब कुछ बहुत सरल है, हम इसे एक सादे ग्रे रंग से भर देंगे:

 case CE_HeaderEmptyArea: p->fillRect( opt->rect, QBrush( QColor( 233, 233, 233 ) ) ); break; 

वर्गों के साथ यह कुछ अधिक जटिल होगा। जैसा कि हम जानते हैं, यदि आप तालिका के शीर्ष पर क्लिक करते हैं, तो या तो पूरी पंक्ति या संपूर्ण स्तंभ चुना जाता है (जहां हमने क्लिक किया है उसके आधार पर)। इस स्थिति में, हेडर अपना स्वरूप बदल देगा ताकि उपयोगकर्ता को अपने राज्य में परिवर्तन दिखाई दे। आमतौर पर, शीर्षक या तो "दबाया गया" या रंगा हुआ है। हम इस कार्यक्षमता को बनाए रखना चाहते हैं। इसके अलावा, मैं चाहूंगा कि कोशिकाओं या कोशिकाओं का चयन करते समय, संबंधित हेडर भी रंगीन हों।

तो, निम्न कोड जोड़ें:

 case CE_HeaderSection: { //  if( opt->state & State_Sunken || opt->state & State_On ) { //    p->fillRect(opt->rect, QBrush( QColor(255,170,80) )); p->setPen( QPen( QColor( 170,170,170) ) ); //   p->drawRect(opt->rect.x(), opt->rect.y(),opt->rect.width()-1,opt->rect.height()-1); } else//  { //    QLinearGradient gradient(0, 0, 0, opt->rect.height()); gradient.setSpread(QGradient::PadSpread); gradient.setColorAt(0, QColor(255,255,255)); gradient.setColorAt(1, QColor(220,220,220)); //  p->fillRect(opt->rect, QBrush( gradient )); //     gradient.setColorAt(0, QColor(230,230,230)); gradient.setColorAt(0.5, QColor(175,175,175)); gradient.setColorAt(1, QColor(230,230,230)); QPen pen; pen.setStyle(Qt::SolidLine); pen.setBrush(gradient); p->setPen(pen); //   p->drawLine( opt->rect.width() + opt->rect.x() - 1, opt->rect.y() + 3, opt->rect.width() + opt->rect.x() - 1, opt->rect.height() + opt->rect.y() - 3 ); } } 

इस स्तर पर, हमें एक बहुत अच्छा शीर्षक मिला। हालांकि, चयनित होने पर, हमारी कोशिकाएं अभी भी डिफ़ॉल्ट रूप से एक बहुत बदसूरत रंग के साथ चित्रित की जाती हैं। इसके अलावा, मानक फ़ोकस फ़्रेम भी बहुत सुंदर नहीं दिखता है।

CE_ItemViewItem विशेषता कोशिकाओं के प्रतिपादन के लिए जिम्मेदार है। इसमें निम्न कोड जोड़ें:

 case CE_ItemViewItem: { //  ,       drawPrimitive(PE_PanelItemViewItem, opt, p, w); //       //    ,      . const QStyleOptionViewItemV4 * option = qstyleoption_cast<const QStyleOptionViewItemV4 *>(opt); if( !option ) { //  -    ,     QCommonStyle::drawControl(element, opt, p, w); return; } //       . if (option->state & QStyle::State_HasFocus) { QPen pen(QColor( 170,170,170 )); p->save(); p->setPen(pen); p->drawRect(opt->rect.x(), opt->rect.y(), opt->rect.width()-1, opt->rect.height()-1); p->restore(); } //  ,      QRect textRect = subElementRect(SE_ItemViewItemText, option, w); // ,    ""    textRect.setX( textRect.x() + 5 ); textRect.setY( textRect.y() + 5 ); if( !option->text.isEmpty() ) { // . p->drawText(textRect, option->text); } } 

चूंकि, कोशिकाओं को संसाधित करते समय, हम PE_PanelItemViewItem तत्व के लिए drawPrimitive फ़ंक्शन को कॉल करते हैं, हम इस तत्व को प्रस्तुत करेंगे ताकि चयनित कोशिकाओं को कुछ और सुखद रंग में चित्रित किया जाए।

DrawControl () के साथ सादृश्य करके, drawPrimitive () में ठीक उसी स्विच को जोड़ें , और तुरंत उस सेल को कार्यान्वित करें, जिसकी हमें आवश्यकता है:

 switch( pe ) { case PE_PanelItemViewItem: //  ,    ,   . if (const QStyleOptionViewItemV4 *option = qstyleoption_cast<const QStyleOptionViewItemV4 *>(opt)) if (option->state & QStyle::State_Selected) { p->fillRect(option->rect, QBrush( QColor( 220,220,220,100 ))); } break; default: QCommonStyle::drawPrimitive( pe, opt, p, w); break; } 

अंत में, वह फ़ॉन्ट बदलें जो टेक्स्ट प्रदर्शित करेगा। निम्नलिखित कोड को addItemText () फ़ंक्शन में जोड़ें:

 painter->setPen( QPen( QColor( 30, 30, 30 ))); painter->setFont(QFont("Consolas")); painter->drawText(rect, text); 

इसलिए, हमने एक सादे टाइल को बदल दिया, और अब यह इस तरह दिखता है:



मेरी राय में जो मूल रूप से था उससे बहुत बेहतर है।

इस दृष्टिकोण के फायदे

बेशक, इस तरह से पूरे आवेदन के लिए शैलियों का निर्माण बहुत समय लेने वाला कार्य है। एक तत्व के लिए शैली (इस आलेख में) बहुत जल्दी किया जा सकता है, लेकिन यदि आप सभी विजेट्स का ध्यान रखना चाहते हैं (उदाहरण के लिए, यदि आप अपनी शैली को फैलाना चाहते हैं ताकि अन्य लोग इसका उपयोग कर सकें), तो इसमें बहुत समय लग सकता है। उदाहरण के लिए, मुझे उन तत्वों का विवरण नहीं मिला, जिन्हें प्रत्येक व्यक्तिगत विजेट के लिए तैयार किया जाना चाहिए, और मुझे उन्हें "वैज्ञानिक प्रहार" विधि का उपयोग करके निर्धारित करना था। हालांकि, इस तरह से स्टाइल करने के कई महत्वपूर्ण फायदे हैं।

सबसे पहले, ये शैलियाँ सभी तत्वों पर लागू होती हैं। यदि आपके पास 300 टेबल हैं, तो आपको प्रत्येक को मैन्युअल रूप से कॉन्फ़िगर करने की आवश्यकता नहीं है, आवेदन के लिए शैली एक पंक्ति में लागू होती है।

दूसरे, इस तरह से बनाई गई शैलियों को बदलने के लिए सुविधाजनक है। यह शायद उपयोगकर्ता को सेटिंग्स के माध्यम से एप्लिकेशन की शैली को बदलने का अवसर देने का सबसे अच्छा तरीका है। इसके अलावा, आप यह सुनिश्चित कर सकते हैं कि आपके द्वारा बनाई गई शैली हर बार एक ही दिखेगी।

पूरी तरह से स्रोत: