qml(window/Rectangle/anchors/component/loader/mousearea/button)

window 窗口类

Window {
    width:400
    height:300
    visible:true
    title:qsTr("My QML")
    property int myValue:0
    signal mySig()
    minimumHeight: 400
    minimumWidth:300
    maximumWidth: 400
    maximumHeight:300   //最大最小宽度
    onWidthChanged: {
        console.log("width:",width)
    }
    onMyValueChanged: {

    }
    onMySig:{


    }
    Button{
     id:btn1
     width:50
     height: 50
     Keys.onLeftPressed: {
        btn1.focus = true
     }
    }
}

矩形

Window {
    width:640
    height:480
    visible:true
    title:qsTr("My QML")
    color: "white"

    Rectangle{
        x:100
        y:100
        z:1
        width: 100
        height: 50
        color:"black"
    }

    Rectangle{
        x:150
        y:150
        width: 100
        height: 50
        focus:true//获取到焦点，可以接受键盘的信息
        color:"blue"
        MouseArea{
            anchors.fill: parent
            onClicked: {
                console.log("on clicked")
            }
        }
        Keys.onReturnPressed: {console.log("on return pressed")}

   }
}

anchors类

Window {
    width:640
    height:480
    visible:true
    title:qsTr("My QML")
    color: "white"

    Rectangle{
        id:rect1
        //anchors.fill:parent//填充满父类
        width:100
        height:50
        color:"black"
        border.width:2
        border.color: "red"
        anchors.leftMargin: 20
        anchors.centerIn: parent//位于父控件的中间位置
    }
}

component与loader

Window {
    width:640
    height:480
    visible:true
    title:qsTr("My QML")
    color: "white"

    Component{
        id:com
        Rectangle{
            width:200
            height:100
            color: "black"
            //创建的时候调用
            Component.onCompleted: {
                console.log("onCompleted",width,height,color)
            }

            //销毁的时候调用
            Component.onDestruction: {
                console.log("onCompleted",width,height,color)
            }
        }
    }

    Loader{
        id:loader
        sourceComponent: com
    }

    Button{
        width:50
        height: 50
        x:200
        onClicked: {
            loader.item.width=50//设置组件宽度
            loader.item.height = 50//设置组件高度
            //loader.sourceComponent = null//点击之后销毁
        }
    }
}

mousearea

Window {
    width:640
    height:480
    visible:true
    title:qsTr("My QML")
    color: "white"
    MouseArea{
        id:mouseArea
        width:200
        height:200
        acceptedButtons: Qt.LeftButton|Qt.RightButton
        Rectangle{
            anchors.fill:parent
            color:"black"
        }
        onClicked: {
            console.log("clicked")
        }
        onPressed: {
            console.log("pressed")
        }
    }
}

button

Window {
    width:640
    height:480
    visible:true
    title:qsTr("My QML")
    color: "white"

    Button{
        id:btn
        width:50
        height:50
        checkable: true //实现内置状态
        onCheckableChanged: {
            console.log("changed",checkable)
        }
        onPressedChanged: {
            btn.checked = !btn.checked
        }

        onClicked:{
            console.log("cliecked")
        }
    }
}