qml 部分控件的实际应用 button 进度条

按钮：一般情况下大家都会想到使用qml 的原生的控件，BUtton 但是要是实现复杂一点的按钮，Button 的局限性就显现出来了。所以本人还是是使用其他控件模拟了按钮的效果并且效果还是不错的。

Image{   
     property url imNormal: "arec1.png"    //正常显示的图片路径
     property url imPressPic: "arec2.png"  //鼠标经过的图片
     property url imHover: "arec3.png"  //按下显示的图片路径
     source: gwBtn.containsMouse ? (gwBtn.pressed ? imPressPic : imHover) : imNormal;
     Text{
         anchors.centerIn: parent
         text:qsTr("三态按钮")
         font.pointSize: 18
         font.family: "PingFang SC";
         font.weight: 400;
         color: "#FFFFFF";
         }
      MouseArea{
        hoverEnabled:true //这里要注意，如果不想要鼠标经过的效果可以删除这里。
        anchors.fill: parent
        id:gwBtn
                }
            }

上面的代码是用Image作为图片的显示控件，然后MouseArea处理鼠标事件。

进度条。基本上自带的进度条也很难满足大家的需求，所以免不了要使用js自绘。

 ProgressBar {
                                        id:powerPro
                                        implicitWidth: parent.width
                                        from:0
                                        to: 100
                                        value:20
                                        indeterminate: true
                                        property int startX: 10
                                            onValueChanged: {
                                                verCanvas.requestPaint()
                                            }
                                            background:Item {
                                                implicitWidth: parent.width
                                                implicitHeight: 50
                                                Rectangle {
                                                    anchors.bottom: parent.bottom
                                                    width: parent.width
                                                    height: parent.height/2
                                                    color:"transparent"
                                                    Canvas {
                                                        id:verCanvas
                                                        anchors.fill: parent
                                                        antialiasing:true
                                                        onPaint: {
                                                            var ctx = getContext("2d")
                                                            ctx.lineWidtn = 1
                                                            ctx.fillStyle = "#262627"
                                                            powerPro.startX = 10
                                                            for (var i=0;i<powerPro.width/11;i++) {
                                                                ctx.beginPath()
                                                                ctx.moveTo(0, parent.width)
                                                                ctx.fillRect(powerPro.startX*i, 0, 4, parent.height)
                                                                ctx.fill()
                                                            }
                                                        }
                                                    }
                                                }
                                            }
                                            contentItem:Item {
                                                Rectangle {
                                                    width:powerPro.visualPosition*parent.width
                                                    height:parent.height/2
                                                    anchors.bottom: parent.bottom
                                                    color:"transparent"
                                                    Canvas {
                                                        //id:velCan
                                                        anchors.fill: parent
                                                        antialiasing:true
                                                        onPaint: {
                                                            var ctx = getContext("2d")
                                                            ctx.lineWidtn = 1
                                                            var gradient = ctx.createLinearGradient(0, 0, powerPro.width, 0)
                                                            gradient.addColorStop(0.0, "green")
                                                            gradient.addColorStop(0.4, "yellow")
                                                            gradient.addColorStop(0.8, "red")
                                                            gradient.addColorStop(1.0, "red")
                                                            ctx.fillStyle = gradient
                                                            powerPro.startX = 10
                                                            for (var i=0;i<parent.width/11;i++) {
                                                                ctx.beginPath()
                                                                ctx.moveTo(0, parent.width)
                                                                ctx.fillRect(powerPro.startX*i, 0, 4, parent.height)
                                                                ctx.fill()
                                                            }
                                                        }
                                                    }
                                                }
                                            }
                                        }

                                    }
                                  
                                }

这是一个背景由一个个4*25的矩形组成的。前景是有同样的矩形配合渐变色来表示当前进度和然后色变化。

由于我使用的是6.3.2 版本的qt 所以之前版本的一些方法应该是不能使用了所以自己摸索这写了这一版。其中除了js的代码以外有些属性根据qt文档的描述感觉还是不太清楚。有知道的可以留言一起讨论antialiasing 比如这个