Styling PyQt6 Applications – Stylesheets پیش فرض و سفارشی QSS

معرفی

در این راهنما، نگاهی به روش استایل دادن به برنامه PyQt.

اگر با PyQt آشنا نیستید، راهنمای ما برای کار با چارچوب PyQT پایتون را بخوانید.

ما با تم های پیش فرض PyQt و روش تغییر آنها شروع می کنیم، قبل از اینکه به سمت استفاده از انواع مختلف استایل های سفارشی حرکت کنیم.

تم های پیش فرض PyQt

PyQt با تم های پیش فرض مبتنی بر سیستم عامل کار می کند. این بدان معناست که مشخص نکردن یک موضوع به برنامه ظاهر متفاوتی می دهد روی سیستم های مختلف

برنامه شما متفاوت به نظر می رسد روی آ ویندوز 10 ماشین برخلاف a لینوکس دستگاه.

سبک‌ها یا تم‌های زیادی وجود دارند که با PyQt ارسال می‌شوند، به غیر از تم‌های پیش‌فرض.

برای حفظ ظاهر و احساس یکنواخت برنامه ما در حین توزیع در چندین سیستم عامل، می خواهیم تم پیش فرض را با یک تم از پیش ساخته شده تغییر دهیم یا تم خود را بسازیم. از طرف دیگر، می توانید بسته به ظاهر، ظاهر بومی را حفظ کنید روی سیستم عامل

همه سبک‌های سیستم موجود را بررسی کنید

از آنجا که سبک های پیش فرض سیستم از سیستم به سیستم دیگر متفاوت است ، هر سیستم سبک های پیش فرض یکسانی در دسترس نخواهد داشت.

خوشبختانه ، PYQT یک تابع داخلی برای بازیابی تمام سبک های موجود ، که در یک فرهنگ لغت نگهداری می شود ، دارد. بیایید نگاهی به تمام سبک های موجود در سیستم بیندازیم:

from PyQt6.QtWidgets import QStyleFactory
print(QStyleFactory.keys())

در دستگاه ویندوز ، این سه سبک زیر را برمی گرداند:

('windowsvista', 'Windows', 'Fusion')

در لینوکس، روی از طرف دیگر، باز خواهد گشت:

('Breeze', 'Oxygen', 'QtCurve', 'Windows', 'Fusion')

برای اینکه بدانید کدام سبک پیش فرض برای یک برنامه موجود اعمال می شود ، می توانید به objectName() از طریق app.style():

import sys
from PyQt6.QtWidgets import QApplication

app = QApplication(sys.argv)
print(app.style().objectName())

نتیجه، باز هم بستگی دارد روی سیستم عامل شما:

windowsvista

اعمال سبک های سیستم در برنامه های PyQt6

برای تغییر سبک سیستم پیش فرض به سبک دیگری می توانیم از آن استفاده کنیم setStyle() روش روی را QApplication به عنوان مثال، با سبک دیگری به عنوان استدلال.

بیایید سبک پیش فرض را روی آن قرار دهیم Fusion در یک برنامه کوچک:

import sys
from PyQt6.QtWidgets import QApplication, QPushButton, QVBoxLayout, QWidget
app = QApplication(sys.argv)


app.setStyle('Fusion')


window = QWidget()


layout = QVBoxLayout(window)



layout.addWidget(QPushButton('One'))
layout.addWidget(QPushButton('Two'))
layout.addWidget(QPushButton('Three'))
layout.addWidget(QPushButton('Four'))
layout.addWidget(QPushButton('Five'))


window.show()


sys.exit(app.exec())

در حال حاضر، این اعمال می شود Fusion صفحه شیوه ای به عناصر ما ، تغییر ظاهر آنها:

استایل های سفارشی PyQt6

اگرچه این سبک ها واقعاً خوب هستند – ممکن است دیدگاه متفاوتی برای کاربرد خود داشته باشید. اگر بخواهید دکمه ها را تغییر دهید چه می شود قرمز، اما بقیه صفحه شیوه فیوژن را اعمال کنید؟

به همان روشی که می توانید صفحات HTML را سبک کنید – همچنین می توانید برنامه های PYQT را سبک کنید – خطی و از طریق استایل شیت های QSS.

برگه های QSS از استایل های CSS الهام می گیرند و با یک ترفند کوچک ، نحوی وام گرفته شده را دارند.

افزودن سبک درون خطی به برنامه های PyQt6

زمانی که مقدار کد استایلینگ یک فایل مستقل و مستقل QSS را تضمین نمی کند، نوشتن کدهای استایل به صورت درون خطی ساده ترین کار است – یعنی در فایل پایتون که برنامه شما در آن قرار دارد.

مشابه صفحات HTML یک ظاهر طراحی شده ، بهترین عمل در نظر گرفته نمی شود ، اما برای نمونه سازی ، آزمایش یا ترفندهای واقعاً کوچک خوب است.

هر یک QWidget الف را می پذیرد setStyleSheet() تابعی که یک رشته CSS را می پذیرد:

widget.setStyleSheet(
    """
    CSS SYNTAX
    """
)

به عنوان مثال ، اگر می خواهیم یک رنگ را روی ویجت بمالیم ، خانواده و اندازه فونت خود را تنظیم کنیم ، می توانیم به سادگی از نحو CSS کاملاً آشنا استفاده کنیم:

...
button = QPushButton('One')
button.setStyleSheet(
    "background-color: #262626; "
    "font-family: times; "
    "font-size: 20px;"
)

layout.addWidget(button)

اگر کد افزودنی دکمه اصلی را با این کار جایگزین کنیم ، برنامه به نظر می رسد:

حال ، اگر می خواهیم یک مؤلفه دیگر را سبک کنیم ، ما را اعمال می کنیم setStyleSheet() به آن عمل کند. اگر بخواهید چندین مؤلفه را استایل کنید، این به سرعت مشکل ساز می شود…

اگر چه شما می توانید اعمال کنید setStyleSheet() تابع به QApplication به عنوان مثال و اعمال یک ظاهر طراحی به صورت جهانی برای کل برنامه. اگرچه، اگر قبلاً آنجا هستید، ممکن است یک شیوه نامه سفارشی جدید ایجاد کنید و از آن به جای کد استایل داخلی استفاده کنید.

ایجاد استایل شیت های سفارشی

سبک های سیستم عامل فقط شیوه نامه هایی هستند که در محموله های مختلف PyQt وجود دارند. هیچ چیزی مانع از تعریف QSS Stylesheet خود که به طور خاص برای برنامه شما ساخته شده است وجود ندارد.

علاوه بر این، استفاده از شیوه نامه ها، مشکلات بی شماری را که می تواند از استایل کردن اجزای شما به صورت درون خطی ایجاد شود، برطرف می کند، علاوه بر این که منطق کسب و کار را از کدهای استایل جدا می کنیم.

فایل‌های QSS بسیار شبیه به فایل‌های CSS هستند – تنها تفاوت این است که چگونه عناصری را که می‌خواهید استایل بدهید، شناسایی می‌کنید. شما نمی توانید یک شناسه منحصر به فرد به ویجت خاصی اختصاص دهید تا به صورت جداگانه به آن استایل بدهید. باید سیب‌ها را با سیب‌ها و سبک به هم بچسبانید انواع ویجت همان

به صورت اختیاری، می‌توانید اشیاء درون ویجت‌ها را نیز به صورت جداگانه از خود ویجت استایل دهید:

QPushButton {
    background-color: blue;
}

QLabel#title {
    font-size: 15px;
}

اولین سبک، رنگ پس‌زمینه ما را برای آن مشخص می‌کند همه را QPushButton اشیاء در برنامه

سبک دوم فقط به شی عنوان a استایل می دهد QLabel.

برای گنجاندن یک فایل QSS در برنامه خود، می توانید آن را با خواندن فایل و استفاده از آن اعمال کنید QApplication.setStyleSheet(str) تابع:

with open('styles.qss', 'r') as f:
    style = f.read()

    
    app.setStyleSheet(style)

در واقع، این فایل ها فقط هستند container برای رشته های سبک ما

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

با در نظر گرفتن همه اینها، بیایید یک شیوه نامه ساده QSS ایجاد کنیم و آن را در یک برنامه آزمایشی ساده اعمال کنیم:

import sys
from PyQt6.QtWidgets import (QApplication, QTableWidget, QTableWidgetItem)
from PyQt6.QtGui import QColor


nordic_countries = (('Norway', 'Oslo', 'Yes'),
          ('Iceland', 'Reykjavik', 'Yes'),
          ('Denmark', 'Copenhagen', 'Yes'),
          ('Belgium', 'Brussels','No'))
          

app = QApplication(sys.argv)


table = QTableWidget()


table.setRowCount(len(nordic_countries))



table.setColumnCount(len(nordic_countries(0)))


table.setHorizontalHeaderLabels(('Country', 'Capital', 'Scandinavian?'))


for i, (country, capital, scandinavian_bool) in enumerate(nordic_countries):

    
    item_country = QTableWidgetItem(country)
    item_capital = QTableWidgetItem(capital)
    item_scandinavian_bool = QTableWidgetItem(scandinavian_bool)

    
    table.setItem(i, 0, item_country)
    table.setItem(i, 1, item_capital)
    table.setItem(i, 2, item_scandinavian_bool)


table.show()


with open('styles.qss', 'r') as f:
    style = f.read()
    
    app.setStyleSheet(style)


sys.exit(app.exec())

و در داخل styles.qss فایل:

QTableWidget {
    font-family: Titillium;
    font-size: 20px;
}

QTableWidget::item {
    background-color: #D3D3D3;

}

QTableWidget::item:hover {
    background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 #e7effd, stop: 1 #cbdaf1);
    border: 1px solid #bfcde4;
}

نتیجه

در این راهنما، نگاهی به روش استایل دادن به برنامه های PyQt6 در پایتون انداخته ایم. ما سبک های استاندارد سیستم عامل، روش استایل دادن به آنها با استفاده از کدهای درون خطی و همچنین روش ایجاد Stylesheets سفارشی QSS را بررسی کرده ایم.