2013-03-05 286 views
1

我想要一个带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时间 我怎么能解决?

+0

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

+0

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

回答

3

此代码的工作对我来说:

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更改。


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