PyQt5自定义节点Widget：添加红色标记Socket至文本旁

Got it, let's tackle adding those red socket markers next to your text elements! Here's how you can modify your existing code to implement them smoothly:

First, create a custom SocketWidget class to represent those red markers—this gives you full control over their appearance:

from PyQt5.QtWidgets import *
from PyQt5.QtGui import *
from PyQt5.QtCore import *

class SocketWidget(QWidget):
    def __init__(self, parent=None):
        super().__init__(parent)
        # Fixed size for consistent socket appearance
        self.setFixedSize(12, 12)
    
    def paintEvent(self, event):
        painter = QPainter(self)
        painter.setRenderHint(QPainter.Antialiasing)
        # Draw a smooth red filled circle
        painter.setBrush(QColor("#ff4444"))
        painter.setPen(QColor("#cc0000"))
        painter.drawEllipse(1, 1, self.width()-2, self.height()-2)

Next, update your NNodeLayout class to pair each label/input with a socket using horizontal layouts. This keeps the socket aligned right next to the text element:

class NNodeLayout(QWidget):
    def __init__(self, container):
        super(NNodeLayout, self).__init__(container)
        self.node_frame = QFrame(container)
        self.node_frame.setFrameShape(QFrame.StyledPanel)
        self.node_frame.setStyleSheet('background-color: blue')
        self.node_frame.setMinimumSize(50, 50)
        self.node_frame_layout = QVBoxLayout()
        self.node_frame_grid_layout = QGridLayout()
        self.node_frame_layout.setSpacing(0)
        self.node_frame_layout.setContentsMargins(0, 0, 0, 0)
        self.node_frame_grid_layout.setContentsMargins(5, 5, 5, 5)  # Added top margin for better spacing
        self.node_frame_grid_layout.setSpacing(10)  # Space between rows
        self.node_frame_layout.addWidget(QLabel('hello: '))
        self.node_frame_layout.addLayout(self.node_frame_grid_layout)
        self.node_frame.setLayout(self.node_frame_layout)

    def n_label(self, lbl_name):
        print(lbl_name)
        # Wrap label and socket in a horizontal layout
        h_layout = QHBoxLayout()
        h_layout.setSpacing(5)
        
        lbl = QLabel(lbl_name)
        lbl.setStyleSheet('background-color:blue; color:white')  # White text for contrast
        
        # Add socket to the left (swap order to put it on the right)
        socket = SocketWidget()
        h_layout.addWidget(socket)
        h_layout.addWidget(lbl)
        
        self.node_frame_grid_layout.addLayout(h_layout)

    def n_input(self, place_holder = ""):
        # Wrap input and socket in a horizontal layout
        h_layout = QHBoxLayout()
        h_layout.setSpacing(5)
        
        text_input = QLineEdit()
        text_input.setPlaceholderText(place_holder)  # Fixed typo: used setter instead of getter
        
        # Add socket to the left
        socket = SocketWidget()
        h_layout.addWidget(socket)
        h_layout.addWidget(text_input)
        
        self.node_frame_grid_layout.addLayout(h_layout)

    # Rest of your existing methods stay the same
    def n_input_point_shape_color(self):
        pass
    def n_top_bar(self):
        pass
    def n_move(self, x, y):
        self.node_frame.move(x, y)
    def n_resize(self, width, height):
        self.node_frame.resize(width, height)
    def n_geometry(self):
        return self.node_frame.geometry()

Key Changes Explained: #

• Custom SocketWidget: Uses paintEvent to draw a crisp red circle. You can tweak the size, color, or even switch to a square by replacing drawEllipse with drawRect.
• Horizontal Layouts: Each label/input is paired with a socket in a QHBoxLayout, ensuring they stay aligned side-by-side.
• Typo Fix: Corrected text_input.placeholderText(place_holder) to text_input.setPlaceholderText(place_holder) (since placeholderText() is a getter method, not a setter).
• Visual Tweaks: Added white text to labels for better readability against the blue background, adjusted margins/spacing to clean up the layout.

Test the Widget #

Add this main block to see your updated node in action:

if __name__ == "__main__":
    import sys
    app = QApplication(sys.argv)
    window = QWidget()
    window.setGeometry(100,100,300,300)
    layout = QVBoxLayout(window)
    
    node = NNodeLayout(window)
    node.n_label("First Label")
    node.n_input("Enter text here")
    node.n_label("Second Label")
    
    layout.addWidget(node.node_frame)
    window.show()
    sys.exit(app.exec_())

This will create a blue node with red sockets next to each label and input field, just like you wanted!

内容的提问来源于stack exchange，提问作者JacksonPro