qml中的自定义单选按钮

问题描述：

我想要一个带3个按钮的窗口，但这个按钮应该像单选按钮一样工作！所以这是我的代码：qml中的自定义单选按钮

Rectangle { 
    id: sideButton 
    color: sideButtonMouseArea.containsMouse ? '#DDDDDD' : '#F4F4F4' 
    property string text: 'Button' 
    MouseArea { 
     id: sideButtonMouseArea 
     anchors.fill: parent 
     hoverEnabled: true 
     onClicked: { 
      parent.color = '#4872E8' 
      sideButtonLabel.color = '#E2EBFC' 
     } 
    } 

    Text { 
     id: sideButtonLabel 
     text: sideButton.text 
     font.pixelSize: 20 
     font.family: 'Tahoma' 
     anchors.centerIn: sideButton 
     color: '#787878' 
    } 
}

我用这个矩形而不是按钮，但它有一个proble当点击另一个按钮用于2end时间我怎么能解决？

也许你可以更具体地了解你的问题......也许你应该看看这个：http://www.catb.org/esr/faqs/smart-questions.html#classic – 2013-03-06 09:32:02

“我用这个矩形代替按钮“---所以，按钮是一个选项，但是，按钮不是qtquick核心的一部分。你使用什么外部库？ symbian/meego的'qt-components'还是Ubuntu手机的东西？另请检查，也许有一个单选按钮的标准组件？ – 2013-03-06 11:29:10

答

此代码的工作对我来说：

MyRadioGroup.qml

import QtQuick 1.0 

QtObject { 
    property Item selected : null 
}

MyRadioButton.qml

import QtQuick 1.0 

Rectangle { 
    id: sideButton 
    property string text: 'Button' 
    property MyRadioGroup radioGroup 

    color: radioGroup.selected === sideButton ? '#E2EBFC' : 
      (sideButtonMouseArea.containsMouse ? '#DDDDDD' : '#F4F4F4') 
    MouseArea { 
     id: sideButtonMouseArea 
     anchors.fill: parent 
     hoverEnabled: true 
     onClicked: sideButton.radioGroup.selected = sideButton 
    } 

    Text { 
     id: sideButtonLabel 
     text: sideButton.text 
     font.pixelSize: 20 
     font.family: 'Tahoma' 
     anchors.centerIn: sideButton 
     color: radioGroup.selected === sideButton ? '#E2EBFC' : '#787878' 
    } 
}

main.qml

import QtQuick 1.0 

Rectangle { 
    height: 600 
    width: 600 

    MyRadioGroup { 
     id: radioGroup1 
    } 

    Column { 
     anchors.fill: parent 

     MyRadioButton { 
      anchors { left: parent.left; right: parent.right } 
      text: "Button 1" 
      radioGroup: radioGroup1 
      height: 100 
     } 

     MyRadioButton { 
      anchors { left: parent.left; right: parent.right } 
      text: "Button 2" 
      radioGroup: radioGroup1 
      height: 100 
     } 

     MyRadioButton { 
      anchors { left: parent.left; right: parent.right } 
      text: "Button 3" 
      radioGroup: radioGroup1 
      height: 100 
     } 

     MyRadioButton { 
      anchors { left: parent.left; right: parent.right } 
      text: "Button 4" 
      radioGroup: radioGroup1 
      height: 100 
     } 
    } 
}

它做什么：我创建了容器MyRadioGroup来保存当前选定的项目。然后，我声明性地将其selected属性与我的MyRadioButton-s的color属性绑定在一起，因此它会更新每个selected更改。

具有说，请，你组件提供商不已经包含一些这样的东西---也许你正在重新发明轮子。

qml中的自定义单选按钮

相关推荐