DelayButton

延时按钮，当长按按钮，将会将会进行一个默认300ms的延时

属性

  1. delay : int        //延时时长，ms
  2. progress : real     //实时进度 0-1

信号

  1. activated()    //当按钮延时进度到达1，且选中按钮的情况激活该信号

实例

  1. DelayButton
  2. {
  3.   width: 150
  4.   height: 50
  5.   delay: 200
  6.   onProgressChanged:
  7.   {
  8.     console.log("progress: ", progress)
  9.   }
  10. }

RadioButton

单选按钮，当多个单选按钮对象放到同一个父对象中，就会自动的实现排他性，不需要如勾选框那样放到一个Group中并设置exclusive或者设置单个按钮的排他属性autoExclusive

  1. Column {
  2.      RadioButton {
  3.          checked: true
  4.          text: qsTr("First")
  5.      }
  6.      RadioButton {
  7.          text: qsTr("Second")
  8.      }
  9.      RadioButton {
  10.          text: qsTr("Third")
  11.      }
  12.  }

image.png

Switch

开关按钮

属性

  1. position : real
  2. visualPosition : real     //mirred 镜像时才会有效

实例

  1. ButtonGroup{
  2.         id: btngrp
  3.         exclusive: true
  4.         buttons: col.children
  5.     }
  6.     Column {
  7.         id: col
  9.          Switch {
  10.              LayoutMirroring.enabled: true
  11.              autoExclusive: true
  12.              text: qsTr("Wi-Fi")
  13.              onPositionChanged: {   
  14.                  console.log("pos: ", position)
  15.              }
  16.              onVisualPositionChanged: { //视觉上左到右的进度
  17.                  console.log("visiblepos: ", visualPosition)
  18.              }
  19.          }
  20.          Switch {
  21.              autoExclusive: true
  22.              text: qsTr("Bluetooth")
  23.          }
  24.      }

image.png

TabButton

表格按钮，自带排他性，主要是用于切换页面使用。

  1. TabBar {
  2.          TabButton {
  3.              text: qsTr("Home")
  4.          }
  5.          TabButton {
  6.              text: qsTr("Discover")
  7.          }
  8.          TabButton {
  9.              text: qsTr("Activity")
  10.          }
  11.      }

RoundButton

圆形按钮，继承与Button，增加radius属性

  1. radius : real        //边角弧度半径
  1. RoundButton {
  2.         id:rbtn
  3.          text: "\u2713" // Unicode Character 'CHECK MARK'
  4.          onClicked: textArea.readOnly = true
  5.          radius: 10 //边角弧度半径
  6.      }
  8.     Button{
  9.         anchors.top: rbtn.bottom
  10.         width: rbtn.width
  11.         height: rbtn.height
  12.         background: Rectangle{
  13.             radius: 15
  14.             color: "red"
  15.         }
  16.     }

image.png

ToolButton

  1. ToolBar {
  2.          Row {
  3.              anchors.fill: parent
  4.              ToolButton {
  5.                  text: qsTr("‹")
  6.                  onClicked: stack.pop()
  7.              }
  8.              Label {
  9.                  text: "Title"
  10.                  elide: Label.ElideRight
  11.                  horizontalAlignment: Qt.AlignHCenter
  12.                  verticalAlignment: Qt.AlignVCenter
  14.              }
  15.              ToolButton {
  16.                  text: qsTr("⋮")
  17.                  onClicked: menu.open()
  18.              }
  19.          }
  20.      }

image.png

自定义按钮

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