افتراضيا، ونحن نستخدم لخلق من النافذة والأجزاء هي أسلوب PyQt5 الافتراضي، حتى على الرغم من القبيح، ولكن لا الجمال على الإطلاق.

في الواقع، في PyQt5، فإننا يمكن أن يكون على درجة عالية من الحرية من نافذة تعريف نمط ومجموعة متنوعة من أجزاء صغيرة، عن طريق تخصيص أسلوب لتحقيق الغرض من واجهة رسومية تجميل.

في هذه المقالة، فإننا سوف تبني مثال عملي، وذلك باستخدام خصائص التكوين QSS وPyQt5 تحقيق المناظر الطبيعية واجهة المستخدم الرسومية.

الأول، ومخطط الأثر:

استخدام الصورة المواد تسعة الموسيقى صورة الغلاف:

المواد قد تحتاج إلى شريك صغير في [الدولة] قناة الصغرى السيد عدد الجمهور: رد (ID zmister2016) الكلمة "0013" الحصول على رابط التحميل.

الأول، وتخطيط واجهة وترتيب مكونات

في برمجة واجهة رسومية، تخطيط جيد يساعد على تشكيل واجهة الرقابة العالمية، وفي PyQt5، وهناك مجموعة متنوعة من الطرق بالنسبة لنا لاختيار التخطيط، تخطيط شيوعا هي ما يلي:

• تشكيل التخطيط: QFormLayout
• شبكة تخطيط: QGridLayout
• الأفقي تخطيط ترتيب: QHBoxLayout
• محاذاة عموديا التخطيط: QVBoxLayout

كل عقد له خصائصه الخاصة والسيطرة على تخطيط الحاجيات، اخترنا هنا بوصفه تجسيدا الحالي نسق الشبكة تخطيط بياني.

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

# الترميز: UTF-8 من PyQt5 استيراد QtCore ، QtGui ، QtWidgets استيراد تميز الكلية استيراد qtawesome فئة MainUi ( QtWidgets . QMainWindow ): صفر __init__ ( النفس ): السوبر (). __init__ () النفس . init_ui () صفر init_ui ( النفس ): النفس . setFixedSize ( 960 ، 700 ) النفس . main_widget = QtWidgets . QWidget () # إنشاء مكونات الإطار الرئيسي النفس . main_layout = QtWidgets . QGridLayout () # إنشاء تخطيط الشبكة من الجزء الرئيسي النفس . main_widget . setLayout ( النفس . main_layout ) # تعيين تخطيط الشبكة وحدة رئيسية تخطيط نافذة النفس . left_widget = QtWidgets . QWidget () # إنشاء الجزء الأيسر النفس . left_widget . setObjectName ( "Left_widget" ) النفس . left_layout = QtWidgets . QGridLayout () # إنشاء تخطيط الشبكة طبقة عضوا الجانب الأيسر النفس . left_widget . setLayout ( النفس . left_layout ) # تعيين تخطيط الشبكة لعضو الجانب الأيسر النفس . right_widget = QtWidgets . QWidget () # إنشاء الحق في التجمع النفس . right_widget . setObjectName ( "Right_widget" ) النفس . right_layout = QtWidgets . QGridLayout () النفس . right_widget . setLayout ( النفس . right_layout ) # تعيين تخطيط الصحيح للعضو الشبكة النفس . main_layout . addWidget ( النفس . left_widget ، 0 ، 0 ، 12 ، 2 ) في الجانب الأيسر عضوا # 00 الصف، الصف 3 تمثل 8 النفس . main_layout . addWidget ( النفس . right_widget ، 0 ، 2 ، 12 ، 10 ) في الجانب الأيمن عضوا # 0 الصف 3، صف 9 تمثل 8 النفس . setCentralWidget ( النفس . main_widget ) # نافذة إعدادات عضوا الرئيسي صفر رئيسي (): التطبيق = QtWidgets . QApplication ( تميز الكلية . ARGV ) واجهة المستخدم الرسومية = MainUi () واجهة المستخدم الرسومية . عرض () تميز الكلية . خروج ( التطبيق . exec_ ()) إذا __name__ == "__Main__" : رئيسي ()

تشغيل التعليمات البرمجية، عرض واجهة رسومية كما هو مبين أدناه:

فارغة، وهنا نبدأ في ملء ملء القطعة.

في الجانب الأيسر من شريط القوائم

على وحدة القائمة اليسرى، إلى الاستمرار في استخدام تخطيط الشبكة من المكونات. إضافة QPushButton عضو زر اليسار في القائمة تخطيط () تقليل زر القائمة على اليسار، وكلها قائمة النافذة شريط النصائح وزر الإغلاق.

في MainUi () أسلوب فئة init_ui ()، باستخدام التعليمات البرمجية التالية instantiates زر خلق:

النفس . left_close = QtWidgets . QPushButton ( " ) # الزر إغلاق النفس . left_visit = QtWidgets . QPushButton ( " ) # زر فارغ النفس . left_mini = QtWidgets . QPushButton ( " ) # الزر تصغير النفس . left_label_1 = QtWidgets . QPushButton ( "ديلي الموصى بها" ) النفس . left_label_1 . setObjectName ( "Left_label" ) النفس . left_label_2 = QtWidgets . QPushButton ( "الموسيقى" ) النفس . left_label_2 . setObjectName ( "Left_label" ) النفس . left_label_3 = QtWidgets . QPushButton ( "اتصالات مساعدة" ) النفس . left_label_3 . setObjectName ( "Left_label" ) النفس . left_button_1 = QtWidgets . QPushButton ( qtawesome . أيقونة ( "Fa.music" ، اللون = "الأبيض" )، "البوب الصينية" ) النفس . left_button_1 . setObjectName ( "Left_button" ) النفس . left_button_2 = QtWidgets . QPushButton ( qtawesome . أيقونة ( "Fa.sellsy" ، اللون = "الأبيض" )، "أون لاين FM" ) النفس . left_button_2 . setObjectName ( "Left_button" ) النفس . left_button_3 = QtWidgets . QPushButton ( qtawesome . أيقونة ( "Fa.film" ، اللون = "الأبيض" )، "الأعلى MV" ) النفس . left_button_3 . setObjectName ( "Left_button" ) النفس . left_button_4 = QtWidgets . QPushButton ( qtawesome . أيقونة ( "Fa.home" ، اللون = "الأبيض" )، "الموسيقى المحلية" ) النفس . left_button_4 . setObjectName ( "Left_button" ) النفس . left_button_5 = QtWidgets . QPushButton ( qtawesome . أيقونة ( "Fa.download" ، اللون = "الأبيض" )، "مدير تحميل" ) النفس . left_button_5 . setObjectName ( "Left_button" ) النفس . left_button_6 = QtWidgets . QPushButton ( qtawesome . أيقونة ( "Fa.heart" ، اللون = "الأبيض" )، "المفضلة" ) النفس . left_button_6 . setObjectName ( "Left_button" ) النفس . left_button_7 = QtWidgets . QPushButton ( qtawesome . أيقونة ( "Fa.comment" ، اللون = "الأبيض" )، "ردود الفعل يوصي" ) النفس . left_button_7 . setObjectName ( "Left_button" ) النفس . left_button_8 = QtWidgets . QPushButton ( qtawesome . أيقونة ( "Fa.star" ، اللون = "الأبيض" )، "تابعنا" ) النفس . left_button_8 . setObjectName ( "Left_button" ) النفس . left_button_9 = QtWidgets . QPushButton ( qtawesome . أيقونة ( "Fa.question" ، اللون = "الأبيض" )، "ورطة" ) النفس . left_button_9 . setObjectName ( "Left_button" ) النفس . left_xxx = QtWidgets . QPushButton ( " )

هنا، ونحن نستخدم مكتبة طرف ثالث لتنفيذ هذا qtawesome أزرار عرض الخط الرموز ممتاز الخط. ثم أضاف الزر لتخطيط شبكة خلق طبقة في العضو الجانب الأيسر:

النفس . left_layout . addWidget ( النفس . left_mini ، 0 ، 0 ، 1 ، 1 ) النفس . left_layout . addWidget ( النفس . left_close ، 0 ، 2 ، 1 ، 1 ) النفس . left_layout . addWidget ( النفس . left_visit ، 0 ، 1 ، 1 ، 1 ) النفس . left_layout . addWidget ( النفس . left_label_1 ، 1 ، 0 ، 1 ، 3 ) النفس . left_layout . addWidget ( النفس . left_button_1 ، 2 ، 0 ، 1 ، 3 ) النفس . left_layout . addWidget ( النفس . left_button_2 ، 3 ، 0 ، 1 ، 3 ) النفس . left_layout . addWidget ( النفس . left_button_3 ، 4 ، 0 ، 1 ، 3 ) النفس . left_layout . addWidget ( النفس . left_label_2 ، 5 ، 0 ، 1 ، 3 ) النفس . left_layout . addWidget ( النفس . left_button_4 ، 6 ، 0 ، 1 ، 3 ) النفس . left_layout . addWidget ( النفس . left_button_5 ، 7 ، 0 ، 1 ، 3 ) النفس . left_layout . addWidget ( النفس . left_button_6 ، 8 ، 0 ، 1 ، 3 ) النفس . left_layout . addWidget ( النفس . left_label_3 ، 9 ، 0 ، 1 ، 3 ) النفس . left_layout . addWidget ( النفس . left_button_7 ، 10 ، 0 ، 1 ، 3 ) النفس . left_layout . addWidget ( النفس . left_button_8 ، 11 ، 0 ، 1 ، 3 ) النفس . left_layout . addWidget ( النفس . left_button_9 ، 12 ، 0 ، 1 ، 3 )

متابعة تشغيل رمز البرنامج، هو مبين أدناه عرض رسومية واجهة:

وعلى الرغم من القبيح، ولكن يتم عرض النموذج الأساسي، وهنا لا تتعاون المنحى، أول هيكل كامل بنيت بها. بداية التالية بناء عضوا الجانب الأيمن.

وحدة المحتوى الجانب الأيمن

في وحدة المحتوى الصحيحة، وحدة لديها محتويات الرئيسية التالية:

• بحث الوحدة
• وحدة الموسيقى الموصى بها
• وحدة قائمة الموسيقى
• موسيقى أغنية وحدة واحدة
• الموسيقى حدة تقدم القراءة
• وحدة التحكم في الموسيقى لاعب

في وحدة البحث، نص ومربع البحث، وحققنا التي كتبها QLable () الأعضاء وQLineEdit) عضوا (، العضوين في حين ملفوفة في شبكة تخطيط QWidget () عضوا، وانهيار العمود الأول العمود الثاني، رمز كما يلي:

النفس . right_bar_widget = QtWidgets . QWidget () # الأعلى حق عضو مربع البحث النفس . right_bar_layout = QtWidgets . QGridLayout () # في حق العلوي من تخطيط الشبكة مربع البحث النفس . right_bar_widget . setLayout ( النفس . right_bar_layout ) النفس . search_icon = QtWidgets . QLabel ( مركز حقوق الإنسان ( 0xf002 ) + '' + 'بحث' ) النفس . search_icon . setFont ( qtawesome . الخط ( "فا" ، 16 )) النفس . right_bar_widget_search_input = QtWidgets . QLineEdit () النفس . right_bar_widget_search_input . setPlaceholderText ( "أدخل الفنان، أغنية أو المستعمل، أدخل البحث" ) النفس . right_bar_layout . addWidget ( النفس . search_icon ، 0 ، 0 ، 1 ، 1 ) النفس . right_bar_layout . addWidget ( النفس . right_bar_widget_search_input ، 0 ، 1 ، 1 ، 8 ) النفس . right_layout . addWidget ( النفس . right_bar_widget ، 0 ، 0 ، 1 ، 9 )

تشغيل التعليمات البرمجية البرنامج، الذي يقدم واجهة رسومية كما هو مبين أدناه:

ثم هو وحدة الموسيقى الموصى بها، وحدة الموسيقى الموصى بها، هناك عنوان الموصى بها، قائمة الموسيقى وتغطية ترتيب أفقي، حيث:

• عناوين أوصى باستخدام QLable () ينفذ.
• وتشمل قائمة الموسيقى تعدد QToolButton ()، الذي تخطيط وتابع واحد QGridLayout () لعضو QWidget () المدرجة.

لذلك، رمز هو:

النفس . right_recommend_label = QtWidgets . QLabel ( "موصى به اليوم" ) النفس . right_recommend_label . setObjectName ( "Right_lable" ) النفس . right_recommend_widget = QtWidgets . QWidget () # يوصي مادة الغطاء النفس . right_recommend_layout = QtWidgets . QGridLayout () # الغلاف تخطيط الشبكة الموصى بها النفس . right_recommend_widget . setLayout ( النفس . right_recommend_layout ) النفس . recommend_button_1 = QtWidgets . QToolButton () النفس . recommend_button_1 . setText ( "كيكسن HANM" ) # نص مجموعة زر النفس . recommend_button_1 . setIcon ( QtGui . QIcon ( "./R1.jpg" )) # الرموز مجموعة زر النفس . recommend_button_1 . setIconSize ( QtCore . QSize ( 100 ، 100 )) # تعيين حجم الرمز النفس . recommend_button_1 . setToolButtonStyle ( QtCore . كيو تي . ToolButtonTextUnderIcon ) # الزر تعيين أقل من الرقم في شكل النفس . recommend_button_2 = QtWidgets . QToolButton () النفس . recommend_button_2 . setText ( واضاف "هذا أغنية" ) النفس . recommend_button_2 . setIcon ( QtGui . QIcon ( "./R2.jpg" )) النفس . recommend_button_2 . setIconSize ( QtCore . QSize ( 100 ، 100 )) النفس . recommend_button_2 . setToolButtonStyle ( QtCore . كيو تي . ToolButtonTextUnderIcon ) النفس . recommend_button_3 = QtWidgets . QToolButton () النفس . recommend_button_3 . setText ( "صغيرة العظيم" ) النفس . recommend_button_3 . setIcon ( QtGui . QIcon ( "./R3.jpg" )) النفس . recommend_button_3 . setIconSize ( QtCore . QSize ( 100 ، 100 )) النفس . recommend_button_3 . setToolButtonStyle ( QtCore . كيو تي . ToolButtonTextUnderIcon ) النفس . recommend_button_4 = QtWidgets . QToolButton () النفس . recommend_button_4 . setText ( "رحلة المجد" ) النفس . recommend_button_4 . setIcon ( QtGui . QIcon ( "./R4.jpg" )) النفس . recommend_button_4 . setIconSize ( QtCore . QSize ( 100 ، 100 )) النفس . recommend_button_4 . setToolButtonStyle ( QtCore . كيو تي . ToolButtonTextUnderIcon ) النفس . recommend_button_5 = QtWidgets . QToolButton () النفس . recommend_button_5 . setText ( "تجميع الصيد" ) النفس . recommend_button_5 . setIcon ( QtGui . QIcon ( "./R5.jpg" )) النفس . recommend_button_5 . setIconSize ( QtCore . QSize ( 100 ، 100 )) النفس . recommend_button_5 . setToolButtonStyle ( QtCore . كيو تي . ToolButtonTextUnderIcon ) النفس . right_recommend_layout . addWidget ( النفس . recommend_button_1 ، 0 ، 0 ) النفس . right_recommend_layout . addWidget ( النفس . recommend_button_2 ، 0 ، 1 ) النفس . right_recommend_layout . addWidget ( النفس . recommend_button_3 ، 0 ، 2 ) النفس . right_recommend_layout . addWidget ( النفس . recommend_button_4 ، 0 ، 3 ) النفس . right_recommend_layout . addWidget ( النفس . recommend_button_5 ، 0 ، 4 ) النفس . right_layout . addWidget ( النفس . right_recommend_label ، 1 ، 0 ، 1 ، 9 ) النفس . right_layout . addWidget ( النفس . right_recommend_widget ، 2 ، 0 ، 2 ، 9 )

متابعة تشغيل رمز البرنامج، مما أسفر عن واجهة رسومية كما هو مبين أدناه:

قم بإنشاء قائمة الموسيقى والموسيقى أغنية وحدة وحدة واحدة. قائمة الموسيقى وحدة وحدة الموسيقى لها عنوان أغنية واحدة والقطعة لاستقبال محتوى معين.

عنوان التي نستخدمها جميعا QLabel () المكونات لتحقيق، ولكن قائمة الموسيقى QWidget نستخدم تخطيط الشبكة () ملفوفة عدة QPushButton خفض جزء) المكونات (زر لتحقيق يستخدم موسيقى أغنية واحدة تخطيط قائمة QWidget شبكة ( ويتحقق حزمة) في عدد أعضاء QToolButton () عضوا زر الأداة.

رموز محددة تظهر قائمة الموسيقى أدناه:

النفس . right_newsong_lable = QtWidgets . QLabel ( "الأغنية الأخيرة" ) النفس . right_newsong_lable . setObjectName ( "Right_lable" ) النفس . right_playlist_lable = QtWidgets . QLabel ( "قائمة الأغاني الشعبية" ) النفس . right_playlist_lable . setObjectName ( "Right_lable" ) النفس . right_newsong_widget = QtWidgets . QWidget () # أحدث أجزاء أغنية النفس . right_newsong_layout = QtWidgets . QGridLayout () # أحدث مكونات تخطيط أغنية الشبكة النفس . right_newsong_widget . setLayout ( النفس . right_newsong_layout ) النفس . newsong_button_1 = QtWidgets . QPushButton ( "أصدقاء ليلة آلة بريسيلا إلى الأبد 03 :: 29" ) النفس . newsong_button_2 = QtWidgets . QPushButton ( "أصدقاء ليلة آلة بريسيلا إلى الأبد 03 :: 29" ) النفس . newsong_button_3 = QtWidgets . QPushButton ( "أصدقاء ليلة آلة بريسيلا إلى الأبد 03 :: 29" ) النفس . newsong_button_4 = QtWidgets . QPushButton ( "أصدقاء ليلة آلة بريسيلا إلى الأبد 03 :: 29" ) النفس . newsong_button_5 = QtWidgets . QPushButton ( "أصدقاء ليلة آلة بريسيلا إلى الأبد 03 :: 29" ) النفس . newsong_button_6 = QtWidgets . QPushButton ( "أصدقاء ليلة آلة بريسيلا إلى الأبد 03 :: 29" ) النفس . right_newsong_layout . addWidget ( النفس . newsong_button_1 ، 0 ، 1 ،) النفس . right_newsong_layout . addWidget ( النفس . newsong_button_2 ، 1 ، 1 ، ) النفس . right_newsong_layout . addWidget ( النفس . newsong_button_3 ، 2 ، 1 ، ) النفس . right_newsong_layout . addWidget ( النفس . newsong_button_4 ، 3 ، 1 ، ) النفس . right_newsong_layout . addWidget ( النفس . newsong_button_5 ، 4 ، 1 ، ) النفس . right_newsong_layout . addWidget ( النفس . newsong_button_6 ، 5 ، 1 ، )

هو مبين أدناه كود موسيقى أغنية كتلة واحدة:

النفس . right_playlist_widget = QtWidgets . QWidget () لعب أغنية عضو واحد # النفس . right_playlist_layout = QtWidgets . QGridLayout () # تخطيط اللعب أغنية شبكة واحدة النفس . right_playlist_widget . setLayout ( النفس . right_playlist_layout ) النفس . playlist_button_1 = QtWidgets . QToolButton () النفس . playlist_button_1 . setText ( "لا يمكن التخلي عن الموسيقى دورة اليوم ..." ) النفس . playlist_button_1 . setIcon ( QtGui . QIcon ( "./P1.jpg" )) النفس . playlist_button_1 . setIconSize ( QtCore . QSize ( 100 ، 100 )) النفس . playlist_button_1 . setToolButtonStyle ( QtCore . كيو تي . ToolButtonTextUnderIcon ) النفس . playlist_button_2 = QtWidgets . QToolButton () النفس . playlist_button_2 . setText ( "أنا لست بحاجة إلى كلمات، يمكنك أيضا لمس قلبك." ) النفس . playlist_button_2 . setIcon ( QtGui . QIcon ( "./P2.jpg" )) النفس . playlist_button_2 . setIconSize ( QtCore . QSize ( 100 ، 100 )) النفس . playlist_button_2 . setToolButtonStyle ( QtCore . كيو تي . ToolButtonTextUnderIcon ) النفس . playlist_button_3 = QtWidgets . QToolButton () النفس . playlist_button_3 . setText ( "أولئك الذين لا يعرفون كنت معتادا على اسم ..." ) النفس . playlist_button_3 . setIcon ( QtGui . QIcon ( "./P3.jpg" )) النفس . playlist_button_3 . setIconSize ( QtCore . QSize ( 100 ، 100 )) النفس . playlist_button_3 . setToolButtonStyle ( QtCore . كيو تي . ToolButtonTextUnderIcon ) النفس . playlist_button_4 = QtWidgets . QToolButton () النفس . playlist_button_4 . setText ( "أولئك الذين يستمعون إلى مقدمة لتسمم الأغنية الإنجليزية" ) النفس . playlist_button_4 . setIcon ( QtGui . QIcon ( "./P4.jpg" )) النفس . playlist_button_4 . setIconSize ( QtCore . QSize ( 100 ، 100 )) النفس . playlist_button_4 . setToolButtonStyle ( QtCore . كيو تي . ToolButtonTextUnderIcon ) النفس . right_playlist_layout . addWidget ( النفس . playlist_button_1 ، 0 ، 0 ) النفس . right_playlist_layout . addWidget ( النفس . playlist_button_2 ، 0 ، 1 ) النفس . right_playlist_layout . addWidget ( النفس . playlist_button_3 ، 1 ، 0 ) النفس . right_playlist_layout . addWidget ( النفس . playlist_button_4 ، 1 ، 1 )

ومن ثم إضافتها إلى طبقة تخطيط الصحيحة:

النفس . right_layout . addWidget ( النفس . right_newsong_lable ، 4 ، 0 ، 1 ، 5 ) النفس . right_layout . addWidget ( النفس . right_playlist_lable ، 4 ، 5 ، 1 ، 4 ) النفس . right_layout . addWidget ( النفس . right_newsong_widget ، 5 ، 0 ، 1 ، 5 ) النفس . right_layout . addWidget ( النفس . right_playlist_widget ، 5 ، 5 ، 1 ، 4 )

متابعة تشغيل رمز البرنامج أو عرضها هو مبين أدناه اجهة رسومية:

وبهذه الطريقة، تكون أساسا قادرا على رؤية مظهر واجهة رسومية، لا يزال هناك الموسيقى الماضي شريط تقدم القراءة وأزرار التحكم في الموسيقى لاعب فريق.

نحن نستخدم شريط التقدم تشغيل الموسيقى عضوا QProgressBar () لتحقيق شريط التقدم، تشغيل الموسيقى باستخدام مجموعة من أزرار التحكم ملفوفة ثلاثة أعضاء QWidget وQPushButton (خفض) () ويتحقق عضوا زر واحدة.

رمز محددة على النحو التالي:

النفس . right_process_bar = QtWidgets . QProgressBar () # أجزاء التقدم قراءة النفس . right_process_bar . setValue ( 49 ) النفس . right_process_bar . setFixedHeight ( 3 ) # تعيين ارتفاع شريط التقدم النفس . right_process_bar . setTextVisible ( زائف ) # لا تظهر تقدما نص شريط النفس . right_playconsole_widget = QtWidgets . QWidget () # قسم مراقبة التشغيل النفس . right_playconsole_layout = QtWidgets . QGridLayout () # قسم مراقبة تشغيل طبقة تخطيط الشبكة النفس . right_playconsole_widget . setLayout ( النفس . right_playconsole_layout ) النفس . console_button_1 = QtWidgets . QPushButton ( qtawesome . أيقونة ( "Fa.backward" ، اللون = "F76677 # ' )، " ) النفس . console_button_2 = QtWidgets . QPushButton ( qtawesome . أيقونة ( "Fa.forward" ، اللون = "F76677 # ' )، " ) النفس . console_button_3 = QtWidgets . QPushButton ( qtawesome . أيقونة ( "Fa.pause" ، اللون = "F76677 # ' ، الخط = 18 )، " ) النفس . console_button_3 . setIconSize ( QtCore . QSize ( 30 ، 30 )) النفس . right_playconsole_layout . addWidget ( النفس . console_button_1 ، 0 ، 0 ) النفس . right_playconsole_layout . addWidget ( النفس . console_button_2 ، 0 ، 2 ) النفس . right_playconsole_layout . addWidget ( النفس . console_button_3 ، 0 ، 1 ) النفس . right_playconsole_layout . setAlignment ( QtCore . كيو تي . AlignCenter ) # تعيين تخطيط عضو الداخلي تركزت النفس . right_layout . addWidget ( النفس . right_process_bar ، 9 ، 0 ، 1 ، 9 ) النفس . right_layout . addWidget ( النفس . right_playconsole_widget ، 10 ، 0 ، 1 ، 9 )

وأخيرا، رمز تشغيل البرنامج، نحصل على شكل كامل عضو واجهة رسومية، والذي هو مبين أدناه:

الانتهاء من الهياكل الأساسية للالحاجيات واجهة رسومية، ثم، يمكننا أن ننظر إلى واجهة رسومية المناظر الطبيعية، لأنه الآن هذا يبدو أنه هو قبيح جدا قبيحة جدا.

ثانيا، عضو QSS استخدام الخصائص والمناظر الطبيعية القطعة

دعا QSS كيو تي ورقة الأنماط، ويستخدم للسيطرة على السيطرة QT رقة الأنماط. تطوير الشبكة ورقة اسلوبه السابقة CSS مماثلة، ثم نأتي إلى تجميل أعلاه لإنشاء واجهة رسومية جيدة من خلال QSS.

زر التحكم في النوافذ

نبدأ مع شريط القوائم على اليسار.

أعلى الجانب الأيسر من أزرار التحكم نافذة الثلاثة، نحن بحاجة إلى أن تقدم في شكل نقاط صغيرة. أولا، ونحن نستخدم QPushButton () من setFixedSize () حجم طريقة، تعيين الزر:

النفس . left_close . setFixedSize ( 15 ، 15 ) # تعيين حجم زر الإغلاق النفس . left_visit . setFixedSize ( 15 ، 15 ) # حجم الزر تعيين النفس . left_mini . setFixedSize ( 15 ، 15 ) # تعيين حجم زر تصغير

ثم، setStyleSheet طريقة ()، وتقدم عضو زر نمط QSS، هنا، في الجانب الأيسر من الزر الافتراضي الضوء الأخضر، والظلام تعليق الأخضر الماوس؛ المتوسطة باعتبارها شاحب الزر الافتراضي الأصفر، والفأرة وتعليق الأصفر الظلام، الزر الأيمن الافتراضي هو الأحمر الفاتح والأحمر عندما يتم تعليق الماوس. QSS ذلك إعدادات أسلوبهم هي كما يلي:

النفس . left_close . setStyleSheet ( '' 'QPushButton {خلفية: # F76677، الحدود بين دائرة نصف قطرها: 5px؛} QPushButton: تحوم {خلفية: أحمر؛}' '' ) النفس . left_visit . setStyleSheet ( '' 'QPushButton {خلفية: # F7D674، الحدود بين دائرة نصف قطرها: 5px؛} QPushButton: تحوم {خلفية: أصفر؛}' '' ) النفس . left_mini . setStyleSheet ( '' 'QPushButton {خلفية: # 6DDF6D، الحدود بين دائرة نصف قطرها: 5px؛} QPushButton: تحوم {خلفية: أخضر؛}' '' )

تشغيل رمز البرنامج يمكن العثور أصبحت ثلاثة أزرار التحكم أكثر جمالا نقاط صغيرة من:

الجانب الأيسر من زر القائمة

لأن واجهة رسومية النهائية، واليسرى الخلفية عضوا الجانب رمادية اللون، لذلك نحن بحاجة القائمة زر على اليسار ولون النص تعيين إلى الأبيض، والخطوط العريضة للزر إزالة والأساليب QSS التخلص منها left_widget على النحو التالي:

النفس . left_widget . setStyleSheet ( '' ' QPushButton {الحدود: لا شيء؛ لون: أبيض؛} QPushButton # left_label { الحدود: لا شيء؛ الحدود القاع: 1PX صلبة بيضاء. حجم الخط: 18px؛ الخط الوزن: 700. الخط بين أفراد الأسرة: "هلفتيكا نويه"، هلفتيكا، ارييل، بلا الرقيق؛ } QPushButton # left_button: تحوم {يسار الحدود: 4PX الصلبة الحمراء؛ الخط الوزن: 700؛} '' ' )

على خلفية الصحيحة، مربع نص البحث وحدة

بعد الانتهاء من المناظر الطبيعية في الجزء الأيسر، ونحن بعد ذلك جزء من محتويات حق المعالجة، أولا مربع البحث في الأعلى، لأن مربع البحث باستخدام عنصر QLineEdit ()، من خلال زاوية الافتراضي قبيحة جدا، ونحن الذي كان منزوع:

النفس . right_bar_widget_search_input . setStyleSheet ( '' 'QLineEdit { الحدود: 1PX الرمادي الصلبة. العرض: 300px؛ الحدود بين دائرة نصف قطرها: 10px؛ الحشو: 2px 4PX. } '' ' )

لأن واجهة رسومية سوف يحمل شكل مستدير من بدون شفة، في الزاوية اليمنى العليا والزاوية اليمنى السفلى من العضو الجانب الأيمن هي احتياجات مدورة لعملية، في حين تم تعيين الخلفية إلى الأبيض. على وحدة التوصية، قائمة وحدة وحدة موسيقى أغنية عنوان الموسيقى واحدة، ونحن بحاجة أيضا للتعامل مع الخط في الموسع، وأسلوب النهائي ل:

النفس . right_widget . setStyleSheet ( '' ' QWidget # right_widget { اللون: # 232C51. الخلفية: أبيض؛ الحدود بين كبار: 1PX صلب رمادي غامق. الحدود القاع: 1PX صلب رمادي غامق. الحدود اليمين: 1PX صلب رمادي غامق. أعلى الحد من اليمين دائرة نصف قطرها: 10px؛ الحدود من الأسفل من اليمين دائرة نصف قطرها: 10px؛ } QLabel # right_lable { الحدود: لا شيء؛ حجم الخط: 16px؛ الخط الوزن: 700. الخط بين أفراد الأسرة: "هلفتيكا نويه"، هلفتيكا، ارييل، بلا الرقيق؛ } '' ' )

تشغيل رمز البرنامج، وقد تم عرض واجهة رسومية أكثر وأكثر مثل الشكل النهائي:

وحدة التوصية، وقائمة الأغاني أغنية وحدة وحدة واحدة

لأنه يتم استخدام أغنية واحدة وحدة التوصية وحدات عضوا QToolButton ()، وبالتالي فإن الاسلوب هو أيضا مماثل:

النفس . right_recommend_widget . setStyleSheet ( '' ' QToolButton {الحدود: لا شيء؛} QToolButton: تحوم {الحدود القاع: 2px الصلبة # F76677؛} '' ' ) النفس . right_playlist_widget . setStyleSheet ( '' ' QToolButton {الحدود: لا شيء؛} QToolButton: تحوم {الحدود القاع: 2px الصلبة # F76677؛} '' ' )

قائمة الموسيقى باستخدام QPushButton () قطع زر، ونحن بحاجة إلى إزالة الحدود وتغيير الخطوط والألوان، وبالتالي فإن أسلوب هو:

النفس . right_newsong_widget . setStyleSheet ( '' ' QPushButton { الحدود: لا شيء؛ اللون: اللون الرمادي. حجم الخط: 12px؛ الطول: 40px؛ يسار الحشو: 5px؛ الحشو اليمين: 10px؛ محاذاة النص: غادر؛ } QPushButton: تحوم { اللون: أسود، الحدود: 1PX الصلبة # F3F3F5. الحدود بين دائرة نصف قطرها: 10px؛ خلفية: LightGray. } '' ' )

تنفيذ التعليمات البرمجية البرنامج، واجهة رسومية الآن كما هو مبين أدناه:

تعيين شريط التقدم تشغيل والتحكم في تشغيل أزرار

تليها المقبل شريط التقدم تشغيل وتشغيل مجموعة أزرار التحكم، ونحن بحاجة للعب مثل تعيين شريط التقدم إلى اللون الأحمر الفاتح، ثم إزالة أزرار التحكم في التشغيل الحدود، وذلك على غرار QSS من أجل:

النفس . right_process_bar . setStyleSheet ( '' ' QProgressBar :: قطعة { لون الخلفية: # F76677. } '' ' ) النفس . right_playconsole_widget . setStyleSheet ( '' ' QPushButton { الحدود: لا شيء؛ } '' ' )

في هذه الخطوة، قم بتشغيل رمز البرنامج الذي يظهر أكثر وأكثر مثل واجهة رسومية واجهة النهائية:

ثم هناك أعمال التشجير النهائي!

الثالث، والحدود خالية من النافذة وتدوير الزوايا

إلى الخطوة السابقة، من خلال تعديل أسلوب ونحن لديه في الأساس تم الانتهاء QSS، والآن تحتاج إلى استخدام البعض بنيت في مناطق مختلفة من PyQt5 الملكية لاستكمال الأعمال التجميلية النهائية هذه الواجهة الرسومية.

نافذة الإعدادات خلفية شفافة

سوف شفافة نافذة خلفية لديها واجهة رسومية حديثة وأنيقة، واجهة رسومية النافذة الخلفية وضعناها من حيث الشفافية:

النفس . setWindowOpacity ( 0.9 ) # نافذة إعدادات الشفافية النفس . على SetAttribute ( QtCore . كيو تي . WA_TranslucentBackground ) # تعيين خلفية نافذة شفافة

تشغيل رمز البرنامج، وحصلنا على انطباع مختلف تماما واجهة:

إزالة إطار النافذة

خلفية نافذة لتجربة شفافة مختلفة جدا، ولكن الحدود الافتراضية ويتم تنسيق جدا، ثم إزالة الحدود الافتراضية القبيح هو العمل الذي يتعين القيام به، من خلال نافذة setWindowFlag () الملكية، فإننا يمكن أن يحدد الإطار بحيث الدولة الحدود لاخفاء:

النفس . setWindowFlag ( QtCore . كيو تي . FramelessWindowHint ) # إخفاء الحدود

من أجل تجنب إطار نافذة خفية، الجزء الأيسر لا لون الخلفية والحدود، ونضيف إلى الجزء الأيسر من الممتلكات QSS:

QWidget #left_widget { خلفية : رمادي . الحدود - أعلى : 1PX صلبة بيضاء . الحدود - أسفل : 1PX صلبة بيضاء . الحدود - اليسار : 1PX صلبة بيضاء . الحدود - أعلى - اليسار - نصف القطر : 10px . الحدود - أسفل - اليسار - نصف القطر : 10px . }

تشغيل رمز البرنامج، وجاءت واجهة رسومية كاملة 99 من:

السبب إنجاز 99، ويمكن العثور عليها في عضو واجهة رسومية يقم وعضو الأيمن لديه فتحة، فتحة قطعة أزلنا الفجوة من خلال توفير تخطيط عضوا الداخلية:

النفس . main_layout . setSpacing ( 0 )

هذه واجهة رسومية التي تظهر عدم وجود ثغرات القبيحة للقطعة:

وبهذه الطريقة، ونحن نعمل لتجميل واجهة رسومية كاملة.

ما هي المشكلة التي نوقشت رسالة ترحيب ~