یکی از نکات مهم در طراحی نرم افزار ، رابط کاربری نرم افزار هست که در موفقیت نرم افزار نقش کلیدی داره.
در فریم ورک 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;
}
پروژه نمونه را هم میتونید از ضمیمه تاپیک دریافت کنید.
علاقه مندی ها (Bookmarks)