Button 按钮

属性

  1. action : Action
  2. autoExclusive : bool
  3. autoRepeat : bool
  4. autoRepeatDelay : int
  5. autoRepeatInterval : int
  6. checkable : bool
  7. checked : bool
  8. display : enumeration
  9. down : bool    //按键是否按下，onDownChanged 当按键按下与弹开变化时可触发onDownChanged， 按下同时会触发pressed，松开会触发released
  10. icon
  11. //This property specifies whether the icon should be cached.
  12. 此属性指定是否应缓存图标。
  13. icon.cache : bool    
  15. icon.color : color
  16. icon.height : int
  17. icon.name : string
  18. icon.source : url
  19. icon.width : int
  20. implicitIndicatorHeight : real
  21. implicitIndicatorWidth : real
  22. indicator : Item
  23. pressX : real
  24. pressY : real
  25. pressed : bool
  26. text : string

信号

  1. canceled()
  2. clicked()
  3. doubleClicked()
  4. pressAndHold()
  5. pressed()
  6. released()
  7. toggled()

实例-按钮背景、图标、长按

  1. Button{
  2.         id: btn
  3.         width: 50
  4.         height: 40
  5. //        checkable: true     //按键是否可勾选（状态），按键会有按下与释放的不同状态展示
  6.         checkable: true
  7.         autoExclusive: true //自动排它，同时只能一个按键按下，一个时刻只能check一个控件
  8.         autoRepeat: true   //按下后不释放是否会重复触发按下信号
  9.         autoRepeatDelay: 1000   //按下时触发到稍后第一次触发时间间隔
  10.         autoRepeatInterval: 300 //按下后第一次触发后时间间隔
  11.         onAutoRepeatChanged: {
  12.             console.log("onAutoRepeatChanged down: ", down,"pressed: ", pressed)
  13.         }
  14.         onAutoRepeatIntervalChanged: {
  15.             console.log("onAutoRepeatIntervalChangeddown: ", down,"pressed: ", pressed)
  16.         }
  18.         onCheckableChanged: {
  19.             console.log("onCheckableChanged: ", checkable)
  20.         }
  21.         onDownChanged: {
  22.             console.log("onDownChanged: ", down)
  23.         }
  24.         onPressed: {
  25.             console.log("onPressed: ", pressed)
  26.         }
  27.     }
  1. Button{
  2.         id: btn
  3.         width: 150
  4.         height: 140
  5. //        text: qsTr("Button")
  6.         background: Rectangle {
  7.              anchors.fill: btn
  8.              opacity: enabled ? 1 : 0.3
  9.              color: btn.down ? "blue" : "red"
  10.              border.width: 3
  11.              border.color: {
  12.                  if(btn.pressed){
  13.                      return "green"
  14.                  }else{
  15.                      return "blue"
  16.                  }
  17.              }
  18.         }
  19. //        icon.source: "/2.jpg" 不能正常加载图片
  20.         indicator:Image {
  21.             id: icon
  22.             source: "/2.jpg"    //鼠标点击有效区域只是btn定义区域，不是icon区域
  23.             width: btn.width
  24.             height: btn.height
  25.         }
  26.         onClicked: console.log ("onclicked")
  27.     }

button 自定义

  1. Button{
  2.         id: control
  3.         width: 200
  4.         height: 60
  5.         padding: 0
  6.         text: "button"
  8. //        background:Rectangle{
  10. //        }
  12.         contentItem: Rectangle{ //对内容进行重绘
  13.             //默认背景色白色
  14. //            color: "transparent"    //透明
  15.             color: "red"
  16.             opacity: 0.8
  17.             Text{
  18.                 id: txt
  19.                 text: control.text
  20.                 font.pointSize: 20
  21.                 color: "green"
  22.             }
  23.             Image {
  24.                 id: img
  25.                 source: "/2.jpg"
  26.                 width: 50
  27.                 height: 50
  28.                 anchors.right: parent.right
  29.             }
  30.         }
  31.     }

image.png

CheckBox 勾选框

属性

  1. checkState : enumeration  
  2. nextCheckState : function    //修改点击按钮 按钮勾选的状态顺序，参数为一个回调函数
  3. tristate : bool     //三态使能 当开启的时候勾选框才会出现第三种状态
  5. checkState : enumeration  
  7. Qt.Unchecked //The checkbox is unchecked.
  8. Qt.PartiallyChecked //The checkbox is partially checked. This state is only used when tristate is enabled.
  9. Qt.Checked //The checkbox is checked.
  1. Column {
  2.          ButtonGroup {
  3.              id: childGroup
  4.              exclusive: false   //排他
  5.              checkState: parentBox.checkState  //按钮组的勾选状况和parentBox的勾选状态绑定
  6.          }
  8.          CheckBox {
  9.              id: parentBox
  10.              text: qsTr("Parent")
  11.              checkState: childGroup.checkState  //与按钮组勾选状态绑定
  12.          }
  14.          CheckBox {
  15.              checked: true
  16.              text: qsTr("Child 1")
  17.              leftPadding: indicator.width
  18.              ButtonGroup.group: childGroup  //指定所属组
  19.          }
  21.          CheckBox {
  22.              text: qsTr("Child 2")
  23.              leftPadding: indicator.width
  24.              ButtonGroup.group: childGroup
  25.          }
  26.      }

image.png

  1. CheckBox {
  2.          tristate: true
  3. //         checkState: allChildrenChecked ? Qt.Checked :
  4. //                        anyChildChecked ? Qt.PartiallyChecked : Qt.Unchecked
  6.          nextCheckState: function() {
  7.              if (checkState === Qt.Unchecked)
  8.                  return Qt.Checked
  9.              else if (checkState === Qt.Checked)
  10.                  return Qt.PartiallyChecked
  11.              else
  12.                  return Qt.Unchecked
  13.          }
  14.      }

ButtonGroup

属性

  1. buttons : list<AbstractButton>    //管理的按钮
  2. checkedButton : AbstractButton    //当组合是排他的且当前有选中按钮的时候返回当前选中的按钮，否则返回null
  3. exclusive : bool     //排他
  5. checkState : enumeration
  6. Qt.Unchecked //None of the buttons are checked.
  7. Qt.PartiallyChecked //Some of the buttons are checked.
  8. Qt.Checked //All of the buttons are checked.