QML Button 部件的使用

按钮也是程序开发中最经常用到的部件，当然其也是比较简单，只需要懂得最基本的操作即可；

Button {id: btnwidth: 100height: 50
}

生成一个最基本的按钮

text 属性可以设置按钮文本；

flat 属性设置为true时，只有鼠标按下时按钮才会显示出来；

当然，Button按钮也有 onClicked 和 onPressed 和 onReleased 槽函数；

Button {id: btnwidth: 100height: 50text: "按钮文本"// 鼠标按下时按钮才会显示flat: trueonClicked: {console.log("onClicked")}onPressed: {console.log("onPressed")}onReleased: {console.log("onReleased")}
}

checkable 和 checked 都可以设置按钮按下属性；另外，当设置了checked后，会覆盖掉checkable；

简单来讲，就是按钮按下后，会有按下的效果，当点击别的按钮后按下效果才会消失；

但是需要将 autoExclusive 属性设置为true才可以！

autoExclusive 具有排他属性，在同一时间只允许一个按钮设置为check状态；举个不恰当的比喻：（按钮设置了这个属性，也就相当于加入到了一个组里面，相同组的按钮具有排他性）

Rectangle {Button {id: btn1width: 100height: 50// 设置按钮有按下的状态checkable: true// 排他属性，在同一时间只允许一个按钮设置为check状态// 不恰当的比喻：（按钮设置了这个属性，也就相当于加入到了一个组里面，相同组的按钮具有排他性）autoExclusive: true}Button {id: btn2width: 100height: 50y: 60// 设置按钮有按下的状态checkable: true// 排他属性，在同一时间只允许一个按钮设置为check状态autoExclusive: true}Button {id: btn3width: 100height: 50y: 120// 设置按钮有按下的状态checkable: true// 排他属性，在同一时间只允许一个按钮设置为check状态autoExclusive: true}Button {id: btn4width: 100height: 50y: 180// 设置按钮有按下的状态checkable: true// 没有设置排他属性//autoExclusive: true}
}

注意按钮4没有设置排他性；

就跟QT左侧菜单栏的按钮效果一样，也是有按下后的阴影效果；

autoRepeat 属性设置为true，可以在长按的时候，一直触发onClicked 和 onPressed 和 onReleased 槽函数；

autoRepeateDelay 属性设置长按后多少秒后触发槽函数；

autoRepeatInterval 属性设置每多少秒触发一次槽函数；

Button {id: btnwidth: 100height: 50text: "按钮文本"// 长按按钮，会一直触发onClicked和onPressed和onReleased槽函数autoRepeat: true// 鼠标按下，多少秒后开始触发onClicked和onPressed和onReleased槽函数
//        autoRepeateDelay: 2000// 每个多少秒触发一次onClicked和onPressed和onReleased槽函数autoRepeatInterval: 1000onClicked: {console.log("onClicked")}onPressed: {console.log("onPressed")}onReleased: {console.log("onReleased")}
}

down 属性，当鼠标按下时，此属性为true，当鼠标释放后，此属性为false；值得注意的是，鼠标按下和释放都会执行onDownChanged槽函数；

Button {id: btnwidth: 100height: 50text: "按钮文本"// down属性，当鼠标按下时，down为true，松开时，donw为false；鼠标按下松开都会触发onDownChanged: {console.log("onDownChanged", down, pressed)}
}

icon.source 和 indicator 都可以给按钮设置图片；

Button {id: btnwidth: 100height: 50text: "按钮文本"// 加载图片
//        icon.source: "/qt.png"    // 这里没有设置成功，不知道为什么indicator: Image {id: indanchors.fill: parentsource: "/qt.png"}
}

Button 部件是没有color属性的，只能通过background属性，赋值一个item设置背景颜色；

Button {id: btnwidth: 100height: 50text: "按钮文本"// 按钮背景颜色，可通过background设置一个Rectangle处理background: Rectangle {anchors.fill: parentborder.width: 5color: btn.pressed ? "gray" : "yellow"border.color: btn.pressed ? "red" : "pink"}}