电子发烧友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交互功能。
工商网监
评论