|
|
|
[5] ادراة المخططات في Qt4 |
|
Layout management in Qt4
فى هذه الجزئية سنتعرض لإدارة المخططات.
اى تطبيق يشمل بعض الويدجتس، وتوضع هذه الويدجتس داخل مخطط.يجب على المبرمج ادارتها، مع Qt لدينا خيارين
1- التحديد المطلق
2-استخدام المخططات (الصناديق)
Absolute Positioning
يها المبرمج يقوم بتحديد المركز وحجم كل ويدجت بالبكسلز، عند استخدامك للتحديد المطلق يجب ان تعلم عدة اشياء:
عند اعادة تحجيم النافذة ، فلايتم تغيير حجم او مركز الويدجت
االتطبيق قد يختلف شكله على المنصات المختلفة
تغيير الخطوط له تأثير على المخطط
اذا قررت تغيير المخطط، فإنك ستحتاج الى اعادة تنظيمه من اول وجديد
هناك بعض الأحيان ربما تريد استخدام التحديد المطلق، كهذه الشروحات حتى لاأصعبها على القارئ، لذا استخدمها عن شرح موضوع معين ولكن للبرامج الحقيقية استخدم المخططات
absolute.cpp
#include <QApplication> #include <QDesktopWidget> #include <QTextEdit> { public: }; Absolute ::Absolute(QWidget *parent ){ edit->setGeometry(5, 5, 200, 150); } int main(int argc, char *argv[]) { Absolute window; window.setWindowTitle("Absolute"); window.show(); return app.exec(); } edit->setGeometry(5, 5, 200, 150);
|
ننشئ كائن من الصف QtextEdit ونحدد مكانه يدويا (نموضعه) بإستخدام الطريقة setGeometry وهى تقوم بشيئين، تموضع الويدجت وتحجمه

Figure: before resizement
Figure: after resizement
QVBoxLayout
QVBoxLayout هو مدير المخططات الأول اللذى سنذكره، وهو يقوم بإضافة الويدجتس رأسيا
verticalbox.h #ifndef VERTICALBOX_H #define VERTICALBOX_H #include <QWidget> { public: }; #endif
|
The header file.
verticalbox.cpp
#include "verticalbox.h" #include <QVBoxLayout> #include <QPushButton> VerticalBox ::VerticalBox(QWidget *parent ){ vbox->setSpacing(1); vbox->addWidget(settings); vbox->addWidget(accounts); vbox->addWidget(loans); vbox->addWidget(cash); vbox->addWidget(debts); setLayout(vbox); }
|
فى هذا المثال لدينا مدير مخطط رأسى ونضع فيه 5 ازرار، ونجعلهم قابلين للتمدد فى الإتجاهين
ننشئ مخطط رأسى ونحدد المساحة بين الأبناء (الويدجتس المضافة)
ننشئ زر ونحدد قاعدة لزيادة المساحة بإستخدام setSizePolicy
vbox->addWidget(settings); vbox->addWidget(accounts); vbox->addWidget(loans); vbox->addWidget(cash); vbox->addWidget(debts);
|
نضيف الأبناء بإستخدام addWidget
نجعل المخطط الرأسى هو المخطط المستخدم الرئيسى
main.cpp
#include "verticalbox.h" #include <QDesktopWidget> #include <QApplication> { int x, y; int screenWidth; int screenHeight; int WIDTH = 200; int HEIGHT = 250; screenWidth = desktop->width(); screenHeight = desktop->height(); x = (screenWidth - WIDTH) / 2; y = (screenHeight - HEIGHT) / 2; widget.setGeometry(x, y, WIDTH, HEIGHT); } int main(int argc, char *argv[]) { VerticalBox window; window.setWindowTitle("VerticalBox"); window.show(); center(window); return app.exec(); }
|
Main file.
Figure: QVBoxLayout
Buttons
فى هذا المثال ننشئ زر ونضعهم فى اسفل يمين الويدجت
buttons.h
#ifndef BUTTONS_H #define BUTTONS_H #include <QWidget> #include <QPushButton> { public: private: }; #endif
|
ملف رأسى
buttons.cpp
#include "buttons.h" #include <QVBoxLayout> #include <QHBoxLayout> { hbox->addWidget(ok, 1, Qt::AlignRight); hbox->addWidget(apply, 0, Qt::AlignRight); vbox->addStretch(1); vbox->addLayout(hbox); }
|
لنجعل الزرين فى اسفل اليمين
ننشئ مخططين احدهما رأسى والآخر افقى(لنضع فيه الزرين)
);
ننشئ الزرين
hbox->addWidget(ok, 1, Qt::AlignRight); hbox->addWidget(apply, 0, Qt::AlignRight);
|
نضع الزرين فى المخطط الأفقى بإستخدام الطريقة addWidget ونجعلها محاذين لليمين
المعامل الأول هو الزر والمعامل الثانى هو معامل الزيادة والأخير هو الإزاحة
vbox->addStretch(1); vbox->addLayout(hbox);
|
نضع مساحة فارغة قابلة للزيادة فى المخطط الرأسي بإستخدام addStretch ونضيف المخطط الأفقى الى المخطط الرأسى بإستخدام الطريقة addLayout
main.cpp
#include "buttons.h" #include <QDesktopWidget> #include <QApplication> { int x, y; int screenWidth; int screenHeight; int WIDTH = 290; int HEIGHT = 170; screenWidth = desktop->width(); screenHeight = desktop->height(); x = (screenWidth - WIDTH) / 2; y = (screenHeight - HEIGHT) / 2; widget.setGeometry(x, y, WIDTH, HEIGHT); } int main(int argc, char *argv[]) { Buttons window; window.setWindowTitle("Buttons"); window.show(); center(window); return app.exec(); }
|
الملف الرئيسى main

Figure: Buttons
Layouts
الفكرة من المثال التالى هو امكانية دمج اكثر من مخطط لإنشاء واجهة معقدة
layouts.h
#ifndef LAYOUTS_H #define LAYOUTS_H #include <QWidget> { public: }; #endif
|
ملف رأسى
border.cpp
#include "layouts.h" #include <QVBoxLayout> #include <QPushButton> #include <QListWidget> { // must add it to another layout. lw->addItem("The Omen"); lw->addItem("The Exorcist"); lw->addItem("Notes on a scandal"); lw->addItem("Fargo"); lw->addItem("Capote"); vbox->setSpacing(3); vbox->addStretch(1); vbox->addWidget(add); vbox->addWidget(rename); vbox->addWidget(remove); vbox->addWidget(removeall); vbox->addStretch(1); hbox->addWidget(lw); hbox->addSpacing(15); hbox->addLayout(vbox); setLayout(hbox); }
|
فى هذا المثال، ننشئ نافذة مكونة من 4 ازرار وقائمة، الأزرار مجمعة فى عمود رأسى وموضوعة في يمين القائمة.
عند اعادة تحجيم النافذة، يتم اعادة تحجيم القائمة ايضا
المخطط الرأسى سيكون العمود للأزرار
المخطط الأفقى سيكون المخطط للويدجات
lw->addItem("The Omen"); lw->addItem("The Exorcist"); lw->addItem("Notes on a scandal"); lw->addItem("Fargo"); lw->addItem("Capote");
|
هنا ننشئ القائمة
ننشئ ال 4 ازرار
vbox->setSpacing(3); vbox->addStretch(1); vbox->addWidget(add); vbox->addWidget(rename); vbox->addWidget(remove); vbox->addWidget(removeall); vbox->addStretch(1);
|
الصندوق الرأسى يشمل 4 ازرار، نضع بينهم مسافة. لاحظ وجود معامل تمدد فى الأعلى والأسفل. بهذه الطريقة ستكون الأزرار فى المنتصف رأسيا
hbox->addWidget(lw); hbox->addSpacing(15); hbox->addLayout(vbox);
|
القائمة والصندوق الرأسى موضوعين فى المخطط الأفقى
لاحظ الطريقة addLayout تستخدم لإضافة مخطط لآخر
setLayout(hbox);
نحدد المخطط الأساسى المستخدم
main.cpp
#include "layouts.h" #include <QDesktopWidget> #include <QApplication> { int x, y; int screenWidth; int screenHeight; int width, height; width = widget.frameGeometry().width(); height = widget.frameGeometry().height(); screenWidth = desktop->width(); screenHeight = desktop->height(); x = (screenWidth - width) / 2; y = (screenHeight - height) / 2; widget.move( x, y ); } int main(int argc, char *argv[]) { Layouts window; window.setWindowTitle("Layouts"); window.show(); center(window); return app.exec(); }
|
ملف رئيسى

Figure: Layouts
QGridLayout
مخطط الشبكة، يضع الويدجات فى شبكة. هو مخطط مركب يجب على كل مبرمج بqt4 ان يتأقلم معه
calculator.h
#ifndef CALCULATOR_H #define CALCULATOR_H #include <QWidget> #include <QPushButton> { public: }; #endif
|
ملف رأسى
calculator.cpp
#include "calculator.h" #include <QGridLayout> Calculator ::Calculator(QWidget *parent ){ grid->setSpacing(2); char *values[16] = { "7", "8", "9", "/", "4", "5", "6", "*", "1", "2", "3", "-", "0", ".", "=", "+" }; int pos = 0; for (int i=0; i<4; i++) { for (int j=0; j<4; j++) { btn->setFixedSize(40, 40); grid->addWidget(btn, i, j); pos++; } } setLayout(grid); }
|
ننشئ هيكل تطبيق لآلة حاسبة
ننشئ مخطط الشبكة ونحدد البعد بين الويدجات ل 2
char *values[16] = { "7", "8", "9", "/", "4", "5", "6", "*", "1", "2", "3", "-", "0", ".", "=", "+" };
|
هذه هى كل ماستعرضه الآلة (الأرقام والعمليات الحسابية) for (int i=0; i<4; i++) { for (int j=0; j<4; j++) { btn->setFixedSize(40, 40); grid->addWidget(btn, i, j); pos++; } }
|
نضع 16 ويدجت فى الشبكة، كل منها له حجم محدد
main.cpp
#include "calculator.h" #include <QDesktopWidget> #include <QApplication> { int x, y; int screenWidth; int screenHeight; int width, height; width = widget.frameGeometry().width(); height = widget.frameGeometry().height(); screenWidth = desktop->width(); screenHeight = desktop->height(); x = (screenWidth - width) / 2; y = (screenHeight - height) / 2; widget.move( x, y ); } int main(int argc, char *argv[]) { Calculator window; window.setWindowTitle("Calculator"); window.show(); center(window); return app.exec(); }
|
ملف رئيسى

Figure: QGridLayout
Karenina
فى هذه المثال الأخير ننشئ تطبيق معقد بعض الشئ
karenina.h
#ifndef KARENINA_H #define KARENINA_H #include <QWidget> { public: }; #endif
|
ملف رأسى.
karenina.cpp #include "karenina.h" #include <QGridLayout> #include <QLabel> #include <QLineEdit> #include <QTextEdit> Karenina ::Karenina(QWidget *parent ){ grid->setSpacing(20); grid->addWidget(title, 0, 0, 1, 1); grid->addWidget(edt1, 0, 1, 1, 1); grid->addWidget(author, 1, 0, 1, 1); grid->addWidget(edt2, 1, 1, 1, 1); grid->addWidget(review, 2, 0, 1, 1); grid->addWidget(te, 2, 1, 3, 1); setLayout(grid); }
|
ينشئ نافذة تدخل فيها العنوان و الكاتب والنقد
ننشئ شبكة مع بعض الأزاحة
grid->addWidget(title, 0, 0, 1, 1);
|
هذه السطور تنشئ label وتضعه فى الشبكة
الطريقة addWidget لديها 5 معاملات
1- هو الإبن (الويدجت)
2، 3- الصف والعمود
4- rowspan
5- colspan
لتحددا حجم التمدد فى الخلايا
main.cpp
#include "karenina.h" #include <QDesktopWidget> #include <QApplication> { int x, y; int screenWidth; int screenHeight; int width, height; width = widget.frameGeometry().width(); height = widget.frameGeometry().height(); screenWidth = desktop->width(); screenHeight = desktop->height(); x = (screenWidth - width) / 2; y = (screenHeight - height) / 2; widget.move( x, y ); } int main(int argc, char *argv[]) { Karenina window; window.setWindowTitle("Anna Karenina"); window.show(); center(window); return app.exec(); }
|
Main file.
Figure: Karenina

| إسم الكاتب |
تاريخ الإضافة |
التقييم / المقيمين |
زيارات الدرس |
| StrikerX |
05/01/2009 |
0 / 0 |
673 |
|
|
|
|