qt android 开发之炫酷控件的制作

手机应用开发，就是吸引用户，要吸引用户，肯定离不开用户体验！这次给大家分享一个自作的炫酷qml控件：fanControler
这个控件目前有点bug，不过总体效果还是很赞的，通过滑动划片来控制风扇的转动速度！
控件源码：
FansControler.qml

import QtQuick 2.0
import QtQuick 2.4

Rectangle {
property int progress:50
color: "# 00000000"
Image {
id: fanFrame
source: "qrc:/image/fanFrame.png"
anchors.fill: parent
fillMode: Image.PreserveAspectFit
}
Image {
id: fanFrame1
source: "qrc:/image/fanFrame1.png"
anchors.fill: parent
fillMode: Image.PreserveAspectFit
rotation: 0

    RotationAnimator {        id:fanAnimator        target: fanFrame1;        from: 360;        to: 0;        duration: 3000-2000*progress/100        running: progress!=0        loops: Animation.Infinite    }}onProgressChanged: {    fanAnimator.running=false    fanAnimator.duration=3000-2000*progress/100    fanAnimator.running=true    if(progress===0){        fanAnimator.stop()        fanAnimator.complete()    }}Image {    id: fanSlider    source: "qrc:/image/fanSlider.png"    anchors.fill: parent    fillMode: Image.PreserveAspectFit    transform: Rotation { origin.x: fanSlider.width/2; origin.y: fanSlider.width/2; axis { x: 0; y: 0; z: 1 } angle: -(180*progress/100) }}MouseArea{    anchors.fill: parent    id:ma    onPressed: {        if(ma.mouseX>=ma.width/2){            if(ma.mouseY>=ma.width/2){                var angle=Math.atan((ma.mouseX-ma.width/2)/(ma.mouseY-ma.width/2))                var angle360=360*angle/(2*Math.PI)

// console.log(angle360)
progress=50-Math.round(angle360*100/180)
}else{
var angle=Math.PI/2+Math.atan((ma.mouseX-ma.width/2)/(ma.width/2-ma.mouseY))

                var angle360=360*angle/(2*Math.PI)

// console.log(angle360)
progress=Math.round(angle360100/180)
}
}
}
onPositionChanged: {
if(ma.mouseX>=ma.width/2){
if(ma.mouseY>=ma.width/2){
var angle=Math.atan((ma.mouseY-ma.width/2)/(ma.mouseX-ma.width/2))
var angle360=360angle/(2Math.PI)
// console.log(angle360)
progress=50-Math.round(angle360100/180)
}else{
var angle=Math.PI/2+Math.atan((ma.width/2-ma.mouseY)/(ma.mouseX-ma.width/2))
var angle360=360angle/(2Math.PI)
// console.log(angle360)
progress=Math.round(angle360*100/180)
}
}
}
}

}
效果截图：

关键字：qt5, qml, android

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！