Горизонтально центральная метка переключателя

Question

Я использую переключатели для создания эффекта вертикальных вкладок. Я получил все, чтобы работать, но я застрял в выполнении чего-то, что я уверен, будет легко.

В этой части кода я go через список имен вкладок и генерировать переключатели для каждый:

def _init_vertical_tabs(self, layout, row):
    """Initialize vertical tabs"""
    tabs_widget = QtWidgets.QWidget()
    tabs_widget.setObjectName("tabs")
    vertical_tabs_layout = QtWidgets.QVBoxLayout()
    vertical_tabs_layout.setSpacing(0)
    vertical_tabs_layout.setContentsMargins(0, 0, 0, 0)
    vertical_tabs_layout.setAlignment(QtCore.Qt.AlignCenter)
    tabs_widget.setLayout(vertical_tabs_layout)
    layout.addWidget(tabs_widget, row, 0, len(self.tabs), 1)

    tabs_widget.setMinimumHeight(self.parent_height)
    tabs_widget.setMinimumWidth(self.parent_width*0.15)
    tabs_widget.setMaximumHeight(self.parent_height)
    tabs_widget.setMaximumWidth(self.parent_width*0.15)

    tab_to_widget = dict()
    for tab in self.tabs:
        tab_button = self._create_tab(tab, vertical_tabs_layout, self.parent_width*0.15, self.parent_height/len(self.tabs),)
        tab_to_widget[tab] = tab_button

def _create_tab(self, tab, layout, width, height):
    """Basic method to create a fake tab"""
    button = QtWidgets.QRadioButton(tab)
    button.setContentsMargins(0, 0, 0, 0)
    l = lambda tab_name = tab: self.toggle_visibility_tabs(tab_name)
    button.clicked.connect(l)

    button.setMinimumHeight(height)
    button.setMinimumWidth(width)
    button.setMaximumHeight(height)
    button.setMaximumWidth(width)

    layout.addWidget(button)

Затем я применил немного css:

    QWidget#tabs{
  color: #ffffff;
  background-color: #005073;
  border: 0px solid #e54d42;
  text-align: center;
}

QWidget#tabs QRadioButton{
  color: #ffffff;
  font-weight: 400;
  font-size: 20pt;
  border-radius: 0px;
  background-color: #003850; /*QLinearGradient(x1:0, y1:0, x2:0, y2:1, stop:0 #003850, stop:0.5 #005073, stop:1 #003850);*/
  margin: 0px;
  font-family: Arial, Helvetica, sans-serif;
  text-align: center;
}

QWidget#tabs QRadioButton#Validator{
  border-bottom-left-radius: 60px;
  border-left: none;
}

QWidget#tabs QRadioButton::indicator{
  width: 0px;
  height: 0px;
  border-radius: 0px;
  border: 1px solid #e54d42;
  border-top: none;
  border-right: none;
  border-left: none;
  font-family: Arial, Helvetica, sans-serif;
  text-align: center;
}

QWidget#tabs QRadioButton:hover, QWidget#tabs QRadioButton:selected,  QWidget#tabs QRadioButton:checked{
  border-left: 30px solid #e54d42;
  color: #e54d42;
}

И результат:

Я бы вместо того, чтобы поместить текст по центру, я попытался использовать политики размеров и получил следующее:

Но это не совсем то, что я хотел, сначала переключатель метки по-прежнему выровнены по левому краю, и поскольку радио короче, красная граница выбранных, очевидно, больше не слева. Может кто-нибудь сказать мне, есть ли простой способ добиться этого либо в css, либо в python коде? Я тоже попробовал text-align, но тоже не сработало.

Спасибо!

Answer 1

Использование одних таблиц стилей для этого практически невозможно. Я бы посоветовал вам смешивать таблицы стилей и , настраиваемые для рисования.

Прежде всего, отредактируйте таблицу стилей, убедившись, что все цвета для ваших радиокнопок установлены на transparent.

Затем создайте подкласс QRadioButton, который одновременно нажимает кнопку aws, вызывая реализацию базового класса и dr aws с указанным цветом и шрифтом.

class CustomRadio(QtWidgets.QRadioButton):
    def paintEvent(self, event):
        # draw the widget as paintEvent normally does
        super().paintEvent(event)

        # create a new painter on the widget
        qp = QtGui.QPainter(self)
        # create a styleoption and init it with the button
        opt = QtWidgets.QStyleOptionButton()
        self.initStyleOption(opt)

        # now we can know if the widget is hovered and/or checked
        if opt.state & (QtWidgets.QStyle.State_MouseOver | QtWidgets.QStyle.State_On):
            # if it is, set the color accordingly
            qp.setPen(QtGui.QColor('#e54d42'))
        else:
            qp.setPen(QtCore.Qt.white)
        # finally, draw the text
        qp.drawText(self.rect(), 
            QtCore.Qt.AlignCenter | QtCore.Qt.TextShowMnemonic, self.text())

Если вы используете Designer, вам нужно будет продвигать спинбоксы:

• выбрать все переключатели, щелкнуть правой кнопкой мыши по любой из них и выбрать Promote to... из контекстного меню;
• убедитесь, что в поле со списком «Имя базового класса» установлено значение «QRadioButton»;
• в поле «Имя повышенного класса» напишите «CustomRadio» (имя подкласс выше);
• в поле «Файл заголовка» введите имя файла, в котором вы сохранили подкласс, без расширения (например, если вы используете main.py, напишите «main») ; помните, что путь относительно пути файла ui (или py-файла, если вы используете pyui c), поэтому, если ui / py находится в главной папке вашей программы, файл подкласса находится в " подклассы "и называется" myrad ios .py ", вам нужно будет написать" subclasses.myrad ios "там;
• нажмите" Добавить ", чтобы создать новый повышенный класс, а затем «Продвигать» для фактического продвижения выбранных радиостанций;
• , если вы не выбирали все рад ios раньше, теперь вы можете продвигать их, используя новый пункт «Пользовательское радио» в подменю Promote to контекстное меню;

Сохраните файл пользовательского интерфейса, сгенерируйте новый файл python, если вы используете pyui c, и все готово.