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

简介: 源码:https://github.com/sueRimn/QML-ExampleDemos按钮控件也是一个组成部分,单独成一个文件我自定义了一个按钮的控件,边框按钮,鼠标悬浮经过、按压按钮,都会变色,效果如下,录制软件没有将鼠标录入。

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

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

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

取名叫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"
        }
    }
 
 
 

 

相关文章
|
3月前
【Qt 学习笔记】Qt常用控件 | 输入类控件 | Slider的使用及说明
【Qt 学习笔记】Qt常用控件 | 输入类控件 | Slider的使用及说明
343 2
|
3月前
【Qt 学习笔记】Qt常用控件 | 按钮类控件 | Radio Button的使用及说明
【Qt 学习笔记】Qt常用控件 | 按钮类控件 | Radio Button的使用及说明
479 1
|
3月前
【Qt 学习笔记】Qt常用控件 | 按钮类控件 | Push Button的使用及说明
【Qt 学习笔记】Qt常用控件 | 按钮类控件 | Push Button的使用及说明
152 0
【Qt 学习笔记】Qt常用控件 | 按钮类控件 | Push Button的使用及说明
MFC基本控件3-Button的风格
MFC基本控件3-Button的风格
|
3月前
|
Windows
【Qt 学习笔记】Qt常用控件 | 显示类控件 | Label的使用及说明
【Qt 学习笔记】Qt常用控件 | 显示类控件 | Label的使用及说明
90 0
|
3月前
【Qt 学习笔记】Qt常用控件 | 输入类控件 | Text Edit的使用及说明
【Qt 学习笔记】Qt常用控件 | 输入类控件 | Text Edit的使用及说明
243 0
|
6月前
Qt6自定义QML控件的方式
Qt6自定义QML控件的方式
169 1