QML学习笔记(六)-自定义控件-Button

时间:2024-04-05 07:25:38

源码:https://github.com/sueRimn/QML-ExampleDemos

按钮控件也是一个组成部分,单独成一个文件

我自定义了一个按钮的控件,边框按钮,鼠标悬浮经过、按压按钮,都会变色,效果如下,录制软件没有将鼠标录入。

QML学习笔记(六)-自定义控件-Button

取名叫BorderButton,首字母要大写

1.BorderButton.qml

import QtQuick 2.0
import QtQuick.Controls 1.4
import QtQuick.Controls.Styles 1.4
Button{
    id:appBtn;
    property alias borderbtnText: tex.text
    width: parent.width;
    height: parent.height;
    style: ButtonStyle{
        background: Rectangle{
            color: control.pressed ? "#00cc00" : control.hovered ? "#00cc00" : control.activeFocus ? "#00cc00" : "#ffff00"
            border.color: "#00cc00"
            radius: 3;
            anchors.fill: parent;
        }
    }
    Text{
        id:tex;
        color: parent.pressed ? "#ffff00" : parent.hovered ? "#ffff00" : parent.activeFocus ? "#ffff00" : "#00cc00"
        font.pointSize:12;
        anchors.centerIn: parent;
        text: "";
    }
}

2.main.qml

引用BorderButton.qml控件


    Rectangle{
        anchors.fill: parent;

        color: "#ffff00"
        BorderButton{
            width: 100;
            height: 50;
            anchors.verticalCenter: parent.verticalCenter;
            anchors.horizontalCenter: parent.horizontalCenter
            borderbtnText: "Button"
        }
    }