Qt Designer,仿作一个ui界面的练习(四):编写代码

一、新建项目,目录结构如图:

 PYS下存放脚本,SRC下存放资源文件,UIS下存放组态画面文件。

在每个子目录下都有__init__.py文件,系统会自动将其识别为软件包。

其中一个UIS.__init__.py文件的内容:

# import os

# 定义需要导入主脚本的所有画面,这是自动的方法,优点是可以自动生成画面列表,缺点是在主脚本中不能自动识别画面
# all_py = []
# for file in os.listdir('../UIS'):
#     file_name, file_extension = os.path.splitext(file)
#     if file_extension == '.py' and file_name != '__init__':
#         all_py.append(file_name)
# __all__ = all_py
# 手动定义需要导入的画面列表,在主脚本中可以自动识别画面名称
__all__ = ['demo_ui']   # 导入画面

__all__列表定义了在别的脚本中调用本软件包,例如:

from UIS import *

需要导入的所有脚本列表。

二、使用uic工具将demo.ui转为脚本文件demo_ui.py。

三、使用RCC工具将资源文件media.qrc转为media_rc.py,并将其剪切粘贴至PYS文件夹(由于demo_ui.py是自动生成的,所以它对资源文件media_rc.py的调用时默认脚本文件夹)。

四、编写主脚本:

# encoding: utf-8

import sys
import time
from functools import partial

from PySide6.QtCore import Signal, QTimer, QObject, QPropertyAnimation, QEasingCurve
from PySide6.QtWidgets import QMainWindow, QApplication
# 导入画面
from UIS import *
# 导入脚本
from PYS import *


# 主画面类
class MainWindow(QMainWindow, demo_ui.Ui_MainWindow):
    def __init__(self):
        super().__init__()
        self.setupUi(self)
        self.run()  # 初始化
        self.slot_signal()  # 信号与槽

    # 主画面的初始化
    def run(self):
        self.move(200, 200)
        self.show()  # 显示画面
        self.btnHome.setProperty('selected', True)
        self.btnHome.setStyleSheet(self.btnHome.styleSheet())  # 刷新显示)
        # 主画面的左边栏动画定义
        ui.animate_leftFrame = QPropertyAnimation(self.leftFrame, b"minimumWidth")  # 定义动画
        ui.animate_leftFrame.setDuration(300)  # 动画时间
        # 左边栏的按钮站
        self.left_button_station = [x for x in self.left_buttonsBox.children() if x.isWidgetType()]

    # 信号与槽
    def slot_signal(self):
        # 时钟显示槽函数
        def dateTimeShow_setText():
            now = time.localtime()
            time_str = time.strftime("%Y-%m-%d %H:%M:%S", now)
            self.dateTimeShow.setText(time_str)

        ui.secondSignal.connect(dateTimeShow_setText)  # 槽函数的连接

        # toggle按钮点击的槽函数
        def btnToggle_clicked():
            # 执行动画
            JOBS.btn_animation(self.leftFrame, ui.animate_leftFrame)
            # 刷新显示
            for b in self.left_button_station:
                b.setProperty('spread', not b.property('spread'))
                b.setStyleSheet(b.styleSheet())  # 刷新显示

        self.btnToggle.clicked.connect(btnToggle_clicked)

        # 左边栏按钮站点击的槽函数
        def left_buttons_clicked(button):
            def one_btn_clicked():
                # 设置各个按钮的显示外观
                def set_styleSheet():
                    for b in self.left_button_station:
                        if b is not button:
                            b.setProperty('selected', False)
                        else:
                            b.setProperty('selected', True)
                        b.setStyleSheet(b.styleSheet())  # 刷新显示
                set_styleSheet()
                # 每个按钮的功能函数
                if button is self.btnHome:
                    self.stackedWidget.setCurrentWidget(self.page_1)
                elif button is self.btnNew:
                    self.stackedWidget.setCurrentWidget(self.page_2)
                elif button is self.btnSave:
                    self.stackedWidget.setCurrentWidget(self.page_3)
                elif button is self.btnExit:
                    self.stackedWidget.setCurrentWidget(self.page_4)

            return one_btn_clicked

        # 左边栏按钮站的按钮们点击的连接
        for b in self.left_button_station:
            b.clicked.connect(partial(left_buttons_clicked(b)))


# 项目的定义
class UI(QObject):  # 将项目定义为QObject,用来管理项目级别的信号和变量
    secondSignal = Signal()  # 这是一个项目级别的信号,每秒发出一个信号

    def __init__(self):
        super().__init__()
        self.timer = QTimer()  # 一个项目级别的定时器
        self.run()  # 初始化
        self.slot_signal()  # 信号与槽

    # 项目的初始化
    def run(self):
        self.timer.start(1000)  # 定时器启动

    # 信号与槽
    def slot_signal(self):
        # 定时器超时槽函数
        def self_timer_timeout():
            self.secondSignal.emit()  # 秒信号发射

        self.timer.timeout.connect(self_timer_timeout)


# 工作函数
class JOBS:
    @staticmethod
    # 按钮的动画
    def btn_animation(obj, animation, start=50, end=150):
        start_size = obj.width()
        if obj.width() == start:
            end_size = end
        else:
            end_size = start
        animation.setStartValue(start_size)
        animation.setEndValue(end_size)
        # animation.setEasingCurve(QEasingCurve.Linear)
        animation.setEasingCurve(QEasingCurve.InOutQuart)
        animation.start()

    # 工作函数2
    @staticmethod
    def Job_todo_2(var):
        pass


# #############################主程序##################################
if __name__ == '__main__':
    app = QApplication(sys.argv)
    # 项目的实例化
    ui = UI()
    ui.windows = []  # 所有用到的窗口

    # 初始化画面
    mainWindow = MainWindow()  # 主画面实例化
    ui.windows.append(mainWindow)

    sys.exit(app.exec())

至此,完成了一个小项目的demo。 这里没有像参考范例中那样搞专门的功能脚本文件夹,一方面是因为项目比较小没必要,另一方面,把功能函数放在主函数内更方便,因为可以直接在功能函数中操作一些项目范围内的全局变量,不用传递对象,更方便一些。

  • 5
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
很好,下面是一个简单的示例: HTML代码: ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Apple Website Clone</title> <link rel="stylesheet" href="style.css"> </head> <body> <header> <nav> <ul> <li><a href="#">Mac</a></li> <li><a href="#">iPad</a></li> <li><a href="#">iPhone</a></li> <li><a href="#">Watch</a></li> <li><a href="#">TV</a></li> <li><a href="#">Music</a></li> <li><a href="#">Support</a></li> <li><a href="#">Search</a></li> <li><a href="#">Bag</a></li> </ul> </nav> </header> <div class="hero"> <h1>Welcome to Apple</h1> <p>Discover the innovative world of Apple and shop everything iPhone, iPad, Apple Watch, Mac, and Apple TV, plus explore accessories, entertainment, and expert device support.</p> <button>Learn More</button> </div> <div class="products"> <h2>Popular Products</h2> <ul> <li> <img src="https://www.apple.com/v/home/ep/images/heroes/iphone-12-pro/hero__dvsbeydztgqy_small_2x.jpg" alt="iPhone 12 Pro"> <h3>iPhone 12 Pro</h3> <p>From $999</p> </li> <li> <img src="https://www.apple.com/v/home/ep/images/heroes/ipad-pro/hero__dvsbeydztgqy_small_2x.jpg" alt="iPad Pro"> <h3>iPad Pro</h3> <p>From $799</p> </li> <li> <img src="https://www.apple.com/v/home/ep/images/heroes/macbook-air/hero__dvsbeydztgqy_small_2x.jpg" alt="MacBook Air"> <h3>MacBook Air</h3> <p>From $999</p> </li> </ul> </div> <div class="footer"> <p>© 2021 Apple Inc. All rights reserved.</p> </div> </body> </html> ``` CSS代码: ```css * { margin: 0; padding: 0; box-sizing: border-box; } header { background-color: #000; color: #fff; padding: 10px; display: flex; justify-content: space-between; align-items: center; position: fixed; top: 0; left: 0; right: 0; } nav ul { display: flex; list-style: none; } nav ul li a { color: #fff; text-decoration: none; padding: 10px; } .hero { background-image: url(https://www.apple.com/v/home/ep/images/heroes/iphone-12-pro/hero__dvsbeydztgqy_small_2x.jpg); height: 500px; background-size: cover; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; } .hero h1 { font-size: 60px; text-shadow: 2px 2px #000; } .hero p { font-size: 20px; margin-bottom: 20px; } .hero button { padding: 10px 20px; background-color: #fff; color: #000; border: none; font-size: 18px; border-radius: 30px; } .products { margin-top: 100px; text-align: center; } .products h2 { font-size: 40px; margin-bottom: 50px; } .products ul { display: flex; justify-content: center; list-style: none; } .products li { margin: 0 50px; } .products img { width: 300px; height: 200px; margin-bottom: 20px; } .products h3 { font-size: 30px; margin-bottom: 10px; } .products p { font-size: 20px; } .footer { background-color: #000; color: #fff; padding: 10px; text-align: center; position: fixed; bottom: 0; left: 0; right: 0; } ``` 你可以在浏览器中打开HTML文件查看效果。这只是一个简单的示例,你可以根据需要进行修改和添加更多内容。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

深蓝海拓

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值