نمایش نتایج: از شماره 1 تا 9 از مجموع 9
Like Tree2نفر پسندیدند
  • 2 ارسال توسط returnx

موضوع: ساخت Theme در Qt

  1. #1
    Moderator
    تاریخ عضویت
    2012 November
    ارسال ها
    128
    تشکر
    28
    تشکر شده 173 بار در 77 پست

    ساخت Theme در Qt

    یکی از نکات مهم در طراحی نرم افزار ، رابط کاربری نرم افزار هست که در موفقیت نرم افزار نقش کلیدی داره.
    در فریم ورک Qt راه های مختلفی برای طراحی UI وجود داره که عبارتند از استفاده از Widget ها (روش سنتی) ، استفاده از QML و از استفاده از HTML5 ...
    چیزی که ما امروز می خوایم بررسی کنیم ساخت تم برای widget هست...
    یکی از ساده ترین و جالب ترین روش برای تغییر ظاهر برنامه استفاده از Style Sheet هست، Style Sheet در Qt بسیار بسیار شبیه Style Sheet در HTML هست ، با سینتکسی بسیار مشابه ، اما با موتور parsing اختصاصی برای استفاده در Qt.

    برای مثال اگر می خواهید رنگ فونت یک Textbox را عوض کنید کافیه از کد زیر استفاده کنید :
    کد:
    ui->lineEdit->setStyleSheet("color:red");
    تقریبا تمام widget ها در Qt دارای خاصیت Style Sheet می باشند.
    ساخت یک فایل Theme با استفاده از Style Sheet :
    همونطور که در طراحی Web میشه CSS ها را از فایل های مجزا بارگزاری کرد و Style اشیا را تغییر داد در Qt هم اینکار قابل انجام هست ، حالا یک فایل متنی در یک مسیر دلخواه ایجاد کنید.
    دقیقا مانند html در Qt هم به دو روش میشه به اشیا از طریق Style Sheet دسترسی پیدا کرد ، 1 استفاده از نام ، 2 استفاده از نوع کلاس...
    با فرض اینکه پنجره اصلی شما نامش MainWindow باشد ، در فایل کد زیر را بنویسید :
    کد:
    .MainWindow{
    
    background-color:#411c6b
    }
    حالا می خوایم روش دوم را تست کنیم :
    برای مثال می خواهیم تمام Button ها استایل خاصی را بگیرند ، برای اینکار کد زیر را هم در فایل بنویسید :
    کد:
    QPushButton {
         border: 2px solid #8f8f91;
         border-radius: 6px;
         background-color: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,
                                           stop: 0 #f6f7fa, stop: 1 #dadbde);
         min-width: 80px;
     }
    و کد های زیر برای رویداد های press و hover دکمه ها :
    کد:
     QPushButton:pressed {
        border-width:6px;
         background-color: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,
                                           stop: 0 #dadbde, stop: 1 #f6f7fa)
     }
     
     QPushButton:hover {
         background-color: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,
                                           stop: 0 #dadbde, stop: 1 #f6f7fa)
     }
    و حالا باید باید در زمان اجرای برنامه این فایل را خوانده و خاصیت Style Sheet ، پنجره اصلی را با محتوای این فایل مقدار دهی کنید.
    برای خواندن فایل از کد زیر استفاده کنید :
    کد:
    QFile i_file("File Address");
            i_file.open(QIODevice::ReadOnly);
            QString line;
            QString style;
            while (!i_file.atEnd())
            {
                line=i_file.readLine();
                style+=line;
            }
            i_file.close();
    و مقدار دهی خاصیت style sheet پنجره اصلی :
    کد:
    ui->setStyleSheet(style);
    اینم یک فایل Style Sheet نمونه :
    کد:
    .MainWindow{
    
    background-color:#411c6b
    }
    
     QPushButton {
         border: 2px solid #8f8f91
         border-radius: 6px;
         background-color: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,
                                           stop: 0 #f6f7fa, stop: 1 #dadbde)
         min-width: 80px;
     }
    
     QPushButton:pressed {
        border-width:6px;
         background-color: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,
                                           stop: 0 #dadbde, stop: 1 #f6f7fa)
     }
     
     QPushButton:hover {
         background-color: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,
                                           stop: 0 #dadbde, stop: 1 #f6f7fa)
     }
    
     
    
    QLineEdit
    {
        outline: none;
        font-family: Helvetica, Arial, "Sans Serif";
        font-size: 13px;
        color: #333
        border: 1px solid #ddd
        border-radius: 3px;
        
    }
    
    QLineEdit:focus {
    
        border-width:1px;
        border-color: #faec0c
        background-color:#ff8d8a;
    
    }
    
    QLabel
    {
        color:#f0fc81;
        font-family:Tahoma;
    }
    
    QRadioButton {
        
        color:#f0fc81;
        font-family:Tahoma;
    
    }
    
    QCheckBox{
        color:#f0fc81;
        font-family:Tahoma;
    }
    
    
     QProgressBar::chunk {
         background-color: #05B8CC
         width: 20px;
     }
     
      QProgressBar {
         border: 2px solid grey;
         border-radius: 5px;
         text-align: center;
     }
    
     
      QSlider::groove:horizontal {
         border: 1px solid #999999
         height: 8px; /* the groove expands to the size of the slider by default. by giving it a height, it has a fixed size */
         background: qlineargradient(x1:0, y1:0, x2:0, y2:1, stop:0 #B1B1B1, stop:1 #c4c4c4)
         margin: 2px 0;
     }
    
     QSlider::handle:horizontal {
         background: qlineargradient(x1:0, y1:0, x2:1, y2:1, stop:0 #b4b4b4, stop:1 #8f8f8f)
         border: 1px solid #5c5c5c
         width: 18px;
         margin: -2px 0; /* handle is placed by default on the contents rect of the groove. Expand outside the groove */
         border-radius: 3px;
     }
    پروژه نمونه را هم میتونید از ضمیمه تاپیک دریافت کنید.

    فایل های پیوست شده
    • نوع فایل: zip theme_sample.zip (5.5 کیلو بایت,  این فایل 0 بار دانلود شده است)
    ویرایش توسط returnx : 25th July 2014 در ساعت 10:23 PM
    Hossein و Tishab این را میپسندند

  2. #2
    بنیانگذار
    تاریخ عضویت
    2010 January
    محل سکونت
    زیر سایه خدا
    سن
    37
    ارسال ها
    1,308
    تشکر
    2,923
    تشکر شده 2,205 بار در 886 پست
    نوشته های وبلاگ
    37
    خیلی عالیه .
    اگه امکانش باشه اموزش QML قرار داده بشه قدم به قدم و چند تا نمونه قشنگ کار بشه خیلی خوبه . من خیلی دلم میخواست طرف این برم فرصت نمیشد شاید این بار بلطف شما فرصتش پیش بیاد.
    خیلی ممنون

    توکل بخدا
    http://DeepLearning.ir
    اولین و تنها مرجع یادگیری عمیق ایران


    هرکس از ظن خود شد یار من
    از درون من نجست اسرار من




  3. #3
    Moderator
    تاریخ عضویت
    2012 November
    ارسال ها
    128
    تشکر
    28
    تشکر شده 173 بار در 77 پست
    نقل قول نوشته اصلی توسط Hossein نمایش پست ها
    خیلی عالیه .
    اگه امکانش باشه اموزش QML قرار داده بشه قدم به قدم و چند تا نمونه قشنگ کار بشه خیلی خوبه . من خیلی دلم میخواست طرف این برم فرصت نمیشد شاید این بار بلطف شما فرصتش پیش بیاد.
    خیلی ممنون
    متاسفانه این روز ها خیلی سرم شلوغِ ، به طور همزمان باید رو سه تا پروژه کار کنم که دو تاشُ دارم با QML و برای اندروید می نویسیم ، من خودمم تجربه QML زیاد نیست اما این دو تا پروژه باعث میشن تجربیات خوبی کسب کنم که قطعا با دوستان به اشتراک خواهم گذاشت...
    اما مشکلی که تا اینجا باهاش درگیر بودم این بوده که هنوز Qt تا پشتیبانی کامل اندروید راه درازی داره و مشکل دوم ساختار تعریفی QML هست که مجبور میکنه آدمُ که اشیا را قبل از اجرا تعریف کنه که باعث میشه کمی از Dynamic بودن پروژه کم بشه (دقیقا همون دلیلی که باعث شده هیچ وقت از طراحی وب خوشم نیاد و خیلی کم سراغش برم) البته قدرتش در طراحی UI واقعا عالیه اما هنوز باید کلی تجربه دیگه با این زبان بدست بیارم تا به نتیجه ی مطلوب برسم...

    ویرایش توسط returnx : 25th July 2014 در ساعت 10:22 PM

  4. #4
    عضو تازه وارد
    تاریخ عضویت
    2014 July
    ارسال ها
    3
    تشکر
    1
    تشکر شده 0 بار در 0 پست
    آیا امکان داره از qml برای خود ویجت هایی که تو دیزاینر میزاریم استفاده کرد؟ یه جایی دیدم که میشه قالب طراحی کرد برای ویجت ها و شکل و شمایل زیبایی بهشون داد ولی یادم نیست با qml اینکار رو کردن یا ...
    ممنون میشم راهنمایی بفرمایید


  5. #5
    Moderator
    تاریخ عضویت
    2012 November
    ارسال ها
    128
    تشکر
    28
    تشکر شده 173 بار در 77 پست
    میشه از کامپوننت هایی که در QML ساختید در اپلیکیشن های ویدجتی استفاده کرد ، اما نمیشه از QML برای تغییر شکل شمایل ویدجت ها استفاده کرد...
    برای تغییر شکل شمایل ویدجت ها ساده ترین روش استفاده از Style Sheet هست...


  6. #6
    عضو تازه وارد
    تاریخ عضویت
    2014 July
    ارسال ها
    3
    تشکر
    1
    تشکر شده 0 بار در 0 پست
    مثلا چه کامپوننت هایی؟ کلا کاربرد این QML تو چه زمینه هایی هستش. بلفرض ما فایل فلش داریم که خروجیش swf هستش اینو میان میچسبونن تو برنامه یه کارایی میکنه. الان از این QML چه استفاده هایی میشه ازش کرد؟


  7. #7
    Moderator
    تاریخ عضویت
    2012 November
    ارسال ها
    128
    تشکر
    28
    تشکر شده 173 بار در 77 پست
    نقل قول نوشته اصلی توسط tux-world نمایش پست ها
    مثلا چه کامپوننت هایی؟ کلا کاربرد این QML تو چه زمینه هایی هستش. بلفرض ما فایل فلش داریم که خروجیش swf هستش اینو میان میچسبونن تو برنامه یه کارایی میکنه. الان از این QML چه استفاده هایی میشه ازش کرد؟
    کلا کاربرد QML در طراحی اینترفیس برنامه هست ، تا اینترفیس برنامه از منطق برنامه جدا بشه تا روند توسعه برنامه ساده تر شه ، فایل های swf مشکلات خاص خودشُ داشت مثلا نیاز به پلاگین داشت که مهم ترین مشکلش به حساب میامد اما QML یک زبان مبتنی بر java script هست که با یک موتور داخلی که در Qt تعبیه شده ترجمه میشه و برای همین این امکان بوجود آمده که UI هایی که با QML پیاده سازی میشن در تمامی پلتفرم ها بخوبی کار کنه...
    مهم ترین مزیت QML جدا سازی UI برنامه از منطق برنامه شماست ، شما می تونید از 0 تا 100 اینترفیستون را با QML طراحی کنید که میشه باهاش اینترفیس های جذابی ساخت ...
    میشه گفت QML کاربردی مشابه با WPF در دات نت داره اما با فلسفه ای کاملا جدا...


  8. #8
    عضو تازه وارد
    تاریخ عضویت
    2014 July
    ارسال ها
    3
    تشکر
    1
    تشکر شده 0 بار در 0 پست
    مرسی از راهنماییتون یه جایی خوندم که فقط مخصوص اسمارت فونهاست. نمیدون اشتباهی راهنمایی کرده بودن یا نمیدونستن. من ubuntu-sdk رو روی لینوکسم نصب کردم محیط QtCreator ام کلن از این رو به اون رو شد.
    پس در واقع به جای اینترفیسی که برای طراحی داره کیوت میشه از QML استفاده کرد. خیلی جالبه. WPF رو نمیدونم چیه چون اصلا از خیلی چیزهای ویندوز سر در نمیارم ولی اینی که گفتید خیلی جالبه


  9. #9
    Moderator
    تاریخ عضویت
    2012 November
    ارسال ها
    128
    تشکر
    28
    تشکر شده 173 بار در 77 پست
    نه فقط مخصوص اسمارت فون ها نیست و تقریبا در تمام پلتفرم هایی که Qt ساپورتش میکنه از QML میشه استفاده کرد در ضمن یکی از مهم ترین ابزار های توسعه اپلیکیشن برای ubunto موبایل QML هست :
    Apps | Ubuntu Developer
    همچنین در پروژه های زیر هم از QML استفاده شده :
    KDE Plasma Workspaces 2
    Unity (user interface)
    Hawaii (desktop environment)
    Simple Desktop Display Manager


 

 

کاربران برچسب خورده در این موضوع

علاقه مندی ها (Bookmarks)

علاقه مندی ها (Bookmarks)

مجوز های ارسال و ویرایش

  • شما نمیتوانید موضوع جدیدی ارسال کنید
  • شما امکان ارسال پاسخ را ندارید
  • شما نمیتوانید فایل پیوست کنید.
  • شما نمیتوانید پست های خود را ویرایش کنید
  •  


Powered by vBulletin
Copyright ©2000 - 2024, Jelsoft Enterprises Ltd.
Content Relevant URLs by vBSEO 3.6.0
Persian Language By Ustmb.ir
این انجمن کاملا مستقل بوده و هیچ ارتباطی با دانشگاه علوم و فنون مازندران و مسئولان آن ندارد..این انجمن و تمامی محتوای تولید شده در آن توسط دانشجویان فعلی و فارغ التحصیل ادوار گذشته این دانشگاه برای استفاده دانشجویان جدید این دانشگاه و جامعه دانشگاهی کشور فراهم شده است.لطفا برای اطلاعات بیشتر در رابطه با ماهیت انجمن با مدیریت انجمن ارتباط برقرار کنید
ساعت 01:27 PM بر حسب GMT +4 می باشد.