qml练习

一

import QtQuick 2.12
import QtQuick.Window 2.12
import QtQuick.Controls 2.0
import QtQuick.Controls.Styles 1.4

Window {
    visible: true
    id:win
    width: 800
    height: 600
    title: qsTr("QML 变色")
    property string windowColor: ""
    //color: y?'#00FFFF':'#EFFBFB'
    Rectangle
    {

        id: mainRectangle
        anchors.fill: parent
        color: '#D8D8D8'
//        gradient: Gradient {
//            GradientStop {  position: 0.0;    color: "#EFFBFB"  }
//            GradientStop {  position: 1.0;    color: "#D8D8D8" }
//        }

        Rectangle
        {
            anchors.top:parent.top
            anchors.topMargin: 30
            anchors.left:parent.left
            anchors.leftMargin: 100
            border.color: '#000000'
            border.width: 2
            width:600
            height:400
            gradient: Gradient {
                GradientStop {  position: 0.0;    color: "#EFFBFB"  }
                GradientStop {  position: 1.0;    color: "#00FFFF" }
            }

            Grid
            {
                anchors.top: parent.top
                anchors.topMargin: 30
                anchors.left: parent.left
                anchors.leftMargin: 10
                rows: 2
                columns: 5
                spacing: 20

                Repeater
                {
                    model: 14

                    Button
                    {
                        id:index
                        //text:getRectColor()
                        width: 100
                        height: 50
                        //color: getRectColor()

                        onClicked:
                        {
                            btnClick();
                        }

                        function btnClick()
                        {
                            win.windowColor = getRectColor()
                            colorLable.text = "当前选中颜色:" + win.windowColor
                            mainRectangle.color = getRectColor()
                            mainRectangle.state = 'clicked'

                        }

                        background: Rectangle
                        {
                            implicitWidth: 100
                            implicitHeight: 50
                            color: getRectColor()
                        }

                        function getRectColor()
                        {
                            if(Positioner.index === 0)
                                return '#F5A9A9'
                            else if(Positioner.index === 1)
                                return 'Red'
                            else if(Positioner.index === 2)
                                return '#F3F781'
                            else if(Positioner.index === 3)
                                return '#DA81F5'
                            else if(Positioner.index === 4)
                                return '#0404B4'
                            else if(Positioner.index === 5)
                                return '#0B6138'
                            else if(Positioner.index === 6)
                                return '#0B610B'
                            else if(Positioner.index === 7)
                                return '#DBA901'
                            else if(Positioner.index === 8)
                                return '#81F79F'
                            else if(Positioner.index === 9)
                                return '#D8F6CE'
                            else if(Positioner.index === 10)
                                return '#A9F5F2'
                            else
                                return '#F5A9A9'
                        }


                    }
                }

            }


        }

        states: [
            State {
                name: "clicked"
                PropertyChanges { target: mainRectangle; color: win.windowColor }
            }
        ]

        Text
        {
            anchors.top:parent.top
            anchors.topMargin: 480
            anchors.left:parent.left
            anchors.leftMargin: 100
            id: colorLable
            x:34; y:20

            text: "当前选中颜色:"// + value
            font.pixelSize: 24

        }
    }
}

二

import QtQuick 2.12
import QtQuick.Window 2.12
import QtQuick.Controls 2.0
import QtQuick.Controls.Styles 1.4

Window {
    //property Component myconponent: comp1
    id:win1
    visible: true
    width: 800
    height: 600
    title: qsTr("Qml 变色 可增删")
    property string windowColor: ""
    Rectangle
    {

        id: mainRectangle
        anchors.fill: parent
        color: '#D8D8D8'
//        gradient: Gradient {
//            GradientStop {  position: 0.0;    color: "#EFFBFB"  }
//            GradientStop {  position: 1.0;    color: "#D8D8D8" }
//        }

        Rectangle
        {
            anchors.top:parent.top
            anchors.topMargin: 30
            anchors.left:parent.left
            anchors.leftMargin: 100
            border.color: '#000000'
            border.width: 2
            width:600
            height:400
            gradient: Gradient {
                GradientStop {  position: 0.0;    color: "#EFFBFB"  }
                GradientStop {  position: 1.0;    color: "#00FFFF" }
            }

            Grid
            {
                id:grid1
                property int index: 0
                signal createIt()
                signal delVal
                anchors.top: parent.top
                anchors.topMargin: 30
                anchors.left: parent.left
                anchors.leftMargin: 10
                rows: 2
                columns: 5
                spacing: 20

                function createItem() {
                    console.log("createItem")
                    console.log(grid1.index)
                    var component = Qt.createComponent("Rect.qml")
                    var it1;
                    if (component.status === Component.Ready) {
                        it1 = component.createObject(grid1);
                        it1.sendColor.connect(changeColor)
                    }
                    function changeColor(msg)
                    {
                        mainRectangle.color = msg
                    }
//                    function onDisDeleteThis() {
//                        //grid1.sourceComponent = undefined

//                    }


                    grid1.index++
                }

                //Component.onCompleted: createItem()

//                function loadComp1()
//                {
//                    Loader {
//                        id: loader1
//                        sourceComponent: comp1

//                        function onDisDeleteThis() {
//                            loader1.sourceComponent = undefined
//                        }
//                    }
//                }
            }


        }


        states: [
            State {
                name: "clicked"
                PropertyChanges { target: mainRectangle; color: win.windowColor }
            }
        ]

        Text
        {
            anchors.top:parent.top
            anchors.topMargin: 480
            anchors.left:parent.left
            anchors.leftMargin: 100
            id: colorLable
            x:34; y:20

            text: "当前选中颜色:"// + value
            font.pixelSize: 24

        }

        Button {
            width: 100
            height: 50
            anchors.top:parent.top
            anchors.topMargin: 480
            anchors.left:parent.left
            anchors.leftMargin: 600
            onClicked: {
                grid1.createItem()
                console.log("buttonclick")
            }
        }



    }







}

三

import QtQuick 2.12
import QtQuick.Window 2.12
import QtQuick.Controls 2.0
import QtQuick.Controls.Styles 1.4

//Item {
//    id:it1
//Component {
//    id:re
Rectangle
{
    id:index
    signal sendColor(string msg)
    //text:getRectColor()
    width: 100
    height: 50
    color: getRectColor()
    property string recColor: getRectColor()

    function btnClick()
    {
        win.windowColor = getRectColor()
        colorLable.text = "当前选中颜色:" + win.windowColor
        mainRectangle.color = getRectColor()
        mainRectangle.state = 'clicked'

    }

    MouseArea {
        id:comp1MouseArea
        property int pressAndHoldDuration:2000
        property int isPress: 0
        signal myPressAndHold()
        anchors.fill: parent
        acceptedButtons: Qt.LeftButton

        onPressed: {
            isPress = 1
            pressAndHoldTimer.start();
        }

        onReleased: {
            pressAndHoldTimer.stop();
            if(isPress === 1)
            {
                isPress = 0
                console.log("short click!")
                cir1.visible = false
                index.sendColor(recColor)
            }
        }

        onMyPressAndHold: {
            console.log("pressandhold")
            cir1.visible = true
        }

        Timer{
            id: pressAndHoldTimer
            interval: parent.pressAndHoldDuration
            running:false
            repeat:false
            onTriggered: {
                parent.isPress = 0;
                parent.myPressAndHold();

            }

        }
    }

    Rectangle{
        id:cir1
        visible: false
        width: 10
        height: 10
        radius: 5
        anchors.bottom:parent.top
        anchors.bottomMargin: -5
        anchors.left:parent.right
        anchors.leftMargin: -5
        Rectangle{
            anchors.verticalCenter: parent.verticalCenter
            width:10
            height:1
            color:"black"
            rotation:45
        }
        Rectangle{
            anchors.verticalCenter: parent.verticalCenter
            width:10
            height:1
            color:"black"
            rotation:135
        }
        MouseArea {
            id:cirMouseArea
            anchors.fill: parent
            acceptedButtons: Qt.LeftButton

            onClicked: {
                //loader1.onDisDeleteThis()
                index.destroy()
            }

        }
    }

//                background: Rectangle
//                {
//                    implicitWidth: 100
//                    implicitHeight: 50
//                    color: getRectColor()
//                }

    function getRectColor()
    {
        if(Positioner.index === 0)
            return '#F5A9A9'
        else if(Positioner.index === 1)
            return 'Red'
        else if(Positioner.index === 2)
            return '#F3F781'
        else if(Positioner.index === 3)
            return '#DA81F5'
        else if(Positioner.index === 4)
            return '#0404B4'
        else if(Positioner.index === 5)
            return '#0B6138'
        else if(Positioner.index === 6)
            return '#0B610B'
        else if(Positioner.index === 7)
            return '#DBA901'
        else if(Positioner.index === 8)
            return '#81F79F'
        else if(Positioner.index === 9)
            return '#D8F6CE'
        else if(Positioner.index === 10)
            return '#A9F5F2'
        else
            return '#F5A9A9'
    }


}
//    }

//}