Qt第五十八章：双向绑定-装饰器版-输入框增强

太过爱你忘了你带给我的痛 2024-03-25 22:40 83阅读 0赞

**目录**

一、定义实体类

二、输入框Ui

三、输入框逻辑

四、使用示例：

五、思考：双向绑定怎样避免死循环

--------------------

#### 一、定义实体类 ####

import os
    import platform
    from dataclasses import dataclass, field
    
    from PySide6 import QtWidgets
    from PySide6.QtCore import QObject, Signal
    from PySide6.QtGui import QIcon
    from PySide6.QtWidgets import QVBoxLayout, QLineEdit, QWidget, QApplication
    
    from components import Button
    from components.button.button_ui import ButtonData
    
    
    class InputData(QObject):
        extend_changed: Signal = Signal(object)
    
        def __init__(self, extend: object = None):
            super(InputData, self).__init__()
            # 可以存储一个附在输入框上的数据，我们可以很轻松的存储输入框所在行列信息和对象数据。
            self._extend: str
            # 初始化数据
            self.extend = extend
    
        @property
        def extend(self):
            return self._extend
    
        @extend.setter
        def extend(self, value):
            self._extend = value
            self.extend_changed.emit(self.extend)

#### 二、输入框Ui ####

import os
    import platform
    from dataclasses import dataclass, field
    
    from PySide6 import QtWidgets
    from PySide6.QtCore import QObject, Signal
    from PySide6.QtGui import QIcon
    from PySide6.QtWidgets import QVBoxLayout, QLineEdit, QWidget, QApplication
    
    from components import Button
    
    CSS_PATH = None
    if str(platform.system().lower()) == 'windows':
        path = __file__.replace(fr"\{os.path.basename(__file__)}", "").replace("\\\\", "\\")
        CSS_PATH = fr'{path}\input.css'
    elif str(platform.system().lower()) == 'linux':
        path = __file__.replace(fr"/{os.path.basename(__file__)}", "").replace("//", "/")
        CSS_PATH = fr'{path}/input.css'
    else:
        print(f"未知系统：{platform.system().lower()}")
    
    
    class InputUi(object):
        def setupUi(self, window):
            with open(CSS_PATH, "r", encoding="UTF-8") as f:
                window.setStyleSheet(f.read())
            window.setWindowTitle("Input")
            window.setWindowIcon(QIcon(':/icons/input.png'))
            # 垂直布局
            self.layout = QVBoxLayout()
            window.setLayout(self.layout)
            self._input = QLineEdit()
            self._input.setSizePolicy(QtWidgets.QSizePolicy.Policy.Expanding, QtWidgets.QSizePolicy.Policy.Expanding)
            self.layout.addWidget(self._input)

#### 三、输入框逻辑 ####

class Input(QWidget, InputUi):
    
        def __init__(self, inputData: InputData, parent=None):
            super(Input, self).__init__(parent=parent)
            self.setupUi(self)
            self.data = inputData
            self.__bind()
    
        def __bind(self):
            """
            数据绑定到控件属性
            """
            pass
    
        def v_model(self, model: object, field: str):
            """
            输入框绑定数据字段
            :param model: 数据模型
            :param field: 字段名称
            :return:
            """
    
            def bind(model: object | dict, field: str):
                if type(model) is dict:
                    model[field] = self._input.text()
                else:
                    model.__setattr__(field, self._input.text())
    
            self._input.textChanged.connect(lambda: bind(model, field))

#### 四、使用示例： ####

if __name__ == '__main__':
        app = QApplication([])
    
    
        @dataclass
        class Data(object):
            username: str = field(default='')
    
    
        data = Data()
    
        widget = QWidget()
        layout = QVBoxLayout()
        widget.setLayout(layout)
        input = Input(InputData())
        input.v_model(data, 'username')
        layout.addWidget(input)
        button = Button(ButtonData(text="OK"))
        button.clicked.connect(lambda: print(data))
        layout.addWidget(button)
        widget.show()
    
        app.exec()

![631b69ad85eb4908a09b737b911be128.png][]

#### 五、思考：双向绑定怎样避免死循环 ####

![965ebfbc14824079baff768a52c0870b.png][]

[631b69ad85eb4908a09b737b911be128.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/25/324aa9d4dc884c3ab9f39b36e26478cc.png
[965ebfbc14824079baff768a52c0870b.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/25/021063261c1749d981f335995167c0b3.png