C ++ / Qt में विकसित होने वाले कई लोग Qt Creator के रूप में ऐसे वातावरण से परिचित हैं, जिनके रचनाकारों ने डिजाइन पर काम किया है जो कार्यक्षमता से कम नहीं है। लेकिन मैं, गहरे रंग की योजनाओं और सपाट अतिसूक्ष्मवाद के प्रेमी के रूप में, हमेशा पैनलों और ढाल हेडर की हल्की पृष्ठभूमि को पसंद नहीं करता था।

यह खुला स्रोत प्रतीत होता है - इसे ले लो और इसे बदल दो, लेकिन अनुभवहीनता और आलस्य ने मुझे तब तक रोक दिया जब तक कि मुझे क्यूटी स्टाइल शीट्स जैसी चीज के बारे में पता नहीं चला, जो आपको सीएसएस प्रारूप में विजेट के प्रकार का वर्णन करने की अनुमति देता है।



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

पर्यावरण की तैयारी

UPD: अनुचित तरीके से किसी भी चीज़ को पैच करना, इसके बजाय, साइबरबब्स की सलाह पर , -tylesheet = स्टाइलशीट.केएस पैरामीटर के साथ QtCreator चलाना पर्याप्त है, इसलिए तुरंत redraw करने के लिए आगे बढ़ें, लेकिन यदि आप वास्तव में चाहते हैं


अब इस स्टाइलशीट को बनाएं। सत्यापन के लिए वहां लिखें और लिखें

 background: blue; color: red; 

qtcreator को पुनरारंभ करें (नसों को बचाने के लिए, आपको qtcreator को एक क्लिक से शुरू करने के लिए संपादक को कॉन्फ़िगर करना चाहिए) और इस तरह के एक असाधारण दृश्य को देखें:

जैसा कि यह होना चाहिए, सेटसाइल ने सब कुछ नीला चित्रित किया, लेकिन दो रेनेगेड दिखाई दिए: वर्तमान दस्तावेज़ की कक्षाओं और विधियों की सूची और आउटपुट पैनल के लिए स्विच। मेरी दो धारणाएं हैं कि ऐसा क्यों है: या तो ये तत्व QWidget के वंशज नहीं हैं कि वे vryatli हैं, या वे Qt शैली प्रणाली को दरकिनार करते हुए प्रतिपादन के अपने तरीके का उपयोग करते हैं, जो कि एक गैर-मानक उपस्थिति को देखते हुए, बहुत संभव है।

पुनः बनाने

जैसा कि आप जानते हैं, स्टाइल शीट फॉर्म के रिकॉर्ड का एक सेट है:

 <>[, <>, ...] { <>: <>; <>: <>; ... <>: <>; } 

यदि आपने पहले कभी ऐसा कुछ नहीं लिखा है, तो किसी भी ट्यूटोरियल के कुछ पाठ आपको यह अनुमान लगा सकते हैं कि नीचे क्या होगा। आपको क्यूटी स्टाइल शीट प्रलेखन और उदाहरणों को बाद में पढ़ना चाहिए।

चयनकर्ताओं

डेमोलॉजी में, डेमॉन को कॉल करने के लिए, आपको हमारे नाम को जानना होगा, हमारे मामले में, चयनकर्ता बनाने के लिए, आपको Q_PROPERTY () और setProperty () का उपयोग करके निर्दिष्ट वर्ग का नाम, ऑब्जेक्ट का नाम या किसी भी संपत्ति का मूल्य जानना होगा।
Qt सभी CSS2 चयनकर्ताओं का समर्थन करता है । प्रलेखन के अनुसार सबसे उपयोगी:

यूनिवर्सल चयनकर्ता	*	सभी विजेट से मेल खाता है।
चयनकर्ता टाइप करें	QPushButton	QPushButton वर्ग और उसके उपवर्गों के उदाहरणों से मेल खाती है।
संपत्ति का चयन करनेवाला	QPushButton [सपाट = "झूठा"]	QPushButton वर्ग के उदाहरणों के अनुरूप जो समतल नहीं हैं। Q_PROPERTY () का उपयोग करके निर्दिष्ट किसी भी Qt गुण की जांच करने के लिए आप इस चयनकर्ता का उपयोग कर सकते हैं। इसके बजाय = आप यह भी जांचने के लिए ~ = का उपयोग कर सकते हैं कि क्या QTringList प्रकार की Qt संपत्ति में दिए गए QString स्ट्रिंग हैं।
कक्षा चयनकर्ता	.QPushButton	QPushButton वर्ग के उदाहरणों के अनुरूप है, लेकिन इसके उपवर्ग नहीं हैं। अभिव्यक्ति के समकक्ष * [वर्ग ~ = "QPushButton"]।
आईडी चयनकर्ता	QPushButton # okButton	QPushButton वर्ग के सभी उदाहरणों से मेल खाता है, जिसका ऑब्जेक्टName OKButton है।
वंशज चयनकर्ता	QDialog QPushButton	QPushButton वर्ग के सभी उदाहरणों से मेल खाता है जो QDialog वर्ग (बच्चे, पोते, आदि) के वंशज हैं।
बाल चयनकर्ता	QDialog> QPushButton	QPushButton वर्ग के सभी उदाहरणों से मेल खाता है जो QDialog के तत्काल वंशज हैं।

अब तक, हम केवल एक प्रकार के चयनकर्ता में रुचि रखते हैं, यह गुणों का उपयोग करने के लिए अधिक लचीला और सही होगा, लेकिन इसके लिए कोड में हस्तक्षेप की आवश्यकता होती है।


अब चलो डिजाइनरों खेलते हैं।

मुझे आपको याद दिलाना है, हम पैनलों के लिए एक अंधेरे पृष्ठभूमि बनाना चाहते थे। ऐसा करने के लिए, हमें चयनकर्ता का चयन करना होगा। हम आमतौर पर इन पैनलों में क्या देखते हैं? "प्रोजेक्ट्स", "क्लास ओवरव्यू", "टाइप हायरार्की" और "आउटलाइन" (गर्लली "आउटलाइन") के पेड़, "फाइल सिस्टम", "ओपन डॉक्यूमेंट्स" और "बुकमार्क" और लिस्ट में पैनल में टेबल आदि। ई। मानक QListView, QTreeView और QTableVeiw को QAbstractItemView नाम दिया गया है ।
इसलिए, हम अपनी स्टाइलशीट में निम्नलिखित लिखेंगे।

 QAbstractItemView { color: #EAEAEA; background: #232323; font-size: 9pt; } 

हम शुरू करते हैं, खिड़की के आकार को कम से कम करते हैं ताकि अधिक तत्व बाहर आएं और हम देखें:

हमें वह मिला जो हम चाहते थे, लेकिन हमारे (यद्यपि अप्रकाशित) पैनल ने अपनी उपस्थिति खो दी, और हमारी टीम के बिना। अगर किसी ने मेनविंडो :: मेनविंडो () के साथ अपनी आँखें qApp->setStyle(new ManhattanStyle(baseName)); , तो उन्होंने संभवतः एक असंगत रेखा qApp->setStyle(new ManhattanStyle(baseName)); विशेष रूप से लगातार मैनहट्टन स्टाइल पर क्लिक कर सकते हैं और ध्यान दें कि वह QProxyStyle से विरासत में मिला है यानी यह वह है जो हमारे पैनलों की ड्राइंग को फिर से परिभाषित करता है। और यह वह है जो स्टाइल सेट करते ही बैकस्टेज चला जाता है।
इन फीके बटनों में क्षुद्र सौन्दर्य कार्यों के एक समूह का अनुमान लगाते हुए, मैंने तय किया कि मैं क्षुद्र नहीं रहूँगा, और QAbstractItemView के अलावा, मैंने QMainWindow को भी देखा, जो सभी विजेट्स के पिता हैं:

 QAbstractItemView, QMainWindow { color: #EAEAEA; background: #232323; font-size: 9pt; } 

हम लॉन्च करते हैं:

लगभग आपको जो चाहिए। यह टैब, हेडर और स्क्रॉलबार के सफेद धब्बों का निरीक्षण करने के लिए बना हुआ है।

शब्दाडंबर और शर्तें

CCS2 की तरह, क्यूटी स्टाइल शीट सबलेमेंट्स और स्टेट्स का समर्थन करती है, अर्थात। प्रपत्र में रिकॉर्ड चयनकर्ता:

 <>::<>:<> 

उदाहरण के लिए, QScrollBar::left-arrow:horizontal सभी स्क्रॉल स्क्रॉल के बाएँ तीर का चयन करता है।
आइए देखें कि यह हमारे सफेद धब्बों पर कैसे काम करता है।

QTreeView और QAbstractItemView बनाना

आरंभ करने के लिए, QAbstractItemView में चयनित आइटम की उपस्थिति को एक गहरे रंग के साथ बदलें:

 QAbstractItemView::item:selected { color: #EAEAEA; background-color: #151515; } 

तुलना:


अब हम QTreeView से निपटते हैं ।
इसकी प्रत्येक पंक्ति में एक सबलेमेंट :: आइटम और एक या अधिक :: शाखा शामिल हैं:

:: मानक राज्यों के अतिरिक्त शाखा 4 और का समर्थन करती है:
^* ब्लू - वांछित राज्य के साथ तत्व

:open	:adjoins-item	:has-children	:has-subling

सोचकर, मैंने उबाऊ तीरों के बारे में भूलने और समूहित तत्वों के विपरीत एक छोटा ग्रे बिंदु बनाने का फैसला किया। इसलिए हमें जरूरत है :closed:adjoins-item:has-children । हम कुछ पाने के मापदंडों की तरह चिकने:

 QTreeView::branch:closed:adjoins-item:has-children { background: solid #777777; margin: 6px; height: 6px; width: 6px; border-radius: 3px; } 

यदि आप तीर पसंद करते हैं, तो आपको url (फ़ाइल नाम) निर्माण पसंद करना चाहिए, जो छवि के लिए दिया गया है: या बॉर्डर-छवि: हार्ड ड्राइव पर या Qt संसाधन सिस्टम में संग्रहीत छवि को पृष्ठभूमि या सीमा के रूप में सेट करेगा।

QScrollBar को संशोधित करें

Qt स्टाइल शीट्स की नजर में, एक मानक स्क्रॉलबार में निम्न सबलेमेंट्स होते हैं:

निस्संदेह हम इस तीन आयामी भव्यता को नीरस ग्रे-ग्रे पट्टी में बदल देते हैं, और निम्नलिखित पंक्तियों के साथ "अनावश्यक 2012" पुरस्कार देने के लिए तीर के साथ बटन भेजते हैं:

 QScrollBar { border: none; background: #494949; height: 6px; width: 6px; margin: 0px; } QScrollBar::handle { background: #DBDBDB; min-width: 20px; min-height: 20px; } QScrollBar::add-line, QScrollBar::sub-line { background: none; border: none; } QScrollBar::add-page, QScrollBar::sub-page { background: none; } 

हमें मिलता है:

क्यूटाबर को संशोधित करें

आगे की हलचल के बिना, हम अपने लिविंग रूम टैब को फिर से शुरू करते हैं। ओह, और डेवलपर्स ने इस विजेट को धोखा नहीं दिया:

• घबराहट: :: आंसू (टैब विभाजक) और :: घुमक्कड़ (स्क्रॉल बटन)
• अतिरिक्त टैब का एक पूरा बिखरना :: केवल-एक ,: पहला, अंतिम ,: बीच, पिछले - चयनित,: अगला-चयनित ,: चयनित, जिसके उद्देश्य मुझे नामों से स्पष्ट हैं।
• छद्म-अवस्थाएँ: शीर्ष, बाएँ :: दाएँ ,: नीचे पैनल के उन्मुखीकरण के आधार पर।
• ओवरलैप बनाने के लिए नकारात्मक क्षेत्रों का उपयोग किया जा सकता है

कल्पना के लिए एक जगह है।
केवल एक बात याद रखें, qababar qtabwidget पर टिकी हुई है, इसलिए पृष्ठभूमि को विजेट के माध्यम से और पैनल के माध्यम से टैब के गुणों को बदलना चाहिए। लेकिन हम अनजान लोग हैं, इसके अलावा QMainWindow ने पृष्ठभूमि की देखभाल की, इसलिए हम लाइनों के साथ पतली असंगत टैब को धुंधला करते हैं:

 QMainWindow, QAbstractItemView, QTreeView::branch, QTabBar::tab { ... QTabBar::tab:selected { font: bold; border-color: #9B9B9B; border-bottom-color: #C2C7CB; } QTabBar::tab:!selected { margin-top: 2px; } 

QHeaderView संशोधित करें

जो लोग नहीं जानते थे, उनके लिए Qt में ये सभी तालिका शीर्ष लेख QHeaderView हैं। इसमें एक सबलेमेंट :: सेक्शन है जिसमें क्यूटाबार :: टैब के समान राज्य हैं।

इस बार मैंने परंपरा से पीछे हटने और ढाल भरने का फैसला किया (हां, यह यहां संभव है)। ऐसा करने के लिए, निर्माणों का उपयोग करें qlineargradient, qradialgradient, qconicalgradient। ऑब्जेक्ट ऑब्जेक्ट बाउंडिंग मोड में निर्दिष्ट हैं। एक आयत की कल्पना करें जिसमें एक ढाल प्रदान की गई है, जिसके ऊपरी बाएँ कोने में (0, 0) है, और निचला दायाँ कोना (1, 1) है। इस मामले में ढाल मापदंडों को 0 और 1. के बीच एक अंश के रूप में दर्शाया गया है। ये मान रन के समय में आयत के वास्तविक निर्देशांक के लिए एक्सट्रपलेशन किए जाते हैं। उन मूल्यों को निर्दिष्ट करना संभव है जो बाउंडिंग बॉक्स के बाहर झूठ बोलते हैं (उदाहरण के लिए, -0.6 या 1.8)।
मैंने निम्नलिखित डिज़ाइन का उपयोग किया:

 QHeaderView::section { background-color: qlineargradient(x1:0, y1:0, x2:0, y2:1, stop:0 #616161, stop: 0.5 #505050, stop: 0.6 #434343, stop:1 #656565); color: white; padding-left: 4px; border: 1px solid #6c6c6c; } 

यही हमने मांगा।

हम जिद्दी सॉकेट के लिए राजी करते हैं

केवल एक छोटी सी समस्या है:

यह विभाजन पूरी तरह से हमारे प्रयासों के प्रति उदासीन रहा, इसके अलावा, वह तब भी उदासीन रहा जब हमने चयनकर्ता के रूप में QWidget के परदादा को संकेत दिया। इसके बावजूद, मैं अभी भी विभिन्न चयनकर्ताओं के माध्यम से गया। पहली बार, मैं इसे चयनकर्ताओं के साथ QComboBox और QLabel के साथ प्रवेश करने में कामयाब रहा:

 QComboBox, QComboBox::drop-down { color: #EAEAEA; background: #232323; font-size: 9pt; border: none; padding: 1px 18px 1px 3px; min-width: 6em; } QLabel { border-style: solid; color: #EAEAEA; background: #232323; font-size: 9pt; } 

चेहरे पर विपक्ष। विभाजन के चारों ओर एक छोटा अनुभवहीन सीमा-शैली फ्रेम, इसलिए अनुचित रूप से हर जगह भारी आनुवंशिकता लीक हो गई।

यहां, संयोग से, सामान्य ज्ञान की बूंदें दिखाई दीं। बच्चे, पंक्ति में बटन वाले खिड़की के शीर्ष पर इतना पतला क्या है? बेशक यह क्यूटीबेलर है!
हम कोशिश करते हैं:

 QToolBar { border-style: solid; border-style: outset; color: #EAEAEA; background: #333333; font-size: 9pt; } 

बिंगो! एक गंभीर बीमारी के सभी निशान गायब हो गए और पाखण्डी आज्ञाकारी सामान्य दृश्य में शामिल हो गए।

परिणाम

stylesheet.css

कार्यसूची:

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