Кнопки Qt для Qt похожи на UISegmentedControl?

Question

Как настроить Qt-переключатели, чтобы выглядеть как UISegmentedControl IOS? Вот пример такого контроля:

Аналогичный пример из Интернета, что также демонстрирует желаемое поведение кнопок, отображается под заголовком «наборы по горизонтали радио кнопки» здесь:

http://jquerymobile.com/demos/1.0a4.1/docs/forms/forms-radiobuttons.html

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

Answer 1

можно получить желаемое поведение подклассов в QRadioButton и реализовав paintEvent. paintEvent может использовать встроенный рендеринг Qt для QPushButton в сочетании с использованием стилей таблицы Qt для достижения желаемого внешнего вида (нажатие кнопок вместе и округление кнопок в конце).

Вот несколько примеров кода from the PySide documentation, что почти точно то, что нужно (и также очень похожи/идентичны соответствующим кодом PyQt):

def paintEvent(self, qpaintevent): 
    option = QStyleOptionButton() 
    option.initFrom(self) 
    if isDown(): 
     option.state = QStyle.State_Sunken 
    else: 
     option.state = QStyle.State_Raised 

    if self.isDefault(): 
     option.features = option.features or QStyleOptionButton.DefaultButton 
    option.text = self.text() 
    option.icon = self.icon() 

    painter = QPainter(self) 
    self.style().drawControl(QStyle.CE_PushButton, option, painter, self) 

Answer 2

Если вы хотите сделать это с помощью QML, это будет довольно легко. Вот краткая демонстрация того, что я сделал за минуту. Затем вам необходимо соответствующим образом подключить его к тому, для чего вы его используете. Если вы хотите сделать это более привлекательным, тогда я предлагаю использовать файлы изображений вместо прямоугольников.

import QtQuick 1.1 

Rectangle { 
    width: 360 
    height: 360 
    color: "grey" 

    Item{ 
     id: root 
     anchors.centerIn: parent 

     Rectangle{ 
      id: button 
      radius: 5 
      color: "transparent" 
      width: 100 
      height: 50 
      smooth: true 

      Rectangle{ 
       id: leftButton 
       height: parent.height 
       width: 45 
       color: "black" 
       anchors.left: parent.left 
       anchors.leftMargin: parent.radius 
       smooth: true 
      } 
      Rectangle{ 
       id:leftButtonEdge 
       height: parent.height 
       width: 10 
       radius: 5 
       anchors.right: leftButton.left 
       anchors.rightMargin:-width/2 
       color: "black" 
       smooth: true 
      } 

      Rectangle{ 
       id: rightButton 
       height: parent.height 
       width: 45 
       color: "white" 
       anchors.right: parent.right 
       anchors.rightMargin: parent.radius 
       smooth: true 
      } 
      Rectangle{ 
       id:rightButtonEdge 
       height: parent.height 
       width: 10 
       radius: 5 
       anchors.left: rightButton.right 
       anchors.leftMargin:-width/2 
       color: "white" 
       smooth: true 
      } 

      MouseArea{ 
       anchors.fill: parent 
       onClicked: { 
        console.log("Clicked") 
        if(rightButton.color == "#000000"){ 
         rightButton.color = "white" 
         rightButtonEdge.color = "white" 
         leftButton.color = "black" 
         leftButtonEdge.color = "black" 
        }else{ 
         rightButton.color = "black" 
         rightButtonEdge.color = "black" 
         leftButton.color = "white" 
         leftButtonEdge.color = "white" 
        } 
       } 
      } 
     } 
    } 
}