PySide开发， 是否可以像React一样进行组件的封装，到时候进行复用？

Question

请问一下：PySide开发，
1、是否可以像React一样进行组件的封装，到时候进行复用？
2、如果可以，那么可以像React一样进行数据的props传入展示吗？

Answer 1

from PySide6.QtWidgets import QWidget, QVBoxLayout, QPushButton, QLabel
from PySide6.QtCore import Signal, Slot

class UserCard(QWidget):
    # 定义信号(类似于回调)
    userClicked = Signal(str)  # 发送用户ID
    
    def __init__(self, user_data, parent=None):
        """
        user_data: 类似React props的数据字典
        {
            "id": "user123",
            "name": "张三",
            "avatar": "path/to/avatar.png",
            "role": "管理员",
            "is_online": True
        }
        """
        super().__init__(parent)
        self.user_id = user_data.get("id", "")
        
        # 创建布局
        layout = QVBoxLayout(self)
        
        # 创建子组件
        self.avatar = QLabel()
        self.avatar.setStyleSheet(f"image: url({user_data.get('avatar', '')});")
        
        self.name_label = QLabel(user_data.get("name", ""))
        self.role_label = QLabel(user_data.get("role", ""))
        
        # 根据props设置样式
        if user_data.get("is_online", False):
            status_text = "在线"
            status_color = "green"
        else:
            status_text = "离线"
            status_color = "gray"
            
        self.status_label = QLabel(status_text)
        self.status_label.setStyleSheet(f"color: {status_color}")
        
        self.action_button = QPushButton("查看详情")
        self.action_button.clicked.connect(self._on_button_click)
        
        # 添加到布局
        layout.addWidget(self.avatar)
        layout.addWidget(self.name_label)
        layout.addWidget(self.role_label)
        layout.addWidget(self.status_label)
        layout.addWidget(self.action_button)
    
    def update_user_data(self, new_data):
        """更新组件数据(类似React组件更新props)"""
        if "name" in new_data:
            self.name_label.setText(new_data["name"])
        
        if "role" in new_data:
            self.role_label.setText(new_data["role"])
            
        if "avatar" in new_data:
            self.avatar.setStyleSheet(f"image: url({new_data['avatar']});")
            
        if "is_online" in new_data:
            if new_data["is_online"]:
                self.status_label.setText("在线")
                self.status_label.setStyleSheet("color: green")
            else:
                self.status_label.setText("离线")
                self.status_label.setStyleSheet("color: gray")
    
    @Slot()
    def _on_button_click(self):
        # 发送信号,类似React的回调函数
        self.userClicked.emit(self.user_id)

用这个组件：

from PySide6.QtWidgets import QMainWindow, QWidget, QVBoxLayout

class MainWindow(QMainWindow):
    def __init__(self):
        super().__init__()
        
        central_widget = QWidget()
        self.setCentralWidget(central_widget)
        
        main_layout = QVBoxLayout(central_widget)
        
        # 创建用户卡片组件并传入"props"
        user1_data = {
            "id": "user123",
            "name": "张三",
            "avatar": "path/to/avatar1.png",
            "role": "管理员",
            "is_online": True
        }
        
        user2_data = {
            "id": "user456",
            "name": "李四",
            "avatar": "path/to/avatar2.png",
            "role": "普通用户",
            "is_online": False
        }
        
        self.user_card1 = UserCard(user1_data)
        self.user_card2 = UserCard(user2_data)
        
        # 连接信号(类似React的回调)
        self.user_card1.userClicked.connect(self.handle_user_click)
        self.user_card2.userClicked.connect(self.handle_user_click)
        
        main_layout.addWidget(self.user_card1)
        main_layout.addWidget(self.user_card2)
    
    @Slot(str)
    def handle_user_click(self, user_id):
        print(f"用户 {user_id} 被点击")
        
        # 动态更新组件数据
        if user_id == "user123":
            self.user_card1.update_user_data({"is_online": False})