【Qt QML入门】Button组件

Button表示一个推按钮控件，用户可以按下或单击它。

import QtQuick
import QtQuick.Window
import QtQuick.Controls

Window {
    id: win
    width: 800
    height: 600
    visible: true
    title: qsTr("Hello World")

    Button {
        id: btn
        width: 200
        height: 100
        anchors.centerIn: parent
        text: qsTr("This is a Button")
    }
}

自定义按钮的文本样式：

import QtQuick
import QtQuick.Window
import QtQuick.Controls

Window {
    id: win
    width: 800
    height: 600
    visible: true
    title: qsTr("Hello World")

    Button {
        id: btn
        width: 200
        height: 100
        anchors.centerIn: parent
        text: qsTr("This is a Button")
        //自定义文本样式
        contentItem: Text {
            text: btn.text
            font: btn.font
            opacity: enabled ? 1.0 : 0.3
            color: btn.down ? "#17a81a" : "#21be2b"
            horizontalAlignment: Text.AlignHCenter
            verticalAlignment: Text.AlignVCenter
            elide: Text.ElideRight
        }
    }
}

自定义按钮背景样式：

import QtQuick
import QtQuick.Window
import QtQuick.Controls

Window {
    id: win
    width: 800
    height: 600
    visible: true
    title: qsTr("Hello World")

    Button {
        id: btn
        width: 200
        height: 100
        anchors.centerIn: parent
        text: qsTr("This is a Button")
        //自定义文本样式
        contentItem: Text {
            text: btn.text
            font: btn.font
            opacity: enabled ? 1.0 : 0.3
            color: btn.down ? "#17a81a" : "#21be2b"
            horizontalAlignment: Text.AlignHCenter
            verticalAlignment: Text.AlignVCenter
            elide: Text.ElideRight
        }
        //自定义按钮背景
        background: Rectangle {
            implicitWidth: 100      //背景默认宽度
            implicitHeight: 40      //背景默认高度
            opacity: enabled ? 1 : 0.3        //背景不透明度
            border.color: btn.down ? "#17a81a" : "#21be2b"   //背景边框颜色
            border.width: 1       //背景边框宽度
            radius: 2             //背景圆角
        }
    }
}

自定义图片按钮：

import QtQuick
import QtQuick.Window
import QtQuick.Controls

Window {
    id: win
    width: 800
    height: 600
    visible: true
    title: qsTr("Hello World")

    Button {
        id: btn
        width: 200
        height: 100
        anchors.centerIn: parent
        text: qsTr("This is a Button")
        //自定义文本样式
        contentItem: Text {
            text: btn.text
            font: btn.font
            opacity: enabled ? 1.0 : 0.3
            color: btn.down ? "#17a81a" : "#21be2b"
            horizontalAlignment: Text.AlignHCenter
            verticalAlignment: Text.AlignVCenter
            elide: Text.ElideRight
        }
        //自定义按钮背景
        background: Image {
            opacity: enabled ? 1 : 0.3        //背景不透明度
            source: "qrc:/img.jpg"
        }
    }
}

按钮事件：

import QtQuick
import QtQuick.Window
import QtQuick.Controls

Window {
    id: win
    width: 800
    height: 600
    visible: true
    title: qsTr("Hello World")

    Button {
        id: btn
        width: 200
        height: 100
        anchors.centerIn: parent
        text: qsTr("This is a Button")
        //自定义文本样式
        contentItem: Text {
            text: btn.text
            font: btn.font
            opacity: enabled ? 1.0 : 0.3
            color: btn.down ? "#17a81a" : "#21be2b"
            horizontalAlignment: Text.AlignHCenter
            verticalAlignment: Text.AlignVCenter
            elide: Text.ElideRight
        }
        //自定义按钮背景
        background: Image {
            opacity: enabled ? 1 : 0.3        //背景不透明度
            source: "qrc:/img.jpg"
        }

        onCanceled: {
            //当按钮在被按下时失去鼠标抓取，或者当它发出released信号
            //但鼠标光标不在按钮内时，就会发出这个信号。
        }

        onClicked:{
            //用户通过触摸、鼠标或键盘交互单击按钮
        }

        onDoubleClicked:{
            //用户通过触摸或鼠标交互双击按钮
        }

        onPressAndHold:{
            //用户通过触摸或鼠标交互按下按钮。
            //当启用autoRepeat时，它不会被触发
        }

        onPressed:{
            //用户通过触摸、鼠标或键盘交互按下按钮
        }

        onReleased:{
            //用户通过触摸、鼠标或键盘交互释放按钮
        }

        onToggled:{
    }
}