qml控件使用相关

Settings

Settings {
        id: systemSettings
        category: "system"

        //设置-休眠时间(范围:1-5,单位:分钟 )
        property int sleepTime: 4
        property bool wifiEnable: true

        //判断儿童锁(true表示锁定，false表示未锁定)
        property bool childLock:false

        property bool leftCookDialog:true
        property bool rightCookDialog:true
        property bool multistageRemind:true
        property bool multistageDialog:true
        property var wifiPasswdArray

方法定义

function deleteWifiInfo(wifiInfo)
{
	return 1
}

StackView

StackView {
        id: stackView
        initialItem: pageHome
        anchors.fill: parent
        enabled:true
}

定时器

Timer{
        id:timer_window
        repeat: false
        running: false
        interval: systemSettings.sleepTime*60000
        triggeredOnStart: false
        onTriggered: {

        }
}

Connections信号与槽函数连接

Connections { // 将目标对象信号与槽函数进行连接
        target: QmlDevState
        onLocalConnectedChanged:{
            console.log("page home onLocalConnectedChanged",value)
            if(value > 0)
            {
                closeLoaderError()
                permitSteamStartStatus(0)
            }
            else
            {
                showLoaderFault("通讯板故障！","请拨打售后电话<font color='#00E6B6'>400-888-8490</font><br/>咨询售后人员",false)
            }
        }
}

自定义CheckBox

import QtQuick 2.7
import QtQuick.Controls 2.2

CheckBox {
    id:control
    width:200
    height:40
    checked: false
    text: qsTr("下次不再提醒")
    leftPadding:10
    contentItem: Text {
        width:parent.width
        text: parent.text
        font.pixelSize: 30
        opacity: 1.0
        color: "#FFF"
        verticalAlignment: Text.AlignVCenter
        leftPadding: control.indicator.width + control.spacing
    }
    indicator: Rectangle {
        implicitWidth: 40
        implicitHeight: 40
        x: control.leftPadding
        y: parent.height / 2 - height / 2
        //                radius: 3
        color:"transparent"
        //                border.color: control.down ? "#17a81a" : "#21be2b"

        //                Rectangle {
        //                    width: 14
        //                    height: 14
        //                    x: 6
        //                    y: 6
        //                    radius: 2
        //                    color: control.down ? "#17a81a" : "#21be2b"
        //                    visible: control.checked
        //                }
        Image {

            anchors.centerIn: parent
            source: control.checked ?"qrc:/x50/main/iocn_kuang_x.png":"qrc:/x50/main/iocn_kuang_w.png"
            //                    visible: control.checked
        }
    }
}

自定义BusyIndicator

BusyIndicator {
        id: control
//        anchors.fill: parent
        implicitWidth: 40
        implicitHeight: 40
        background:Rectangle{
            color:"transparent"
        }
        contentItem: Item {
            anchors.centerIn: parent
            implicitWidth: parent.width
            implicitHeight: parent.width

            Item {
                id: item
                anchors.centerIn: parent
                x: parent.width / 2
                y: parent.height / 2
                width: parent.width
                height: parent.height
                opacity: control.running ? 1 : 0

                Behavior on opacity {
                    OpacityAnimator {
                        duration: 300
                    }
                }

                RotationAnimator {
                    target: item
                    running: control.visible && control.running
                    from: 0
                    to: 360
                    loops: Animation.Infinite
                    duration: 7000
                }

                Repeater {
                    id: repeater
                    model: 8

                    Rectangle {
                        x: item.width / 2 - width / 2
                        y: item.height / 2 - height / 2
                        implicitWidth: 6
                        implicitHeight: 6
                        radius: 5
                        color: index<3?"darkgray":"#fff"
                        transform: [
                            Translate {
                                y: -Math.min(item.width, item.height) * 0.5
                            },
                            Rotation {
                                angle: index / repeater.count * 360
                                origin.x: 3
                                origin.y: 3
                            }
                        ]
                    }
                }
            }
        }
}

RotationAnimator旋转动画

    RotationAnimator {
        target: busyImg
        running: busyImg.visible
        from: 0
        to: 360
        loops: Animation.Infinite
        duration: 5000
    }

波浪进度条

import QtQuick 2.0
import QtQuick.Controls 2.2

Item {
    Canvas{
        property real percent: slider.value
        property real lineWidth:5
        property real r: canvas.width/2-lineWidth
        id: canvas
        height: 300
        width: 300
        anchors.centerIn: parent
        onPaint: {
            var ctx = getContext("2d");
            //                ctx.reset()
            ctx.save()
            ctx.clearRect(0, 0, canvas.width, canvas.height);
            ctx.translate(150,150)
            ctx.lineWidth = lineWidth
            //显示外圈
            ctx.beginPath();
            ctx.moveTo(0,0)
            ctx.strokeStyle = 'red';
            ctx.fillStyle = '#00ffff'
            ctx.arc(0, 0, r, 0, 2*Math.PI);
            ctx.stroke();
            ctx.fill();
            ctx.clip()

            //显示sin曲线
            var dy = r-2*r*percent/100
            ctx.beginPath();
            ctx.moveTo(-r,dy)
            for(var x = 0; x < 2*r; x += 1){
                var y = -Math.sin(x*0.021);
                ctx.lineTo(-r+x, dy + y*6);
            }
            //显示波浪
            ctx.lineTo(r, r);
            ctx.lineTo(-r, r);
            ctx.closePath()
            ctx.fillStyle = '#1c86d1';
            ctx.fill();

            //显示百分数
            ctx.font = "30px sans-serif";
            ctx.textAlign = 'center';
            ctx.fillStyle = "blue";
            ctx.fillText(percent + '%', 0, 0);
            ctx.restore();
        }
    }
}

页面间切换传递参数

使用stackView切换页面时，好像必须使用state作为key

stackView.push(pageCookDetails, {"state":args})

控件间存在覆盖时，点击事件穿透

必须mouse.accepted = false

    MouseArea{
        anchors.fill: parent
        hoverEnabled:true
        propagateComposedEvents: true

        onPressed: {
                mouse.accepted = false
        }
    }