Adding an icon to a ctkCheckablePushButton is difficult

Development
1

Does someone know why I cannot get the right side icon to not render over the text?

class CustomCheckablePushButton(ctk.ctkCheckablePushButton):
    def __init__(self, text="", parent=None):
        super().__init__(parent)
        
        # Create main layout
        self._mainLayout = qt.QHBoxLayout(self)
        self._mainLayout.setContentsMargins(8, 8, 8, 8)
        self._mainLayout.setSpacing(12)  # Increased spacing between text and icon
        
        # Create a widget to hold the text
        self.textLabel = qt.QLabel(text)
        self.textLabel.setWordWrap(True)  # Allow text to wrap
        self.textLabel.setAlignment(qt.Qt.AlignLeft | qt.Qt.AlignVCenter)
        
        # Create a widget to hold the icon
        self.iconLabel = qt.QLabel()
        self.iconLabel.setAlignment(qt.Qt.AlignCenter)
        
        # Add widgets to main layout
        self._mainLayout.addWidget(self.textLabel, 1)  # Text widget takes up remaining space
        self._mainLayout.addWidget(self.iconLabel, 0)  # Icon widget doesn't expand
        
        # Store the right icon and its size
        self._rightIcon = qt.QIcon()
        self._rightIconSize = qt.QSize(32, 32)  # Default size 32x32
        
        # Set size policy to allow horizontal expansion
        self.setSizePolicy(qt.QSizePolicy.Expanding, qt.QSizePolicy.Preferred)

    def setText(self, text):
        self.textLabel.setText(text)
        self.updateGeometry()

    def text(self):
        return self.textLabel.text()

    def setRightIcon(self, icon):
        self._rightIcon = icon
        self._updateRightIcon()

    def setRightIconSize(self, size):
        self._rightIconSize = size
        self._updateRightIcon()

    def _updateRightIcon(self):
        if self._rightIcon.isNull():
            self.iconLabel.hide()
        else:
            pixmap = self._rightIcon.pixmap(self._rightIconSize)
            self.iconLabel.setPixmap(pixmap)
            self.iconLabel.setFixedSize(self._rightIconSize)
            self.iconLabel.show()
        self.updateGeometry()

    def sizeHint(self):
        textWidth = self.textLabel.sizeHint().width()
        iconWidth = self._rightIconSize.width() if not self._rightIcon.isNull() else 0
        width = textWidth + iconWidth + self._mainLayout.spacing() + self._mainLayout.contentsMargins().left() + self._mainLayout.contentsMargins().right()
        height = max(self.textLabel.sizeHint().height(), self._rightIconSize.height()) + self._mainLayout.contentsMargins().top() + self._mainLayout.contentsMargins().bottom()
        return qt.QSize(width, height)

    def minimumSizeHint(self):
        return self.sizeHint()

    def resizeEvent(self, event):
        super().resizeEvent(event)
        self.adjustSize()  # Ensure the button resizes to fit content

Here is my example use case:

mybutton = CustomCheckablePushButton()
mybutton.text = (
    "Update\nvisualization"
)

updatePlanningIconPath = os.path.join(DOWNLOADPATH,'update_48.jpg')

mybutton.setRightIcon(qt.QIcon(updatePlanningIconPath))
mybutton.setRightIconSize(qt.QSize(32, 32))

Here is a screenshot of how it renders:
image

Here is the icon:

Hope you can help :slight_smile:

2

This was useful enough for me:

class checkablePushButtonWithIcon(ctk.ctkCheckablePushButton):
    def __init__(self, text="", icon=qt.QIcon(), parent=None):
        super().__init__(parent)
        self.text = text
        #
        self._mainLayout = qt.QHBoxLayout(self)
        self._mainLayout.setContentsMargins(0, 0, 0, 0)
        #self._mainLayout.setSpacing(15)
        #self._mainLayout.setSpacing(300)
        #
        self.icon = icon
        self._iconSize = qt.QSize(36, 36)
        pixmap = self.icon.pixmap(self._iconSize)
        self._iconLabel = qt.QLabel()
        self._iconLabel.setAlignment(qt.Qt.AlignCenter)
        self._iconLabel.setPixmap(pixmap)
        self._iconLabel.setFixedSize(self._iconSize)
        self._mainLayout.addSpacing(self.sizeHint.width())
        self._mainLayout.addWidget(self._iconLabel)
        self.setMinimumWidth(self.sizeHint.width() + self._iconSize.width())
        self.setSizePolicy(qt.QSizePolicy.Maximum, qt.QSizePolicy.Fixed)