🌪️ 👩🏽‍🎨 👫 एक सूची अला फायरफॉक्स बनाने के उदाहरण के रूप में मॉडल और प्रतिनिधियों के साथ काम करना 💆🏽 ⚡️ 🌛

Qt पर बिल्डिंग इंटरफेस की जटिलता की तुलना में एक बार से अधिक की तुलना। यह लेख फ़ायरफ़ॉक्स मॉड्यूल की सूची की शैली में एक सूची बनाने का एक उदाहरण देगा।

ऐसा करने के लिए, हम एमवीसी दृष्टिकोण का उपयोग करते हैं, जिसे क्यूटी में लागू किया गया है । आउटपुट कुछ इस तरह मिलेगा:

पूरी प्रक्रिया को 3 भागों में विभाजित किया गया है:

मॉडल निर्माण
प्रतिनिधि रचना
एक प्रस्तुति बनाना

मॉडल निर्माण

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

int columnCount ( const QModelIndex & parent = QModelIndex() ) const; QVariant data ( const QModelIndex & index, int role = Qt::DisplayRole ) const; QModelIndex index ( int row, int column, const QModelIndex & parent = QModelIndex() ) const; QModelIndex parent ( const QModelIndex & index ) const; int rowCount ( const QModelIndex & parent = QModelIndex() ) const; Qt::ItemFlags flags ( const QModelIndex & index ) const;

इसके अलावा, मॉडल को बदलने की संभावना के लिए, हम विधि को फिर से परिभाषित करते हैं:

 bool setData ( const QModelIndex & index, const QVariant & value, int role = Qt::EditRole );

मैं मॉडल को विस्तार से चित्रित नहीं करूंगा, पूर्ण कार्यान्वयन संलग्न स्रोतों में देखा जा सकता है।

प्रतिनिधि निर्माण

सबसे दिलचस्प और महत्वपूर्ण हिस्सा यहां स्थित है, क्योंकि यह वर्ग इस बात के लिए ज़िम्मेदार है कि हमारा डेटा उपयोगकर्ता के साथ कैसे दिखेगा और बातचीत करेगा।

इस कार्यान्वयन ने मुझे संकेत दिया कि चेकबॉक्स के साथ काम को QItemDelegate प्रतिनिधि के साथ कैसे लागू किया गया था। इसलिए, प्रलेखन को पढ़ने के अलावा, यह स्रोत कोड को देखने के लिए भी उपयोगी है, वहाँ कई उपयोगी समाधान हैं।

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

ड्राइंग

इसके लिए प्रवेश बिंदु पेंट विधि में है:

 void QvObjectDelegate::paint( QPainter * painter, const QStyleOptionViewItem & option, const QModelIndex & index ) const { painter->save(); if(index.parent().isValid()) { if(needRestart(index)) { drawItemBackground(painter, option, index); paintObjectHeader(painter, option, index); } paintObject(painter, option, index); } else { paintHeader(painter, option, index); } painter->restore(); painter->save(); painter->setPen(QColor(0xD7, 0xD7, 0xD7)); painter->drawLine(option.rect.bottomLeft(), option.rect.bottomRight()); painter->restore(); }

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

अनुभाग शीर्षक रेंडरिंग

 void QvObjectDelegate::paintHeader( QPainter * painter, const QStyleOptionViewItem & option, const QModelIndex & index ) const { QPainter &p = *painter; p.save(); p.setClipRect(option.rect); p.setPen(QColor(77, 77, 77)); //   QRect tr; QString name = index.data(Qt::DisplayRole).toString(), desc = index.data(QvObjectModel::DetailRole).toString(); QFont f = option.font; f.setPointSize(12); f.setWeight(QFont::Bold); QFontMetrics fm(f); tr = fm.boundingRect(name); p.setFont(f); p.drawText(option.rect, Qt::AlignVCenter | Qt::AlignLeft, name); f = option.font; f.setWeight(QFont::DemiBold); p.setFont(f); p.drawText(option.rect, Qt::AlignVCenter | Qt::AlignRight, desc); p.restore(); }

यहां सब कुछ बेहद सरल है। हमें टेक्स्ट स्टब मिलता है, इसे ऊंचाई और बाएं किनारे में संरेखण के साथ प्रदर्शित करें। तत्वों की संख्या और अन्य जानकारी वाले विवरण को दाईं ओर संरेखित किया गया है।

एक तत्व शरीर खींचना

 void QvObjectDelegate::paintObject(QPainter * painter, const QStyleOptionViewItem & option, const QModelIndex & index ) const { QRect tr; QString name = index.data(Qt::DisplayRole).toString(), description = index.data(QvObjectModel::DescriptionRole).toString(); QPainter &p = *painter; p.setClipRect(option.rect); p.setPen(QColor(210, 210, 210)); p.setBrush(QColor(240, 240, 240)); p.setPen(QColor(77, 77, 77)); p.translate(option.rect.topLeft()); p.translate(0, sizeHint(option, index).height() - ITEM_HEIGHT); p.translate(OFFSET_H, OFFSET_H); QImage img = index.data(Qt::DecorationRole).value<QImage>(); if(!img.isNull()) { p.drawImage(0,0, img); } else { p.drawImage(0,0, defaultIcon_); } p.translate(ICON_SIZE + OFFSET_H, 0); //     10px //   QFont f = option.font; f.setPointSize(10); f.setWeight(QFont::Bold); QFontMetrics fm(f); tr = fm.boundingRect(name); p.setFont(f); p.drawText(0, tr.height()-5, name); //   p.setFont(option.font); fm = QFontMetrics(option.font); QDate date_ = index.data(QvObjectModel::DateRole).toDate(); int version_ = index.data(QvObjectModel::VersionRole).toInt(); QString versionStr_; if(!date_.isNull()) { versionStr_ = date_.toString("dd MMMM yyyy"); } else if(version_ > 1000000000){ int ver_min = 0; int ver = version_ / 1000000000; ver_min = version_ % 1000000000; int major = ver_min / 10000000; ver_min = ver_min % 10000000; int minor = ver_min / 100000; ver_min = ver_min % 100000; versionStr_ = QCoreApplication::translate("list", "%1.%2.%3.%4", "Version in list") .arg(ver).arg(major, 2, 10, QLatin1Char('0') ) .arg(minor, 2, 10, QLatin1Char('0')).arg(ver_min); } if(!versionStr_.isEmpty()) { tr = fm.boundingRect(versionStr_); tr.moveTo(option.rect.width() - ICON_SIZE - 2*OFFSET_H - tr.width() - OFFSET_BUTTON, 0 ); painter->drawText(tr, Qt::TextSingleLine, versionStr_); } int maxWidth(option.rect.width() - widthButtonGroup(index) - ICON_SIZE - OFFSET_H - DETAIL_OFFSET ); if(!index.data(QvObjectModel::DetailRole).toString().isEmpty()) { maxWidth -= fm.boundingRect(QCoreApplication::translate("list", "Detail")).width(); } description = fm.elidedText(description, Qt::ElideRight, maxWidth); p.translate(0, ICON_SIZE / 2); tr = fm.boundingRect(description); p.drawText(0, tr.height(), description); if(!index.data(QvObjectModel::DetailRole).toString().isEmpty()) { paintDetail(painter, option, index); } if(index.flags().testFlag(Qt::ItemFlag(QvAbstractListItem::Downloading))) { paintObjectProgress(painter, option, index); } paintObjectBtn(painter, option, index); }

शुरू करने के लिए, हम ड्राइंग क्षेत्र को सीमित करेंगे और क्लिपिंग सेट करेंगे ताकि गलती से हमारे पड़ोसियों पर चढ़ाई न करें।
दूसरा चरण एक बिंदु के सापेक्ष बढ़ रहा है, जिसमें हम सामग्री प्रदर्शित करेंगे:

  p.translate(option.rect.topLeft()); p.translate(0, sizeHint(option, index).height() - ITEM_HEIGHT); p.translate(OFFSET_H, OFFSET_H);

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

ड्राइंग बटन और लोडिंग बार

चूंकि हम चाहते हैं कि नियंत्रण प्रणाली की तरह ही दिखे, इसलिए हम एप्लिकेशन में शैली सेट और रेंडरिंग के लिए प्रदान की गई प्राथमिकताओं का उपयोग करेंगे।
चलिए डाउनलोड इंडिकेटर से शुरू करते हैं:

 void QvObjectDelegate::paintObjectProgress( QPainter * painter, const QStyleOptionViewItem & option, const QModelIndex & index ) const { QStyleOptionProgressBarV2 opt; initStyleProgressOption(&opt, index); QStyle *style = QApplication::style(); opt.rect.setLeft(option.rect.width() - (CHECK_WIDTH + OFFSET_H) * 2 - ICON_SIZE - OFFSET_BUTTON - buttonRect.width() - OFFSET_BUTTON ); opt.rect.setTop( 4 ); opt.rect.setWidth(CHECK_WIDTH * 2); opt.rect.setHeight(PROGRESS_HEIGHT); painter->setPen(QColor(77, 77, 77)); style->drawControl(QStyle::CE_ProgressBar, &opt, painter); } void QvObjectDelegate::initStyleProgressOption( QStyleOptionProgressBar *option, const QModelIndex & index ) const { int value = index.data(QvObjectModel::ProgressRole).toInt(); if (!option) return; option->rect = QRect(100, 100, 100, 100); option->state |= QStyle::State_Active; option->state |= QStyle::State_Enabled; option->state |= QStyle::State_Horizontal; option->minimum = 0; option->maximum = 100; //maximum?maximum:100; option->progress = value; option->textAlignment = Qt::AlignCenter; option->textVisible = true; option->text = QString("%1%").arg(value); if (QStyleOptionProgressBarV2 *optionV2 = qstyleoption_cast<QStyleOptionProgressBarV2 *>(option)) { optionV2->orientation = Qt::Horizontal ; // ### Qt 5: use State_Horizontal instead optionV2->invertedAppearance = false; optionV2->bottomToTop = true; } }

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

  style->drawControl(QStyle::CE_ProgressBar, &opt, painter);

सूचक के बाद, बटन पर आगे बढ़ें।
प्रत्येक सूची आइटम विभिन्न राज्यों में हो सकता है, जिसके आधार पर यह विभिन्न वैध संचालन प्रदान कर सकता है। सबसे पहले, हम उन कार्यों की एक सूची बनाएंगे जिन्हें हम कर सकते हैं:

  QVector<QvObjectDelegate::ButtonAction> QvObjectDelegate::getButtons( const QModelIndex &index ) const { QVector<ButtonAction> tags_; if(needRestart(index) ) { tags_ << baRestart << baCancel; } else if( index.flags() & Qt::ItemFlag(QvAbstractListItem::Downloading) ) { tags_ << baCancel; } else { bool installed = index.data(QvObjectModel::InstalledRole).toBool(), enabled = index.data(QvObjectModel::EnabledRole).toBool(), buildin = index.data(QvObjectModel::BuildInRole).toBool(); if (installed && (index.flags() & Qt::ItemFlag(QvAbstractListItem::hasUpdate))) { tags_ << baUpdate;} if (installed && index.flags() & Qt::ItemFlag(QvAbstractListItem::canBeToggled)) { tags_ << (enabled ? baDisable : baEnable);} if (installed && !buildin) { tags_ << baRemove;} if (!installed) { tags_ << baInstall; } } return tags_; }

हम QStyleOptionButton संरचना में भरेंगे और कार्रवाई सूची से प्रत्येक तत्व के लिए हम बटन खींचेंगे:

 void QvObjectDelegate::drawButton( QStyleOptionButton &o, const QPoint &p, QPainter * painter ) const { if(o.rect.contains(p)) o.state |= QStyle::State_Sunken; QStyle * style = QApplication::style(); if(style) style->drawControl(QStyle::CE_PushButton, &o, painter ); o.state &= ~QStyle::State_Sunken; o.rect.translate(buttonRect.width() + OFFSET_BUTTON, 0); }

और अंत में, यदि आवश्यक हो, तो एक सूचना संदेश प्रदर्शित करें।

इस पर निष्कर्ष निकाला गया है, लेकिन इसका अर्थ यह है कि अगर हमारे तैयार किए गए बटन को दबाया नहीं गया। इसलिए, हम अगले भाग पर जाते हैं, माउस क्लिक की प्रक्रिया।

प्रसंस्करण पर क्लिक करें

हमारे दृश्य के तत्वों पर क्लिक करने की सभी घटनाएँ विधि पर आती हैं:

 bool editorEvent( QEvent *event, QAbstractItemModel *model, const QStyleOptionViewItem &option, const QModelIndex &index );

हम इसे फिर से परिभाषित करेंगे:

  Q_ASSERT(event); Q_ASSERT(model); // make sure that we have the right event type if ((event->type() == QEvent::MouseButtonRelease) || (event->type() == QEvent::MouseMove) || (event->type() == QEvent::MouseButtonPress)) { return validateLabel(index, option, event) || validateButton(index, option, event); } else if (event->type() == QEvent::KeyPress) { if (static_cast<QKeyEvent*>(event)->key() != Qt::Key_Space && static_cast<QKeyEvent*>(event)->key() != Qt::Key_Select) return false; } else { return false; } return false;

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

दृश्य बनाएँ

हम अपने पेड़ की संरचना का प्रतिनिधित्व करने के लिए QTreeView का उपयोग करेंगे। इसलिए, जैसा कि हमें इंडेंट की आवश्यकता नहीं है, कंस्ट्रक्टर में उचित पैरामीटर सेट करें। मुख्य संचालन मॉडल की स्थापना के दौरान होगा, जहां हम प्रतिनिधि संकेतों और मॉडल स्लॉट के बीच संबंध स्थापित करते हैं।

परिणामस्वरूप, मॉडल, डेलिगेट, और सभी कनेक्शनों को कॉन्फ़िगर करने के बाद, हमें एला फ़ायरफ़ॉक्स के तत्वों की एक सूची मिलती है।

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

रचनात्मक आलोचना और टिप्पणियों का स्वागत है।
स्रोत: ajieks.ru/download/file_list.zip

अस्वीकरण
दिए गए उदाहरण एक तैयार किए गए घटक का ढोंग नहीं करते हैं, यह सूचना के प्रयोजनों के लिए प्रस्तुत किया जाता है और उपयोग किए जाने पर अनुकूलन की आवश्यकता होती है। एक काम के मसौदे से लिया गया, जहां यह अपने कार्यों को पूरी तरह से पूरा करता है।

एक सूची अला फायरफॉक्स बनाने के उदाहरण के रूप में मॉडल और प्रतिनिधियों के साथ काम करना