>> الصفحة الرئيسية >> مقالات ZetCode >> [5] ادراة المخططات في Qt4

الأقسام الرئيسية

 التنصيب والاعداد التنصيب والاعداد
 دروس متقدمة دروس متقدمة
 سلسلة دروس للمبتدئين سلسلة دروس للمبتدئين
 اساسيات لغة سي++ اساسيات لغة سي++
 مقالات ZetCode مقالات ZetCode
 

جديد الدروس

 الوحدة QtUiTools (واجهة المستخدم ديناميكية التوليد)
التاريخ 04/07/2009 الوحدة QtUiTools (واجهة المستخدم ديناميكية التوليد)
 Qt and Phonon
التاريخ 04/07/2009 Qt and Phonon
 تتمة الرسائل ومربعات الحوار في qt
التاريخ 04/07/2009 تتمة الرسائل ومربعات الحوار في qt
 مدخل الى xml في Qt
التاريخ 04/07/2009 مدخل الى xml في Qt
 الإدخال والإخراج لبيانات الفئات
التاريخ 04/07/2009 الإدخال والإخراج لبيانات الفئات
 

[5] ادراة المخططات في Qt4

Layout management in Qt4

فى هذه الجزئية سنتعرض لإدارة المخططات.
اى تطبيق يشمل بعض الويدجتس، وتوضع هذه الويدجتس داخل مخطط.يجب على المبرمج ادارتها، مع Qt لدينا خيارين
1- التحديد المطلق
2-استخدام المخططات (الصناديق)
Absolute Positioning
يها المبرمج يقوم بتحديد المركز وحجم كل ويدجت بالبكسلز، عند استخدامك للتحديد المطلق يجب ان تعلم عدة اشياء:
عند اعادة تحجيم النافذة ، فلايتم تغيير حجم او مركز الويدجت
االتطبيق قد يختلف شكله على المنصات المختلفة
تغيير الخطوط له تأثير على المخطط
اذا قررت تغيير المخطط، فإنك ستحتاج الى اعادة تنظيمه من اول وجديد
هناك بعض الأحيان ربما تريد استخدام التحديد المطلق، كهذه الشروحات حتى لاأصعبها على القارئ، لذا استخدمها عن شرح موضوع معين ولكن للبرامج الحقيقية استخدم المخططات

absolute.cpp

  1. #include <QApplication>
  2. #include <QDesktopWidget>
  3. #include <QTextEdit>
  4.  
  5.  
  6. class Absolute : public QWidget
  7. {
  8. public:
  9. Absolute(QWidget *parent = 0);
  10. };
  11.  
  12.  
  13. Absolute::Absolute(QWidget *parent)
  14. : QWidget(parent)
  15. {
  16. QTextEdit *edit = new QTextEdit(this);
  17. edit->setGeometry(5, 5, 200, 150);
  18. }
  19.  
  20.  
  21. int main(int argc, char *argv[])
  22. {
  23. QApplication app(argc, argv);
  24.  
  25. Absolute window;
  26.  
  27. window.setWindowTitle("Absolute");
  28. window.show();
  29.  
  30. return app.exec();
  31. }
  32. QTextEdit *edit = new QTextEdit(this);
  33. edit->setGeometry(5, 5, 200, 150);

ننشئ كائن من الصف QtextEdit ونحدد مكانه يدويا (نموضعه) بإستخدام الطريقة setGeometry وهى تقوم بشيئين، تموضع الويدجت وتحجمه


Figure: before resizement


Figure: after resizement
QVBoxLayout
QVBoxLayout هو مدير المخططات الأول اللذى سنذكره، وهو يقوم بإضافة الويدجتس رأسيا
  1. verticalbox.h
  2.  
  3. #ifndef VERTICALBOX_H
  4. #define VERTICALBOX_H
  5.  
  6. #include <QWidget>
  7.  
  8. class VerticalBox : public QWidget
  9. {
  10. public:
  11. VerticalBox(QWidget *parent = 0);
  12.  
  13. };
  14.  
  15. #endif
  16.  

The header file.
verticalbox.cpp
  1.  
  2. #include "verticalbox.h"
  3. #include <QVBoxLayout>
  4. #include <QPushButton>
  5.  
  6. VerticalBox::VerticalBox(QWidget *parent)
  7. : QWidget(parent)
  8. {
  9.  
  10. QVBoxLayout *vbox = new QVBoxLayout(this);
  11. vbox->setSpacing(1);
  12.  
  13. QPushButton *settings = new QPushButton("Settings", this);
  14. settings->setSizePolicy(QSizePolicy::Expanding,
  15. QSizePolicy::Expanding);
  16. QPushButton *accounts = new QPushButton("Accounts", this);
  17. accounts->setSizePolicy(QSizePolicy::Expanding,
  18. QSizePolicy::Expanding);
  19. QPushButton *loans = new QPushButton("Loans", this);
  20. loans->setSizePolicy(QSizePolicy::Expanding,
  21. QSizePolicy::Expanding);
  22. QPushButton *cash = new QPushButton("Cash", this);
  23. cash->setSizePolicy(QSizePolicy::Expanding,
  24. QSizePolicy::Expanding);
  25. QPushButton *debts = new QPushButton("Debts", this);
  26. debts->setSizePolicy(QSizePolicy::Expanding,
  27. QSizePolicy::Expanding);
  28.  
  29. vbox->addWidget(settings);
  30. vbox->addWidget(accounts);
  31. vbox->addWidget(loans);
  32. vbox->addWidget(cash);
  33. vbox->addWidget(debts);
  34.  
  35. setLayout(vbox);
  36. }

فى هذا المثال لدينا مدير مخطط رأسى ونضع فيه 5 ازرار، ونجعلهم قابلين للتمدد فى الإتجاهين
  1.  
  2. QVBoxLayout *vbox = new QVBoxLayout(this);
  3. vbox->setSpacing(1);

ننشئ مخطط رأسى ونحدد المساحة بين الأبناء (الويدجتس المضافة)
  1. QPushButton *settings = new QPushButton("Settings", this);
  2. settings->setSizePolicy(QSizePolicy::Expanding,
  3. QSizePolicy::Expanding);

ننشئ زر ونحدد قاعدة لزيادة المساحة بإستخدام setSizePolicy
  1. vbox->addWidget(settings);
  2. vbox->addWidget(accounts);
  3. vbox->addWidget(loans);
  4. vbox->addWidget(cash);
  5. vbox->addWidget(debts);


نضيف الأبناء بإستخدام addWidget
  1. setLayout(vbox);

نجعل المخطط الرأسى هو المخطط المستخدم الرئيسى
main.cpp
  1.  
  2. #include "verticalbox.h"
  3. #include <QDesktopWidget>
  4. #include <QApplication>
  5.  
  6. void center(QWidget &widget)
  7. {
  8. int x, y;
  9. int screenWidth;
  10. int screenHeight;
  11.  
  12. int WIDTH = 200;
  13. int HEIGHT = 250;
  14.  
  15. QDesktopWidget *desktop = QApplication::desktop();
  16.  
  17. screenWidth = desktop->width();
  18. screenHeight = desktop->height();
  19.  
  20. x = (screenWidth - WIDTH) / 2;
  21. y = (screenHeight - HEIGHT) / 2;
  22.  
  23. widget.setGeometry(x, y, WIDTH, HEIGHT);
  24. }
  25.  
  26.  
  27. int main(int argc, char *argv[])
  28. {
  29. QApplication app(argc, argv);
  30.  
  31. VerticalBox window;
  32.  
  33. window.setWindowTitle("VerticalBox");
  34. window.show();
  35. center(window);
  36.  
  37. return app.exec();
  38. }
  39.  

Main file.


Figure: QVBoxLayout
Buttons
فى هذا المثال ننشئ زر ونضعهم فى اسفل يمين الويدجت
buttons.h
  1.  
  2. #ifndef BUTTONS_H
  3. #define BUTTONS_H
  4.  
  5. #include <QWidget>
  6. #include <QPushButton>
  7.  
  8. class Buttons : public QWidget
  9. {
  10. public:
  11. Buttons(QWidget *parent = 0);
  12.  
  13. private:
  14. QPushButton *apply;
  15.  
  16. };
  17.  
  18. #endif

ملف رأسى
buttons.cpp
  1.  
  2. #include "buttons.h"
  3. #include <QVBoxLayout>
  4. #include <QHBoxLayout>
  5.  
  6.  
  7. Buttons::Buttons(QWidget *parent)
  8. : QWidget(parent)
  9. {
  10.  
  11. QVBoxLayout *vbox = new QVBoxLayout(this);
  12. QHBoxLayout *hbox = new QHBoxLayout();
  13.  
  14. ok = new QPushButton("OK", this);
  15. apply = new QPushButton("Apply", this);
  16.  
  17. hbox->addWidget(ok, 1, Qt::AlignRight);
  18. hbox->addWidget(apply, 0, Qt::AlignRight);
  19.  
  20. vbox->addStretch(1);
  21. vbox->addLayout(hbox);
  22.  
  23. }

لنجعل الزرين فى اسفل اليمين
  1. QVBoxLayout *vbox = new QVBoxLayout(this);
  2. QHBoxLayout *hbox = new QHBoxLayout();

ننشئ مخططين احدهما رأسى والآخر افقى(لنضع فيه الزرين)
  1. ok = new QPushButton("OK", this);
  2. apply = new QPushButton("Apply", this
);
ننشئ الزرين
  1. hbox->addWidget(ok, 1, Qt::AlignRight);
  2. hbox->addWidget(apply, 0, Qt::AlignRight);

نضع الزرين فى المخطط الأفقى بإستخدام الطريقة addWidget ونجعلها محاذين لليمين
المعامل الأول هو الزر والمعامل الثانى هو معامل الزيادة والأخير هو الإزاحة
  1.  
  2. vbox->addStretch(1);
  3. vbox->addLayout(hbox);

نضع مساحة فارغة قابلة للزيادة فى المخطط الرأسي بإستخدام addStretch ونضيف المخطط الأفقى الى المخطط الرأسى بإستخدام الطريقة addLayout

main.cpp
  1.  
  2. #include "buttons.h"
  3. #include <QDesktopWidget>
  4. #include <QApplication>
  5.  
  6. void center(QWidget &widget)
  7. {
  8. int x, y;
  9. int screenWidth;
  10. int screenHeight;
  11.  
  12. int WIDTH = 290;
  13. int HEIGHT = 170;
  14.  
  15. QDesktopWidget *desktop = QApplication::desktop();
  16.  
  17. screenWidth = desktop->width();
  18. screenHeight = desktop->height();
  19.  
  20. x = (screenWidth - WIDTH) / 2;
  21. y = (screenHeight - HEIGHT) / 2;
  22.  
  23. widget.setGeometry(x, y, WIDTH, HEIGHT);
  24.  
  25. }
  26.  
  27.  
  28. int main(int argc, char *argv[])
  29. {
  30. QApplication app(argc, argv);
  31.  
  32. Buttons window;
  33.  
  34. window.setWindowTitle("Buttons");
  35. window.show();
  36. center(window);
  37.  
  38. return app.exec();
  39. }


الملف الرئيسى main


Figure: Buttons
Layouts
الفكرة من المثال التالى هو امكانية دمج اكثر من مخطط لإنشاء واجهة معقدة
layouts.h
  1.  
  2. #ifndef LAYOUTS_H
  3. #define LAYOUTS_H
  4.  
  5. #include <QWidget>
  6.  
  7. class Layouts : public QWidget
  8. {
  9. public:
  10. Layouts(QWidget *parent = 0);
  11.  
  12. };
  13.  
  14. #endif

ملف رأسى
border.cpp
  1.  
  2. #include "layouts.h"
  3. #include <QVBoxLayout>
  4. #include <QPushButton>
  5. #include <QListWidget>
  6.  
  7. Layouts::Layouts(QWidget *parent)
  8. : QWidget(parent)
  9. {
  10.  
  11. QVBoxLayout *vbox = new QVBoxLayout();
  12.  
  13. // must add it to another layout.
  14. QHBoxLayout *hbox = new QHBoxLayout(this);
  15.  
  16. QListWidget *lw = new QListWidget(this);
  17. lw->addItem("The Omen");
  18. lw->addItem("The Exorcist");
  19. lw->addItem("Notes on a scandal");
  20. lw->addItem("Fargo");
  21. lw->addItem("Capote");
  22.  
  23. QPushButton *add = new QPushButton("Add", this);
  24. QPushButton *rename = new QPushButton("Rename", this);
  25. QPushButton *remove = new QPushButton("Remove", this);
  26. QPushButton *removeall = new QPushButton("Remove All", this);
  27.  
  28. vbox->setSpacing(3);
  29. vbox->addStretch(1);
  30. vbox->addWidget(add);
  31. vbox->addWidget(rename);
  32. vbox->addWidget(remove);
  33. vbox->addWidget(removeall);
  34. vbox->addStretch(1);
  35.  
  36. hbox->addWidget(lw);
  37. hbox->addSpacing(15);
  38. hbox->addLayout(vbox);
  39.  
  40. setLayout(hbox);
  41. }

فى هذا المثال، ننشئ نافذة مكونة من 4 ازرار وقائمة، الأزرار مجمعة فى عمود رأسى وموضوعة في يمين القائمة.
عند اعادة تحجيم النافذة، يتم اعادة تحجيم القائمة ايضا
  1.  
  2. QVBoxLayout *vbox = new QVBoxLayout();

المخطط الرأسى سيكون العمود للأزرار
  1. QHBoxLayout *hbox = new QHBoxLayout(this);

المخطط الأفقى سيكون المخطط للويدجات
  1. QListWidget *lw = new QListWidget(this);
  2. lw->addItem("The Omen");
  3. lw->addItem("The Exorcist");
  4. lw->addItem("Notes on a scandal");
  5. lw->addItem("Fargo");
  6. lw->addItem("Capote");

هنا ننشئ القائمة
  1.  
  2. QPushButton *add = new QPushButton("Add", this);
  3. QPushButton *rename = new QPushButton("Rename", this);
  4. QPushButton *remove = new QPushButton("Remove", this);
  5. QPushButton *removeall = new QPushButton("Remove All", this);

ننشئ ال 4 ازرار
  1. vbox->setSpacing(3);
  2. vbox->addStretch(1);
  3. vbox->addWidget(add);
  4. vbox->addWidget(rename);
  5. vbox->addWidget(remove);
  6. vbox->addWidget(removeall);
  7. vbox->addStretch(1);

الصندوق الرأسى يشمل 4 ازرار، نضع بينهم مسافة. لاحظ وجود معامل تمدد فى الأعلى والأسفل. بهذه الطريقة ستكون الأزرار فى المنتصف رأسيا
  1. hbox->addWidget(lw);
  2. hbox->addSpacing(15);
  3. hbox->addLayout(vbox);

القائمة والصندوق الرأسى موضوعين فى المخطط الأفقى
لاحظ الطريقة addLayout تستخدم لإضافة مخطط لآخر
setLayout(hbox);
نحدد المخطط الأساسى المستخدم
main.cpp
  1.  
  2. #include "layouts.h"
  3. #include <QDesktopWidget>
  4. #include <QApplication>
  5.  
  6. void center(QWidget &widget)
  7. {
  8. int x, y;
  9. int screenWidth;
  10. int screenHeight;
  11. int width, height;
  12. QSize windowSize;
  13.  
  14. QDesktopWidget *desktop = QApplication::desktop();
  15.  
  16. width = widget.frameGeometry().width();
  17. height = widget.frameGeometry().height();
  18.  
  19. screenWidth = desktop->width();
  20. screenHeight = desktop->height();
  21.  
  22. x = (screenWidth - width) / 2;
  23. y = (screenHeight - height) / 2;
  24.  
  25. widget.move( x, y );
  26. }
  27.  
  28.  
  29. int main(int argc, char *argv[])
  30. {
  31. QApplication app(argc, argv);
  32.  
  33. Layouts window;
  34.  
  35. window.setWindowTitle("Layouts");
  36. window.show();
  37. center(window);
  38.  
  39. return app.exec();
  40. }
  41.  
  42.  

ملف رئيسى

Figure: Layouts

QGridLayout
مخطط الشبكة، يضع الويدجات فى شبكة. هو مخطط مركب يجب على كل مبرمج بqt4 ان يتأقلم معه

calculator.h
  1.  
  2. #ifndef CALCULATOR_H
  3. #define CALCULATOR_H
  4.  
  5. #include <QWidget>
  6. #include <QPushButton>
  7.  
  8. class Calculator : public QWidget
  9. {
  10. public:
  11. Calculator(QWidget *parent = 0);
  12.  
  13. };
  14.  
  15. #endif

ملف رأسى
calculator.cpp
  1.  
  2. #include "calculator.h"
  3. #include <QGridLayout>
  4.  
  5.  
  6. Calculator::Calculator(QWidget *parent)
  7. : QWidget(parent)
  8. {
  9.  
  10. QGridLayout *grid = new QGridLayout(this);
  11. grid->setSpacing(2);
  12.  
  13. char *values[16] = { "7", "8", "9", "/",
  14. "4", "5", "6", "*",
  15. "1", "2", "3", "-",
  16. "0", ".", "=", "+"
  17. };
  18.  
  19. int pos = 0;
  20.  
  21. for (int i=0; i<4; i++) {
  22. for (int j=0; j<4; j++) {
  23. QPushButton *btn = new QPushButton(values[pos], this);
  24. btn->setFixedSize(40, 40);
  25. grid->addWidget(btn, i, j);
  26. pos++;
  27. }
  28. }
  29.  
  30. setLayout(grid);
  31.  
  32. }

ننشئ هيكل تطبيق لآلة حاسبة
  1. QGridLayout *grid = new QGridLayout(this);
  2. grid->setSpacing(2);

ننشئ مخطط الشبكة ونحدد البعد بين الويدجات ل 2
  1. char *values[16] = { "7", "8", "9", "/",
  2. "4", "5", "6", "*",
  3. "1", "2", "3", "-",
  4. "0", ".", "=", "+"
  5. };

هذه هى كل ماستعرضه الآلة (الأرقام والعمليات الحسابية)
  1.  
  2. for (int i=0; i<4; i++) {
  3. for (int j=0; j<4; j++) {
  4. QPushButton *btn = new QPushButton(values[pos], this);
  5. btn->setFixedSize(40, 40);
  6. grid->addWidget(btn, i, j);
  7. pos++;
  8. }
  9. }

نضع 16 ويدجت فى الشبكة، كل منها له حجم محدد
main.cpp

  1. #include "calculator.h"
  2. #include <QDesktopWidget>
  3. #include <QApplication>
  4.  
  5. void center(QWidget &widget)
  6. {
  7. int x, y;
  8. int screenWidth;
  9. int screenHeight;
  10. int width, height;
  11. QSize windowSize;
  12.  
  13. QDesktopWidget *desktop = QApplication::desktop();
  14.  
  15. width = widget.frameGeometry().width();
  16. height = widget.frameGeometry().height();
  17.  
  18. screenWidth = desktop->width();
  19. screenHeight = desktop->height();
  20.  
  21. x = (screenWidth - width) / 2;
  22. y = (screenHeight - height) / 2;
  23.  
  24. widget.move( x, y );
  25.  
  26. }
  27.  
  28. int main(int argc, char *argv[])
  29. {
  30. QApplication app(argc, argv);
  31.  
  32. Calculator window;
  33.  
  34. window.setWindowTitle("Calculator");
  35. window.show();
  36. center(window);
  37.  
  38. return app.exec();
  39. }

ملف رئيسى


Figure: QGridLayout


Karenina
فى هذه المثال الأخير ننشئ تطبيق معقد بعض الشئ
karenina.h
  1.  
  2. #ifndef KARENINA_H
  3. #define KARENINA_H
  4.  
  5. #include <QWidget>
  6.  
  7. class Karenina : public QWidget
  8. {
  9. public:
  10. Karenina(QWidget *parent = 0);
  11.  
  12. };
  13.  
  14. #endif

ملف رأسى.
  1. karenina.cpp
  2.  
  3. #include "karenina.h"
  4. #include <QGridLayout>
  5. #include <QLabel>
  6. #include <QLineEdit>
  7. #include <QTextEdit>
  8.  
  9.  
  10. Karenina::Karenina(QWidget *parent)
  11. : QWidget(parent)
  12. {
  13.  
  14. QGridLayout *grid = new QGridLayout(this);
  15. grid->setSpacing(20);
  16.  
  17. QLabel *title = new QLabel("Title", this);
  18. grid->addWidget(title, 0, 0, 1, 1);
  19.  
  20. QLineEdit *edt1 = new QLineEdit(this);
  21. grid->addWidget(edt1, 0, 1, 1, 1);
  22.  
  23. QLabel *author = new QLabel("Author", this);
  24. grid->addWidget(author, 1, 0, 1, 1);
  25.  
  26. QLineEdit *edt2 = new QLineEdit(this);
  27. grid->addWidget(edt2, 1, 1, 1, 1);
  28.  
  29. QLabel *review = new QLabel("Review", this);
  30. grid->addWidget(review, 2, 0, 1, 1);
  31.  
  32. QTextEdit *te = new QTextEdit(this);
  33. grid->addWidget(te, 2, 1, 3, 1);
  34.  
  35. setLayout(grid);
  36.  
  37. }

ينشئ نافذة تدخل فيها العنوان و الكاتب والنقد
  1. QGridLayout *grid = new QGridLayout(this);
  2. grid->setSpacing(20);

ننشئ شبكة مع بعض الأزاحة
  1. QLabel *title = new QLabel("Title", this);
  2. grid->addWidget(title, 0, 0, 1, 1);

هذه السطور تنشئ label وتضعه فى الشبكة
الطريقة addWidget لديها 5 معاملات
1- هو الإبن (الويدجت)
2، 3- الصف والعمود
4- rowspan
5- colspan
لتحددا حجم التمدد فى الخلايا

main.cpp
  1.  
  2. #include "karenina.h"
  3. #include <QDesktopWidget>
  4. #include <QApplication>
  5.  
  6. void center(QWidget &widget)
  7. {
  8. int x, y;
  9. int screenWidth;
  10. int screenHeight;
  11. int width, height;
  12. QSize windowSize;
  13.  
  14. QDesktopWidget *desktop = QApplication::desktop();
  15.  
  16. width = widget.frameGeometry().width();
  17. height = widget.frameGeometry().height();
  18.  
  19. screenWidth = desktop->width();
  20. screenHeight = desktop->height();
  21.  
  22. x = (screenWidth - width) / 2;
  23. y = (screenHeight - height) / 2;
  24.  
  25. widget.move( x, y );
  26.  
  27. }
  28.  
  29.  
  30. int main(int argc, char *argv[])
  31. {
  32. QApplication app(argc, argv);
  33.  
  34. Karenina window;
  35.  
  36. window.setWindowTitle("Anna Karenina");
  37. window.show();
  38. center(window);
  39.  
  40. return app.exec();
  41. }
  42.  
Main file.


Figure: Karenina

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

الأكثر زيارة

 دليل تنصيب اطار عمل Qt ، حزمة MinGW ، بيئة التطوير QDevelop
الزيارات 2849 دليل تنصيب اطار عمل Qt ، حزمة MinGW ، بيئة التطوير QDevelop
 اعداد وتنصيب Qt
الزيارات 2627 اعداد وتنصيب Qt
 دليل تنصيب اطار عمل Qt ، حزمة MinGW ، بيئة التطوير Eclipse
الزيارات 2577 دليل تنصيب اطار عمل Qt ، حزمة MinGW ، بيئة التطوير Eclipse
 التطوير السريع للتطبيقات Rapid Application Development
الزيارات 2420 التطوير السريع للتطبيقات Rapid Application Development
 C++ In a Nutshell
الزيارات 2293 C++ In a Nutshell
 

الأكثر تصويتـا

 اعداد وتنصيب Qt
نتيجة التصويت 40 من 5 شخص اعداد وتنصيب Qt
 تخطيط البرامج Program Layout
نتيجة التصويت 40 من 6 شخص تخطيط البرامج Program Layout
 الدرس الاول : كتابة اول برنامج
نتيجة التصويت 29 من 3 شخص الدرس الاول : كتابة اول برنامج
 التطوير السريع للتطبيقات Rapid Application Development
نتيجة التصويت 29 من 4 شخص التطوير السريع للتطبيقات Rapid Application Development
 الدرس الثالث:تعريف slot جديدة
نتيجة التصويت 27 من 3 شخص الدرس الثالث:تعريف slot جديدة
 
 

سكربت story-script v1 برمجة bwady.com تطوير SudaNix