QML Button 部件的使用

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

Button {
    id: btn
    width: 100
    height: 50
}

生成一个最基本的按钮

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

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

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

Button {
    id: btn
    width: 100
    height: 50

    text: "按钮文本"

    // 鼠标按下时按钮才会显示
    flat: true

    onClicked: {
        console.log("onClicked")
    }
    onPressed: {
        console.log("onPressed")
    }
    onReleased: {
        console.log("onReleased")
    }
}

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

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

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

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

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

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

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

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

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

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

Button {
    id: btn
    width: 100
    height: 50
    text: "按钮文本"

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

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

Button {
    id: btn
    width: 100
    height: 50

    text: "按钮文本"

    // down属性，当鼠标按下时，down为true，松开时，donw为false；鼠标按下松开都会触发
    onDownChanged: {
        console.log("onDownChanged", down, pressed)
    }
}

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

Button {
    id: btn
    width: 100
    height: 50
    text: "按钮文本"

    // 加载图片
//        icon.source: "/qt.png"    // 这里没有设置成功，不知道为什么
    indicator: Image {
        id: ind
        anchors.fill: parent
        source: "/qt.png"
    }
}

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

Button {
    id: btn
    width: 100
    height: 50
    text: "按钮文本"

    // 按钮背景颜色，可通过background设置一个Rectangle处理
    background: Rectangle {
        anchors.fill: parent
        border.width: 5
        color: btn.pressed ? "gray" : "yellow"
        border.color: btn.pressed ? "red" : "pink"
    }

}

基本上来说，Button部件认识这些知识点就差不多了，其他的也不常用了！

自定义按钮

项目中，我们都是需要自定义自己的按钮的，因为qml提供的Button不足以实现好看的按钮，为此，我们需要自定义；

按钮的外观可以使用 background 属性，并赋值一个 Rectangle 进行处理；

按钮的文本可以使用 contentItem 属性，并赋值一个 Text 进行处理

以下提供一个简单的案例：

Button {
    id: control
    text: "按钮"
    width: 150
    height: 50

    background: Rectangle {
        id: bgRect
        color: "gray"
        radius: 15
        states: [
            State {
                name: "PRESSED"
                when: control.pressed
                PropertyChanges {
                    target: bgRect
                    color: "yellow"
                    scale: 0.95
                }
            }
        ]

        transitions: Transition {
            ColorAnimation { duration: 150 }
            NumberAnimation { properties: "scale"; duration: 200 }
        }
    }

    contentItem: Text {
        text: parent.text
        font.bold: true
        font.pixelSize: 20
        color: "red"
        horizontalAlignment: Qt.AlignHCenter
        verticalAlignment: Qt.AlignVCenter
    }
}

完！