خانه برنامه نویسی ساخت منو شبیه اندروید در کیوتی
پروژه برنامه نویسی کیوت ساخت منو و رابط کاربری شبیه اندروید

ساخت منو شبیه اندروید در کیوتی


۳ بهمن ۱۳۹۸
رضا احمدی
377 بازدید
دسته بندی : c++ , Qt creator , برنامه نویسی

در این مقاله یک ui برای یک نرم افزار در محیط کیوت طراحی می کنیم که کلید منو شبیه به کلید های منو در نرم افزار های اندروید دارد .

مقدمه :

در این پروژهکار با کلاس های QWidget ,QPushButton و مفاهیم اشاره گر در سی پلاس پلاس سرو کار دارید. و هدف آن این است که در یک نرم افزار که شامل چندین صفحه از نوع QWidget می باشد را بسازیم، طوری که کاربر بتواند به راحتی بین این صفحات جابجا شود.

یک پروژه از نوع QMainWindow به نام myMenu بسازید .و سپس وارد محیط راحی فرم شوید و اندازه آن را 440 در 500 پیکسل بگذارید.( دقت نمایید که تمامی منو بار ها و لیبل ها و… را از روی این ویجدت پاک کنید).

طراحی رابط کاربری :

سایز بندی فرم طراحی همراه با نام ها
سایز بندی فرم طراحی همراه با نام ها

قرار است یک فرم مانند بالا طراحی کنیم که هنگامی ک کاربر بروی کلید btn_menu کلیک کرد ویدجت wgt_menu نمایش داده شود و در این ویجدت 3 کلید برای رفتن (نمایش دادن) صفحات دیگر این برنامه باشد .

دقت نمایید چهار صفحه ای که به عنوان منو وصفخات برنامه ایجاد شده اند مکان و اندازه همگی برابر باشد در اینجا نقطه شروه 0در 60 و انداره آن ها 440 در 440 پیکسل می باشد. و در درون ویدجت wgt_menu سه کلید به نام های btn_page1,btn_page2,btn_page3 قرار دهید .

همچنین در سایر صفخات برای نمونه یک لیبل با محتوای صفحه شماره 1 یا 2یا 3 قرار دهید.
برای کلید منو از کاراکتر ≡ استفاده کنید.

کد استایل شیت مربوط به QmainWindow یا همان استایل کلی برنامه مانند زیر می باشد.

  1. QWidget{
  2. font: 14pt "B Yekan";
  3. }
  4. QWidget#centralWidget{background:white;}
  5. QWidget#wgt_menu{background:#0ec2ff;}
  6. QWidget#wgt_page1{background:#fa5e33;}
  7. QWidget#wgt_page2{background:#fa55fa;}
  8. QWidget#wgt_page3{background:#33ff0e;}
  9. QGroupBox{background:transparent;border:0px;border-bottom:2px solid #0ec2ff;}
  10.  
  11. #wgt_menu QPushButton{background:rgba(0,0,0,0);color:white;border:0px;}
  12. #wgt_menu QPushButton:hover{border-bottom:2px solid white;}
  13.  
  14. #gb_header QPushButton{color:#0ec2ff;font-size:24pt;font-weight:bold;background:rgba(0,0,0,0);border:0px;}
  15. #gb_header QPushButton:hover{color:white;font-size:24pt;font-weight:bold;background:#0ec2ff;border:0px;}
  16. </code>

اگر برنامه را اجرا کنیم باید با تصویر زیر مواجه شویم (دقت نمایید قبل از اجرا بر ویدجت wgt_menu راست کلیک کرده و گزینه bring to front را انتخاب کنید.) :

رابط کاربری و منو برنامه
رابط کاربری و منو برنامه

در این چهار ویدجتی که ساخته ایم مقدار صفت (property ) accessibleName را مانند تصویر زیر که برای wgt_page3 است تنظیم کنید. از این صفت برای قرار دادن در عنوان صفحه استقاده می کنیم.

accessibleName
accessibleName

برنامه نویسی :

همانطور که در آموزش های مربوط به signal,slot گفته شد برای هر رویدادی مانند کلیک کردن موس روی کلید یک slot یا همان متد در نظر بگیریم و از طریق تابع connect این سیگنال و اسلات را به هم وصل کنیم.

در این پروژه یک متد به نام setWidet(QWidget *wgt) پیاده سازی می کنیم در واقع این متد برای جابجایی بین صفحات و اینکه در حال حاضر چ ویدجتی باید نمایش داده شود یک اشاره گر به ویدجت مربوطه به این متد پاس داده و از آن استفاده می کنیم.

در کلاس QWidget یک متد به نام raise() وجود دارد که این متد همان عمل bring to front که قبلا در محیط گرافیکی انجام داده ایم را انجام می دهد.

setWidget(QWidget * wgt)

  1. void MainWindow::setWidget(QWidget *wgt)
  2. {
  3.     wgt->raise();
  4.     ui->lb_header->setText(wgt->accessibleName());
  5.     if(wgt != ui->wgt_menu)
  6.         currWgt=wgt;
  7. }

همانطور که می بینید برای تنظیم text لیبل عنوان صفحه یا همان شی lb_header از متد accessibleName() کلاس Qwidget استفاده شده. همچنین در این پروژه هنگامی که یک صفحه انتخاب شد اگر آن صفحه wgt_menu نبود مقدارش را درون currWgt ذخیره میکنیم. این متغییر هنگامی کاربرد دارد که شما در ضفحه اصلی هستید و دوباره روی کلید کنو کلیک می کنید باید صفحه ای که قبلا نمایش داده میشد را نمایش دهیم.

  1. void MainWindow::btn_menu()
  2. {
  3.     if(ui->lb_header->text() != ui->wgt_menu->accessibleName())
  4.         setWidget(ui->wgt_menu);
  5.     else if(currWgt!=NULL)
  6.         setWidget(currWgt);
  7. }

سورس کامل برنامه :

mainwindow.h

  1. #ifndef MAINWINDOW_H
  2. #define MAINWINDOW_H
  3.  
  4. #include <QMainWindow>
  5.  
  6. namespace Ui {
  7. class MainWindow;
  8. }
  9.  
  10. class MainWindow : public QMainWindow
  11. {
  12.     Q_OBJECT
  13.  
  14. public:
  15.     explicit MainWindow(QWidget *parent = 0);
  16.     ~MainWindow();
  17.     void setWidget(QWidget *wgt);
  18.  
  19. private:
  20.     Ui::MainWindow *ui;
  21.     QWidget *currWgt;
  22.  
  23. private slots:
  24.     void btn_menu();
  25.     void btn_pg1();
  26.     void btn_pg2();
  27.     void btn_pg3();
  28.  
  29. };
  30.  
  31. #endif // MAINWINDOW_H

mainwindow.cpp

  1. #include "mainwindow.h"
  2. #include "ui_mainwindow.h"
  3.  
  4. MainWindow::MainWindow(QWidget *parent) :
  5.     QMainWindow(parent),
  6.     ui(new Ui::MainWindow)
  7. {
  8.     ui->setupUi(this);
  9.     connect(ui->btn_menu,SIGNAL(clicked(bool)),this,SLOT(btn_menu()));
  10.     connect(ui->btn_pg1,SIGNAL(clicked(bool)),this,SLOT(btn_pg1()));
  11.     connect(ui->btn_pg2,SIGNAL(clicked(bool)),this,SLOT(btn_pg2()));
  12.     connect(ui->btn_pg3,SIGNAL(clicked(bool)),this,SLOT(btn_pg3()));
  13.     currWgt=NULL;
  14.     setWidget(ui->wgt_menu);
  15. }
  16.  
  17. MainWindow::~MainWindow()
  18. {
  19.     delete ui;
  20. }
  21.  
  22. void MainWindow::setWidget(QWidget *wgt)
  23. {
  24.     wgt->raise();
  25.     ui->lb_header->setText(wgt->accessibleName());
  26.     if(wgt != ui->wgt_menu)
  27.         currWgt=wgt;
  28. }
  29.  
  30. void MainWindow::btn_menu()
  31. {
  32.     if(ui->lb_header->text() != ui->wgt_menu->accessibleName())
  33.         setWidget(ui->wgt_menu);
  34.     else if(currWgt!=NULL)
  35.         setWidget(currWgt);
  36. }
  37.  
  38. void MainWindow::btn_pg1()
  39. {
  40.     setWidget(ui->wgt_page1);
  41. }
  42.  
  43. void MainWindow::btn_pg2()
  44. {
  45.     setWidget(ui->wgt_page2);
  46. }
  47.  
  48. void MainWindow::btn_pg3()
  49. {
  50.     setWidget(ui->wgt_page3);
  51. }

mainwindow.ui کد رابط کاربری

  1. <?xml version="1.0" encoding="UTF-8"?>
  2. <ui version="4.0">
  3.  <class>MainWindow</class>
  4.  <widget class="QMainWindow" name="MainWindow">
  5.   <property name="geometry">
  6.    <rect>
  7.     <x>0</x>
  8.     <y>0</y>
  9.     <width>440</width>
  10.     <height>500</height>
  11.    </rect>
  12.   </property>
  13.   <property name="windowTitle">
  14.    <string>MRZX.ir</string>
  15.   </property>
  16.   <property name="styleSheet">
  17.    <string notr="true">QWidget{
  18. font: 14pt "B Yekan";
  19. }
  20. QWidget#centralWidget{background:white;}
  21. QWidget#wgt_menu{background:#0ec2ff;}
  22. QWidget#wgt_page1{background:#fa5e33;}
  23. QWidget#wgt_page2{background:#fa55fa;}
  24. QWidget#wgt_page3{background:#33ff0e;}
  25. QGroupBox{background:transparent;border:0px;border-bottom:2px solid #0ec2ff;}
  26.  
  27. #wgt_menu QPushButton{background:rgba(0,0,0,0);color:white;border:0px;}
  28. #wgt_menu QPushButton:hover{border-bottom:2px solid white;}
  29.  
  30. #gb_header QPushButton{color:#0ec2ff;font-size:24pt;font-weight:bold;background:rgba(0,0,0,0);border:0px;}
  31. #gb_header QPushButton:hover{color:white;font-size:24pt;font-weight:bold;background:#0ec2ff;border:0px;}</string>
  32.   </property>
  33.   <widget class="QWidget" name="centralWidget">
  34.    <widget class="QGroupBox" name="gb_header">
  35.     <property name="geometry">
  36.      <rect>
  37.       <x>0</x>
  38.       <y>0</y>
  39.       <width>441</width>
  40.       <height>60</height>
  41.      </rect>
  42.     </property>
  43.     <property name="title">
  44.      <string/>
  45.     </property>
  46.     <widget class="QLabel" name="lb_header">
  47.      <property name="geometry">
  48.       <rect>
  49.        <x>80</x>
  50.        <y>10</y>
  51.        <width>281</width>
  52.        <height>40</height>
  53.       </rect>
  54.      </property>
  55.      <property name="text">
  56.       <string>عنوان صفحه</string>
  57.      </property>
  58.      <property name="alignment">
  59.       <set>Qt::AlignCenter</set>
  60.      </property>
  61.     </widget>
  62.     <widget class="QPushButton" name="btn_menu">
  63.      <property name="geometry">
  64.       <rect>
  65.        <x>0</x>
  66.        <y>0</y>
  67.        <width>61</width>
  68.        <height>61</height>
  69.       </rect>
  70.      </property>
  71.      <property name="cursor">
  72.       <cursorShape>PointingHandCursor</cursorShape>
  73.      </property>
  74.      <property name="styleSheet">
  75.       <string notr="true"/>
  76.      </property>
  77.      <property name="text">
  78.       <string></string>
  79.      </property>
  80.     </widget>
  81.    </widget>
  82.    <widget class="QWidget" name="wgt_menu" native="true">
  83.     <property name="geometry">
  84.      <rect>
  85.       <x>0</x>
  86.       <y>60</y>
  87.       <width>440</width>
  88.       <height>440</height>
  89.      </rect>
  90.     </property>
  91.     <property name="accessibleName">
  92.      <string>صفحه اصلی</string>
  93.     </property>
  94.     <widget class="QPushButton" name="btn_pg1">
  95.      <property name="geometry">
  96.       <rect>
  97.        <x>150</x>
  98.        <y>100</y>
  99.        <width>141</width>
  100.        <height>41</height>
  101.       </rect>
  102.      </property>
  103.      <property name="cursor">
  104.       <cursorShape>PointingHandCursor</cursorShape>
  105.      </property>
  106.      <property name="text">
  107.       <string>صفحه یک</string>
  108.      </property>
  109.     </widget>
  110.     <widget class="QPushButton" name="btn_pg2">
  111.      <property name="geometry">
  112.       <rect>
  113.        <x>150</x>
  114.        <y>150</y>
  115.        <width>141</width>
  116.        <height>41</height>
  117.       </rect>
  118.      </property>
  119.      <property name="cursor">
  120.       <cursorShape>PointingHandCursor</cursorShape>
  121.      </property>
  122.      <property name="text">
  123.       <string>صفحه دو</string>
  124.      </property>
  125.     </widget>
  126.     <widget class="QPushButton" name="btn_pg3">
  127.      <property name="geometry">
  128.       <rect>
  129.        <x>150</x>
  130.        <y>200</y>
  131.        <width>141</width>
  132.        <height>41</height>
  133.       </rect>
  134.      </property>
  135.      <property name="cursor">
  136.       <cursorShape>PointingHandCursor</cursorShape>
  137.      </property>
  138.      <property name="text">
  139.       <string>صفحه سه</string>
  140.      </property>
  141.     </widget>
  142.     <widget class="QLabel" name="label_4">
  143.      <property name="geometry">
  144.       <rect>
  145.        <x>160</x>
  146.        <y>400</y>
  147.        <width>121</width>
  148.        <height>31</height>
  149.       </rect>
  150.      </property>
  151.      <property name="styleSheet">
  152.       <string notr="true">font:12pt "Arial Black";
  153. color:white;</string>
  154.      </property>
  155.      <property name="text">
  156.       <string>MRZX.ir</string>
  157.      </property>
  158.      <property name="alignment">
  159.       <set>Qt::AlignCenter</set>
  160.      </property>
  161.     </widget>
  162.    </widget>
  163.    <widget class="QWidget" name="wgt_page1" native="true">
  164.     <property name="geometry">
  165.      <rect>
  166.       <x>0</x>
  167.       <y>60</y>
  168.       <width>440</width>
  169.       <height>440</height>
  170.      </rect>
  171.     </property>
  172.     <property name="accessibleName">
  173.      <string>صفحه یک</string>
  174.     </property>
  175.     <widget class="QLabel" name="label">
  176.      <property name="geometry">
  177.       <rect>
  178.        <x>110</x>
  179.        <y>150</y>
  180.        <width>211</width>
  181.        <height>121</height>
  182.       </rect>
  183.      </property>
  184.      <property name="text">
  185.       <string>صفحه یک</string>
  186.      </property>
  187.      <property name="alignment">
  188.       <set>Qt::AlignCenter</set>
  189.      </property>
  190.     </widget>
  191.    </widget>
  192.    <widget class="QWidget" name="wgt_page2" native="true">
  193.     <property name="geometry">
  194.      <rect>
  195.       <x>0</x>
  196.       <y>60</y>
  197.       <width>440</width>
  198.       <height>440</height>
  199.      </rect>
  200.     </property>
  201.     <property name="accessibleName">
  202.      <string>صفحه دو</string>
  203.     </property>
  204.     <widget class="QLabel" name="label_2">
  205.      <property name="geometry">
  206.       <rect>
  207.        <x>110</x>
  208.        <y>150</y>
  209.        <width>211</width>
  210.        <height>121</height>
  211.       </rect>
  212.      </property>
  213.      <property name="text">
  214.       <string>صفحه دو</string>
  215.      </property>
  216.      <property name="alignment">
  217.       <set>Qt::AlignCenter</set>
  218.      </property>
  219.     </widget>
  220.    </widget>
  221.    <widget class="QWidget" name="wgt_page3" native="true">
  222.     <property name="geometry">
  223.      <rect>
  224.       <x>0</x>
  225.       <y>60</y>
  226.       <width>440</width>
  227.       <height>440</height>
  228.      </rect>
  229.     </property>
  230.     <property name="accessibleName">
  231.      <string>صفحه سه</string>
  232.     </property>
  233.     <widget class="QLabel" name="label_3">
  234.      <property name="geometry">
  235.       <rect>
  236.        <x>110</x>
  237.        <y>150</y>
  238.        <width>211</width>
  239.        <height>121</height>
  240.       </rect>
  241.      </property>
  242.      <property name="text">
  243.       <string>صفحه سه</string>
  244.      </property>
  245.      <property name="alignment">
  246.       <set>Qt::AlignCenter</set>
  247.      </property>
  248.     </widget>
  249.    </widget>
  250.    <zorder>gb_header</zorder>
  251.    <zorder>wgt_page1</zorder>
  252.    <zorder>wgt_page3</zorder>
  253.    <zorder>wgt_page2</zorder>
  254.    <zorder>wgt_menu</zorder>
  255.   </widget>
  256.  </widget>
  257.  <layoutdefault spacing="6" margin="11"/>
  258.  <resources/>
  259.  <connections/>
  260. </ui>
پروژه برنامه نویسی کیوت ساخت منو و رابط کاربری شبیه اندروید
پروژه برنامه نویسی کیوت ساخت منو و رابط کاربری شبیه اندروید

نظر/ سوال ؟

مطالب مرتبط

 دیدگاهتان را بنویسید   

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *