電子發燒友App
在上一篇文章中，已經跟大家介紹如何智能魔鏡的UI原型設計，并且采用designer.exe工具完成了原始的魔鏡UI界面設計，可以看出，整個魔鏡的UI設計非常簡單，但是如果要實心較好的效果，我們單獨使用designer.exe工具很難完成，這就需要我們在完成原型設計后得到的xml文件進行進一步的修改和細化，以達到我們的設計要求。
這里，大家可以直接修改designer.exe文件的xml的元素的屬性等來調節和細化UI，同時也可以使用pyuic5工具將其轉換成py腳本，然后對其進行修改，本文在設計中，直接使用pyuic5工具將其進行了轉換，然后進行修改，最終得到的UI代碼如下：
# -*- coding： utf-8 -*-
from PyQt5 import QtCore， QtGui， QtWidgets
class Ui_MainWindow（object）：
def setupUi（self， MainWindow）：
MainWindow.setObjectName（“MainWindow”）
desktopRect=QtWidgets.QDesktopWidget（）.screenGeometry（）
MainWindow.resize（desktopRect.width（）， desktopRect.height（））
icon = QtGui.QIcon（）
icon.addPixmap（QtGui.QPixmap（“：/images/icon”）， QtGui.QIcon.Normal， QtGui.QIcon.Off）
MainWindow.setWindowIcon（icon）
self.centralWidget = QtWidgets.QWidget（MainWindow）
self.centralWidget.setObjectName（“centralWidget”）
self.centralWidget.resize（357， 1059）
self.temp = QtWidgets.QLabel（self.centralWidget）
self.centralWidget.setGeometry（desktopRect.width（）-self.centralWidget.width（），0，self.centralWidget.width（），self.centralWidget.height（））
self.temp.setGeometry（QtCore.QRect（20， 60， 231， 100））
font = QtGui.QFont（）
font.setFamily（“楷體”）
font.setPointSize（40）
font.setBold（False）
font.setWeight（50）
self.temp.setFont（font）
self.temp.setText（“”）
self.temp.setAlignment（QtCore.Qt.AlignCenter）
self.temp.setObjectName（“temp”）
self.city = QtWidgets.QLabel（self.centralWidget）
self.city.setGeometry（QtCore.QRect（50， 160， 150， 30））
font = QtGui.QFont（）
font.setPointSize（13）
font.setBold（True）
font.setWeight（75）
self.city.setFont（font）
self.city.setText（“”）
self.city.setAlignment（QtCore.Qt.AlignCenter）
self.city.setObjectName（“city”）
self.date = QtWidgets.QLabel（self.centralWidget）
self.date.setGeometry（QtCore.QRect（30， 245， 211， 25））
font = QtGui.QFont（）
font.setPointSize（10）
font.setBold（True）
font.setWeight（75）
self.date.setFont（font）
self.date.setText（“”）
self.date.setAlignment（QtCore.Qt.AlignCenter）
self.date.setObjectName（“date”）
self.closeButton = QtWidgets.QPushButton（self.centralWidget）
self.closeButton.setGeometry（QtCore.QRect（240， 5， 25， 25））
self.closeButton.setCursor（QtGui.QCursor（QtCore.Qt.PointingHandCursor））
self.closeButton.setText（“”）
self.closeButton.setFlat（True）
self.closeButton.setObjectName（“closeButton”）
#self.layoutWidget = QtWidgets.QWidget（self.centralWidget）
self.layoutWidget = QtWidgets.QWidget（MainWindow）
self.layoutWidget.setGeometry（QtCore.QRect（0， desktopRect.height（）-170， desktopRect.width（）， 170））
self.layoutWidget.setObjectName（“layoutWidget”）
self.horizontalLayout = QtWidgets.QHBoxLayout（self.layoutWidget）
self.horizontalLayout.setContentsMargins（11， 11， 11， 11）
self.horizontalLayout.setSpacing（6）
self.horizontalLayout.setObjectName（“horizontalLayout”）
self.gridLayout = QtWidgets.QGridLayout（）
self.gridLayout.setContentsMargins（11， 11， 11， 11）
self.gridLayout.setSpacing（8）
self.gridLayout.setObjectName（“gridLayout”）
self.forecast_0_date = QtWidgets.QLabel（self.layoutWidget）
self.forecast_0_date.setMinimumSize（QtCore.QSize（80， 20））
self.forecast_0_date.setMaximumSize（QtCore.QSize（200， 40））
font = QtGui.QFont（）
font.setFamily（“微軟雅黑”）
font.setPointSize（8）
self.forecast_0_date.setFont（font）
self.forecast_0_date.setText（“”）
self.forecast_0_date.setAlignment（QtCore.Qt.AlignCenter）
self.forecast_0_date.setObjectName（“forecast_0_date”）
self.gridLayout.addWidget（self.forecast_0_date， 0， 0， 1， 1）
self.forecast_0_type = QtWidgets.QLabel（self.layoutWidget）
self.forecast_0_type.setMinimumSize（QtCore.QSize（78， 75））
self.forecast_0_type.setText（“”）
self.forecast_0_type.setScaledContents（True）
self.forecast_0_type.setObjectName（“forecast_0_type”）
self.gridLayout.addWidget（self.forecast_0_type， 1， 0， 1， 1）
self.forecast_0_temp = QtWidgets.QLabel（self.layoutWidget）
self.forecast_0_temp.setMinimumSize（QtCore.QSize（75， 20））
self.forecast_0_temp.setMaximumSize（QtCore.QSize（200， 40））
font = QtGui.QFont（）
font.setFamily（“微軟雅黑”）
font.setPointSize（8）
self.forecast_0_temp.setFont（font）
self.forecast_0_temp.setText（“”）
self.forecast_0_temp.setAlignment（QtCore.Qt.AlignCenter）
self.forecast_0_temp.setObjectName（“forecast_0_temp”）
self.gridLayout.addWidget（self.forecast_0_temp， 2， 0， 1， 1）
self.horizontalLayout.addLayout（self.gridLayout）
self.gridLayout_2 = QtWidgets.QGridLayout（）
self.gridLayout_2.setContentsMargins（11， 11， 11， 11）
self.gridLayout_2.setSpacing（8）
self.gridLayout_2.setObjectName（“gridLayout_2”）
self.forecast_1_date = QtWidgets.QLabel（self.layoutWidget）
self.forecast_1_date.setMinimumSize（QtCore.QSize（75， 20））
self.forecast_1_date.setMaximumSize（QtCore.QSize（200， 40））
font = QtGui.QFont（）
font.setFamily（“微軟雅黑”）
font.setPointSize（8）
self.forecast_1_date.setFont（font）
self.forecast_1_date.setText（“”）
self.forecast_1_date.setAlignment（QtCore.Qt.AlignCenter）
self.forecast_1_date.setObjectName（“forecast_1_date”）
self.gridLayout_2.addWidget（self.forecast_1_date， 0， 0， 1， 1）
self.forecast_1_type = QtWidgets.QLabel（self.layoutWidget）
self.forecast_1_type.setMinimumSize（QtCore.QSize（78， 75））
self.forecast_1_type.setText（“”）
self.forecast_1_type.setScaledContents（True）
self.forecast_1_type.setObjectName（“forecast_1_type”）
self.gridLayout_2.addWidget（self.forecast_1_type， 1， 0， 1， 1）
self.forecast_1_temp = QtWidgets.QLabel（self.layoutWidget）
self.forecast_1_temp.setMinimumSize（QtCore.QSize（75， 20））
self.forecast_1_temp.setMaximumSize（QtCore.QSize（200， 40））
font = QtGui.QFont（）
font.setFamily（“微軟雅黑”）
font.setPointSize（8）
self.forecast_1_temp.setFont（font）
self.forecast_1_temp.setText（“”）
self.forecast_1_temp.setAlignment（QtCore.Qt.AlignCenter）
self.forecast_1_temp.setObjectName（“forecast_1_temp”）
self.gridLayout_2.addWidget（self.forecast_1_temp， 2， 0， 1， 1）
self.horizontalLayout.addLayout（self.gridLayout_2）
self.gridLayout_3 = QtWidgets.QGridLayout（）
self.gridLayout_3.setContentsMargins（11， 11， 11， 11）
self.gridLayout_3.setSpacing（6）
self.gridLayout_3.setObjectName（“gridLayout_3”）
self.forecast_2_date = QtWidgets.QLabel（self.layoutWidget）
self.forecast_2_date.setMinimumSize（QtCore.QSize（75， 20））
self.forecast_2_date.setMaximumSize（QtCore.QSize（200， 40））
font = QtGui.QFont（）
font.setFamily（“微軟雅黑”）
font.setPointSize（8）
self.forecast_2_date.setFont（font）
self.forecast_2_date.setText（“”）
self.forecast_2_date.setAlignment（QtCore.Qt.AlignCenter）
self.forecast_2_date.setObjectName（“forecast_2_date”）
self.gridLayout_3.addWidget（self.forecast_2_date， 0， 0， 1， 1）
self.forecast_2_type = QtWidgets.QLabel（self.layoutWidget）
self.forecast_2_type.setMinimumSize（QtCore.QSize（78， 75））
self.forecast_2_type.setText（“”）
self.forecast_2_type.setScaledContents（True）
self.forecast_2_type.setObjectName（“forecast_2_type”）
self.gridLayout_3.addWidget（self.forecast_2_type， 1， 0， 1， 1）
self.forecast_2_temp = QtWidgets.QLabel（self.layoutWidget）
self.forecast_2_temp.setMinimumSize（QtCore.QSize（75， 20））
self.forecast_2_temp.setMaximumSize（QtCore.QSize（200， 40））
font = QtGui.QFont（）
font.setFamily（“微軟雅黑”）
font.setPointSize（8）
self.forecast_2_temp.setFont（font）
self.forecast_2_temp.setText（“”）
self.forecast_2_temp.setAlignment（QtCore.Qt.AlignCenter）
self.forecast_2_temp.setObjectName（“forecast_2_temp”）
self.gridLayout_3.addWidget（self.forecast_2_temp， 2， 0， 1， 1）
self.horizontalLayout.addLayout（self.gridLayout_3）
self.gridLayout_4 = QtWidgets.QGridLayout（）
self.gridLayout_4.setContentsMargins（11， 11， 11， 11）
self.gridLayout_4.setSpacing（6）
self.gridLayout_4.setObjectName（“gridLayout_4”）
self.forecast_3_date = QtWidgets.QLabel（self.layoutWidget）
self.forecast_3_date.setMinimumSize（QtCore.QSize（75， 20））
self.forecast_3_date.setMaximumSize（QtCore.QSize（200， 40））
font = QtGui.QFont（）
font.setFamily（“微軟雅黑”）
font.setPointSize（8）
self.forecast_3_date.setFont（font）
self.forecast_3_date.setText（“”）
self.forecast_3_date.setAlignment（QtCore.Qt.AlignCenter）
self.forecast_3_date.setObjectName（“forecast_3_date”）
self.gridLayout_4.addWidget（self.forecast_3_date， 0， 0， 1， 1）
self.forecast_3_type = QtWidgets.QLabel（self.layoutWidget）
self.forecast_3_type.setMinimumSize（QtCore.QSize（78， 75））
self.forecast_3_type.setText（“”）
self.forecast_3_type.setScaledContents（True）
self.forecast_3_type.setObjectName（“forecast_3_type”）
self.gridLayout_4.addWidget（self.forecast_3_type， 1， 0， 1， 1）
self.forecast_3_temp = QtWidgets.QLabel（self.layoutWidget）
self.forecast_3_temp.setMinimumSize（QtCore.QSize（75， 20））
self.forecast_3_temp.setMaximumSize（QtCore.QSize（200， 40））
font = QtGui.QFont（）
font.setFamily（“微軟雅黑”）
font.setPointSize（8）
self.forecast_3_temp.setFont（font）
self.forecast_3_temp.setText（“”）
self.forecast_3_temp.setAlignment（QtCore.Qt.AlignCenter）
self.forecast_3_temp.setObjectName（“forecast_3_temp”）
self.gridLayout_4.addWidget（self.forecast_3_temp， 2， 0， 1， 1）
self.horizontalLayout.addLayout（self.gridLayout_4）
self.gridLayout_5 = QtWidgets.QGridLayout（）
self.gridLayout_5.setContentsMargins（11， 11， 11， 11）
self.gridLayout_5.setSpacing（6）
self.gridLayout_5.setObjectName（“gridLayout_5”）
self.forecast_4_date = QtWidgets.QLabel（self.layoutWidget）
self.forecast_4_date.setMinimumSize（QtCore.QSize（75， 20））
self.forecast_4_date.setMaximumSize（QtCore.QSize（200， 40））
font = QtGui.QFont（）
font.setFamily（“微軟雅黑”）
font.setPointSize（8）
self.forecast_4_date.setFont（font）
self.forecast_4_date.setText（“”）
self.forecast_4_date.setAlignment（QtCore.Qt.AlignCenter）
self.forecast_4_date.setObjectName（“forecast_4_date”）
self.gridLayout_5.addWidget（self.forecast_4_date， 0， 0， 1， 1）
self.forecast_4_temp = QtWidgets.QLabel（self.layoutWidget）
self.forecast_4_temp.setMinimumSize（QtCore.QSize（75， 20））
self.forecast_4_temp.setMaximumSize（QtCore.QSize（200， 40））
font = QtGui.QFont（）
font.setFamily（“微軟雅黑”）
font.setPointSize（8）
self.forecast_4_temp.setFont（font）
self.forecast_4_temp.setText（“”）
self.forecast_4_temp.setAlignment（QtCore.Qt.AlignCenter）
self.forecast_4_temp.setObjectName（“forecast_4_temp”）
self.gridLayout_5.addWidget（self.forecast_4_temp， 2， 0， 1， 1）
self.forecast_4_type = QtWidgets.QLabel（self.layoutWidget）
self.forecast_4_type.setMinimumSize（QtCore.QSize（78， 75））
self.forecast_4_type.setText（“”）
self.forecast_4_type.setScaledContents（True）
self.forecast_4_type.setObjectName（“forecast_4_type”）
self.gridLayout_5.addWidget（self.forecast_4_type， 1， 0， 1， 1）
self.horizontalLayout.addLayout（self.gridLayout_5）
self.layoutWidget1 = QtWidgets.QWidget（self.centralWidget）
self.layoutWidget1.setGeometry（QtCore.QRect（10， 200， 120， 55））
self.layoutWidget1.setObjectName（“layoutWidget1”）
self.gridLayout_7 = QtWidgets.QGridLayout（self.layoutWidget1）
self.gridLayout_7.setContentsMargins（11， 11， 11， 11）
self.gridLayout_7.setSpacing（6）
self.gridLayout_7.setObjectName（“gridLayout_7”）
self.label_3 = QtWidgets.QLabel（self.layoutWidget1）
self.label_3.setMinimumSize（QtCore.QSize（30， 30））
self.label_3.setMaximumSize（QtCore.QSize（60， 30））
font = QtGui.QFont（）
font.setPointSize（9）
font.setBold（True）
font.setWeight（75）
self.label_3.setFont（font）
self.label_3.setText（“”）
self.label_3.setScaledContents（True）
self.label_3.setAlignment（QtCore.Qt.AlignRight|QtCore.Qt.AlignTrailing|QtCore.Qt.AlignVCenter）
self.label_3.setObjectName（“label_3”）
self.gridLayout_7.addWidget（self.label_3， 0， 0， 1， 1）
self.shidu = QtWidgets.QLabel（self.layoutWidget1）
#self.shidu.setFont（font）
self.shidu.setMinimumSize（QtCore.QSize（30， 30））
self.shidu.setMaximumSize（QtCore.QSize（60， 30））
font = QtGui.QFont（）
font.setPointSize（9）
font.setBold（False）
font.setWeight（50）
self.shidu.setFont（font）
self.shidu.setText（“”）
self.shidu.setAlignment（QtCore.Qt.AlignLeading|QtCore.Qt.AlignLeft|QtCore.Qt.AlignVCenter）
self.shidu.setObjectName（“shidu”）
self.gridLayout_7.addWidget（self.shidu， 0， 1， 1， 1）
self.layoutWidget2 = QtWidgets.QWidget（self.centralWidget）
self.layoutWidget2.setGeometry（QtCore.QRect（110， 200， 200， 55））
self.layoutWidget2.setObjectName（“layoutWidget2”）
self.gridLayout_8 = QtWidgets.QGridLayout（self.layoutWidget2）
self.gridLayout_8.setContentsMargins（11， 11， 11， 11）
self.gridLayout_8.setSpacing（6）
self.gridLayout_8.setObjectName（“gridLayout_8”）
self.fengxiang = QtWidgets.QLabel（self.layoutWidget2）
self.fengxiang.setMinimumSize（QtCore.QSize（70， 30））
self.fengxiang.setMaximumSize（QtCore.QSize（70， 30））
font = QtGui.QFont（）
font.setPointSize（9）
font.setBold（True）
font.setWeight（75）
self.fengxiang.setFont（font）
self.fengxiang.setText（“”）
self.fengxiang.setScaledContents（True）
self.fengxiang.setAlignment（QtCore.Qt.AlignRight|QtCore.Qt.AlignTrailing|QtCore.Qt.AlignVCenter）
self.fengxiang.setObjectName（“fengxiang”）
self.gridLayout_8.addWidget（self.fengxiang， 0， 0， 1， 1）
self.fengli = QtWidgets.QLabel（self.layoutWidget2）
self.fengli.setMinimumSize（QtCore.QSize（80， 30））
self.fengli.setMaximumSize（QtCore.QSize（80， 30））
font = QtGui.QFont（）
font.setPointSize（9）
font.setBold（False）
font.setWeight（50）
self.fengli.setFont（font）
self.fengli.setText（“”）
self.fengli.setObjectName（“fengli”）
self.gridLayout_8.addWidget（self.fengli， 0， 1， 1， 1）
self.webMessageText = QtWebKitWidgets.QWebView（self.centralWidget）
self.webMessageText.setGeometry（QtCore.QRect（10， 460， 331， 241））
self.webMessageText.setUrl（QtCore.QUrl（“about:blank”））
self.webMessageText.setObjectName（“webMessageText”）
self.webMemorandum = QtWebKitWidgets.QWebView（MainWindow）
self.webMemorandum.setGeometry（QtCore.QRect（10， 30， 331， 180））
self.webMemorandum.setUrl（QtCore.QUrl（“about:blank”））
self.webMemorandum.setObjectName（“webMemorandum”）
font = QtGui.QFont（）
font.setPointSize（8）
font.setBold（False）
font.setWeight（50）
self.helloWelcome = QtWidgets.QLabel（self.centralWidget）
self.helloWelcome.setGeometry（QtCore.QRect（20， 10， 251， 31））
self.helloWelcome.setFont（font）
self.helloWelcome.setText（“”）
self.helloWelcome.setObjectName（“helloWelcome”）
self.webZhishu = QtWebKitWidgets.QWebView（self.centralWidget）
self.webZhishu.setGeometry（QtCore.QRect（10， 290， 301， 150））
self.webZhishu.setUrl（QtCore.QUrl（“about:blank”））
self.webZhishu.setObjectName（“webZhishu”）
#MainWindow.setCentralWidget（self.centralWidget）
self.retranslateUi（MainWindow）
self.closeButton.clicked.connect（MainWindow.close）
QtCore.QMetaObject.connectSlotsByName（MainWindow）
def retranslateUi（self， MainWindow）：
_translate = QtCore.QCoreApplication.translate
MainWindow.setWindowTitle（_translate（“MainWindow”， “Weather”））
self.closeButton.setToolTip（_translate（“MainWindow”， “關閉”））
from PyQt5 import QtWebKitWidgets
#import res_rc
在這里進行的主要修改涉及兩個方面，一個方面是字體的調整，還有一個就是自適應的調整，因為設計的過程中是按照橫屏模式來進行設計的，而運行的過程中，會通過指令將系統調整成豎屏模式，因此就需要對其進行相關的調整，最終避免橫豎屏切換的過程中的字體變化過大，影響界面美觀。
以上就是整個智能魔鏡的UI設計，利用這個UI文件我們在智能魔鏡系統中可以方便的通過import該類來完成UI的生成，實現智能魔鏡的UI交互功能。
工商網監
評論