Qt-第一个QML程序-3-自定义一个按钮
2024-08-28 18:40:12
项目基本信息前两个已经说了，这里直接放下运行截图，
对的，这里就是说上面的那个红色的按钮，这里需要了解Qml的动画和状态
这里先把整个按钮的代码写出来，一点一点写
Rectangle
{
id:close_Btn
width: 50
height: 30
color: "transparent"
state: "nomal"
anchors.top: parent.top
anchors.right: parent.right
Text {
id: close_Text
anchors.centerIn: parent
text: qsTr("X")
}
MouseArea
{
id:close_MouseArea
hoverEnabled: true
anchors.fill: parent
onClicked:
{
close_Btn.state="press"
Qt.quit()
}
onEntered: close_Btn.state="hover"
onExited: close_Btn.state="nomal"
}
states:
[
State
{
name: "nomal"
PropertyChanges
{
target: close_Btn
color:"#777777"
}
},
State
{
name: "hover"
PropertyChanges
{
target: close_Btn
color:"red"
}
},
State
{
name: "press"
PropertyChanges
{
target: close_Btn
color:"blue"
}
}
]
transitions:
[
Transition
{
from: "nomal"
to: "hover" ColorAnimation
{
target: close_Btn
duration: 100
}
},
Transition
{
from: "hover"
to: "press" ColorAnimation
{
target: close_Btn
duration: 100
}
},
Transition
{
from: "press"
to: "nomal" ColorAnimation
{
target: close_Btn
duration: 100
}
}
] }
这是一个按钮的大整体代码，可能用过widget那边的人会觉得好多，确实是，不过后期我可能会把这个按钮封装成一个整的Button就可以了，使用起来就会简单好多
id:close_Btn
width: 50
height: 30
color: "transparent"
state: "nomal"
anchors.top: parent.top
anchors.right: parent.right
这部分就是这个按钮的基本部分，按钮大小50*30
按钮的背景颜色透明
默认状态为nomal
布局为右上角
Text {
id: close_Text
anchors.centerIn: parent
text: qsTr("X")
}
显示的文本信息，布局为在父级中心布局，文本内容“X”
MouseArea
{
id:close_MouseArea
hoverEnabled: true
anchors.fill: parent
onClicked:
{
close_Btn.state="press"
Qt.quit()
}
onEntered: close_Btn.state="hover"
onExited: close_Btn.state="nomal"
}
鼠标点击区域，把整个父级设置为鼠标点击区域，同时把鼠标滑入设置为允许。添加鼠标点击事件，当鼠标点击后，将状态改为press，同时推出程序
下面的就是当鼠标滑入是，将状态改为hover，滑出时，将状态改为nomal
states:
[
State
{
name: "nomal"
PropertyChanges
{
target: close_Btn
color:"#777777"
}
},
State
{
name: "hover"
PropertyChanges
{
target: close_Btn
color:"red"
}
},
State
{
name: "press"
PropertyChanges
{
target: close_Btn
color:"blue"
}
}
]
定义按钮的三个状态，这里就是简单的改变一下颜色
transitions:
[
Transition
{
from: "nomal"
to: "hover" ColorAnimation
{
target: close_Btn
duration: 100
}
},
Transition
{
from: "hover"
to: "press" ColorAnimation
{
target: close_Btn
duration: 100
}
},
Transition
{
from: "press"
to: "nomal" ColorAnimation
{
target: close_Btn
duration: 100
}
}
]
动画机制，需要绑定目标和时间
ok，目前完成
源码连接：http://download.csdn.net/detail/z609932088/9802022
GitHub：https://github.com/DreamLifeOffice/MyQmlProject
最新文章
- IO流03--毕向东JAVA基础教程视频学习笔记
- ASP.NET MVC html help
- Spring MVC 入门教程示例 （一）
- NSTimer运行机制和线程问题
- java之内存可见型
- 好玩的WPF第二弹：电子表字体显示时间+多彩呼吸灯特效button
- android 原生应用、Web应用、混合应用优缺点分析
- ArrayList和List主要区别 就是ArrayList类型不安全。
- 【Python3之基本数据类型，基本运算】
- 微信小程序之给项目设置id后提示不在合法域名列别中
- spring中一些aware接口
- 页面滚动到指定class样式位置
- linux下ls -l命令（即ll命令）查看文件的显示结果分析
- java项目打成war包
- 一、K3 Wise 实施指导《K3 Wise实施手册》
- 基数排序模板[luogu 1177]
- POI操作Excel（xls、xlsx）
- python3 验证码去噪
- html页面去掉滚动条
- ios开发之--新手引导页图片适配方案
热门文章
- 2018 Multi-University Training Contest 4 Problem L. Graph Theory Homework 【YY】
- WMIC_2
- 【转】关于HTTP中文翻译的讨论
- easyui分页的使用方法
- win7下添加库文件出现“file is not regcognized”问题
- 【浏览器-Safari-网页开发指南】官方Sarari开发指南译文
- SpringMVC——笔记
- kali linux 安装 Mysql Can't read from messagefile 报错解决方案
- Linux中文件I/O函数
- MFC+ODBC+SQL Server+Visual C++