Qt: स्टाइल शीट्स पर क्रॉस-प्लेटफ़ॉर्म एप्लिकेशन

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


स्क्रीनशॉट हमारे छात्र आयोजक के संवादों में से एक दिखाता है, जिसका पूरा इंटरफ़ेस QSS पर लागू किया गया है।

उसी स्क्रीनशॉट में, हम इंटरफ़ेस के मुख्य तत्वों को देखते हैं, जिसका अनुकूलन आज हम विश्लेषण करेंगे:

• खंड बटन
• नियमित बटन
• टेबल
• स्क्रॉलबार

मूल बातें

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

मैं दृढ़ता से क्यूटी संसाधन प्रणाली का उपयोग करने की सलाह देता हूं, जो आपको सीधे बाइनरी में छवियों और शैली फ़ाइलों को परेशान करने और संकलित करने की अनुमति नहीं देता है।

तो, हम स्टाइलशीट बनाते हैं, इसे विश्व स्तर पर लागू करते हैं:

QFile styleF; styleF.setFileName(":/qss/style.css"); styleF.open(QFile::ReadOnly); QString qssStr = styleF.readAll(); qApp->setStyleSheet(qssStr); 

स्टाइल शीट के सिंटैक्स पर आधिकारिक प्रलेखन का एक उत्कृष्ट अनुवाद है , इसलिए मैं सिर्फ यह नोटिस करूंगा कि दूसरों की तुलना में अधिक बार विगेट्स का वर्णन करने के तीन तरीके हैं कि किस शैली (चयनकर्ताओं) को लागू किया जाएगा:

क्लास द्वारा कॉल , उदाहरण के लिए, ऐसा नियम आपके आवेदन के सभी बटन पर लागू होगा, पृष्ठभूमि का रंग लाल में बदल जाएगा:

 QPushButton { background-color: red; } 

नाम से कॉल करना , फिर यह नियम केवल उन बटनों पर लागू किया जाएगा, जिनका नाम "okButton" है:

 QPushButton#okButton { background-color: red; } 

इसके अलावा, अगर एक ही रूप पर कई तत्व हैं, जिसमें आप एक ही शैली लागू करना चाहते हैं, तो आप setObjecterame का उपयोग कर सकते हैं:

 ui->pbRed1->setObjectName("myRedButton"); ui->pbRed2->setObjectName("myRedButton"); 

प्रपत्र पर विगेट्स के पदानुक्रम का उल्लेख करते हुए , फिर नियम केवल उन बटनों पर लागू किया जाएगा जो "मेनफ्रैम" नाम के साथ फ्रेम के अंदर स्थित हैं:

 QFrame#mainFrame QPushButton{ background-color: red; } 

अलग-अलग, इसे अधीनताओं और छद्म राज्यों के लिए शैलियों की स्थापना के बारे में कहा जाना चाहिए:

छद्म-राज्यों को चयनकर्ता के अंत में संकेत दिया जाता है, जो एक बृहदान्त्र द्वारा अलग किया जाता है (:)। उदाहरण के लिए, माउस QPushButton से अधिक होने पर निम्न नियम लागू होता है:

 QPushButton:hover { background-color: white } 

कॉम्प्लेक्स विजेट में सबलेमेंट होते हैं, इसलिए, डिज़ाइन को बदलने के लिए, आप उनमें से प्रत्येक तक पहुंच सकते हैं, इसके लिए ऑपरेटर "::" का उपयोग किया जाता है। उदाहरण के लिए, हम यह दर्शाते हुए तीर को बदलना / हटाना चाहते हैं कि बटन को एक मेनू सौंपा गया है, इस मामले में नियम इस तरह दिखेगा:

 QPushButton#menuButton::menu-indicator { image: url(:/img/other/myindicator.png); } 

दुर्भाग्य से, सभी सुविधाओं का वर्णन करने के लिए आपको एक पूर्ण- सीएसएस सीएसएस ट्यूटोरियल की आवश्यकता होगी, तो चलिए उदाहरणों पर चलते हैं।

खंड बटन

मेरे पास दो खबरें हैं: एक अच्छी है और दूसरी बहुत अच्छी नहीं है। दुखद बात यह है कि QSS छाया रेंडरिंग का समर्थन नहीं करता है। निश्चित रूप से। इसलिए, यदि आप सामान्य रूप से सेगमेंट के बटनों की सामान्य स्थिति को मुश्किल नहीं बनाते हैं, तो दबाया गया है ... सामान्य तौर पर, केवल चित्र।
यहाँ इस अपमान के लिए जिम्मेदार शैलियों हैं:

 QPushButton#pbDelRight { image: url(:/img/buttons//pbDelRight.png); border-top-right-radius: 4px; border-bottom-right-radius: 4px; height: 26px; width: 40px; } QPushButton#pbDelRight:pressed { image: url(:/img/buttons/pbDelRightPressed.png); } QPushButton#pbDelRight:checked { image: url(:/img/buttons/pbDelRightPressed.png); } 

राज्य: दबाया गया निर्दिष्ट किया जाना चाहिए ताकि इसके पारित होने के दौरान कोई अंतराल न हो।

ओएस एक्स बग : यदि आप बटन को फ्लैट में सेट नहीं करते हैं, तो वे एक-दूसरे को ओवरलैप करेंगे।

बटन साधारण हैं

मुझे पता है कि छाया का उपयोग किए बिना एक दबाए गए राज्य को प्रदर्शित करने के लिए केवल दो विकल्प हैं - ढाल और उल्टे रंगों को प्रतिबिंबित करें। दूसरे विकल्प पर विचार करें:

  QPushButton#pbReady { padding:4px; color: #fff; font-size: 14px; border-radius: 2px; border: 1px solid #3873d9; background-color: qlineargradient( x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 #4287ff, stop: 1 #356ccc); } QPushButton#pbReady:pressed { color: #111; border: 1px solid #3873d9; background: #fff; } 

टेबल

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

 QHeaderView { background-color: #fff; font-size:13px; } QHeaderView::section:horizontal { color: #fff; border-style: solid; background-color: qlineargradient( x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 #4287ff, stop: 1 #356ccc); } QTableView { border: 2px solid #3873d9; border-top-color: #4287ff; border-radius: 4px; background-color: #fff; background-image: url(:/img/other/background.png); gridline-color: #777; selection-background-color: #ccdfff; color:#333; font-size:12px; } 

स्क्रॉलबार

मुख्य अनुकूलन योग्य तत्व किनारों पर दो तीर हैं और एक हैंडल, जिसके लिए, वास्तव में, आप माउस को पकड़ सकते हैं:

  QScrollBar:vertical { background: #e4e4e4; border-top-right-radius: 4px; border-bottom-right-radius: 4px; width: 12px; margin: 0px; } QScrollBar::handle:vertical { background-color: qlineargradient( x1: 0, y1: 0, x2: 1, y2: 0, stop: 0 #4287ff, stop: 1 #356ccc); border-radius: 4px; min-height: 20px; margin: 0px 2px 0px 2px; } QScrollBar::add-line:vertical { background: none; height: 0px; subcontrol-position: right; subcontrol-origin: margin; } QScrollBar::sub-line:vertical { background: none; height: 0px; subcontrol-position: left; subcontrol-origin: margin; } 

OS X पर, 10.9 से शुरू होकर, जादू गायब करने वाले स्क्रॉलबार का उपयोग किया जाता है, Qt उनका समर्थन करता है, इसलिए आपको उन्हें फिर से परिभाषित नहीं करना चाहिए।
एक क्रॉस-प्लेटफ़ॉर्म बग स्क्रॉलबार के साथ जुड़ा हुआ है, जिसके कारण स्क्रॉल के निचले / दाएं किनारे को स्क्रॉल ऑब्जेक्ट के ऊपर खींचा जाता है यदि इसमें क्यूएसएस के माध्यम से स्ट्रोक होता है।

सामग्री की चक्र तालिका

प्रत्येक विशिष्ट विजेट को कस्टमाइज़ करने के लिए QSS का उपयोग करने के PS उदाहरण यहां पाए जा सकते हैं , संभावित गुणों, राज्यों और उप-तत्वों की एक निर्देशिका। खैर, रिबन इंटरफेस को लागू करने के प्रयास के साथ हब पर एक लेख , यह पढ़ने के लिए दिलचस्प हो सकता है।
PPS वास्तविक समय प्रदर्शन के साथ QSS के संपादन के लिए एक दिलचस्प उपकरण है ।