The second day of QML study

Catalog

Rectangle Control :

focus attribute :

Anchor point :

Rectangle centered with parent control :

Rotation properties rotation:

Set the edge control of the rectangle border:

Rectangle fillet radian radius:

  qml Import the outer rectangle , In the other one qml As defined in

---

Then yesterday . I'm learning something QML Space .

Rectangle Control :

The first space today is Rectangle( rectangular ), This control has nothing to say , Just draw a rectangle ,

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

What if two matrices coincide , There is actually a third coordinate z, Default z yes 0, If you set z by 1, Namely z The big one is on the .

focus attribute :

        This property is used to get the current focus .

    Rectangle{
        x: 100
        y: 100
        z:11
        width: 100
        height: 50
        color:"black"
        focus:true
        //activeFocus:

        MouseArea{
             anchors.fill:parent
             onClicked:{
                console.log("on clicked")
             }
        }
        Keys.onReturnPressed:{
            console.log("on clicked")
        }
    }

When put focus This property is set to true You can get the focus of the rectangular control . If you click this rectangle, it will trigger printing   on clicked, Here's the code .

        MouseArea{
             anchors.fill:parent
             onClicked:{
                console.log("on clicked")
             }

When the keyboard gets the focus of the rectangle, pressing enter will also trigger Print on clicked

The following code :

        Keys.onReturnPressed:{
            console.log("on clicked")
        }

When focus Set to false Or if you don't, you won't get the focus , The above two operations will be eliminated .

Anchor point :

    Rectangle
    {
        id:rect1
        width: 100
        height: 50
        color: "black"
    }
    Rectangle
    {
        x:rect1.width + 20
        id:rect2
        width: 100
        height: 50
        color: "black"
    }

result :

Through the anchor point :

    Rectangle
    {
        id:rect1
        width: 100
        height: 50
        color: "black"
    }
    Rectangle
    {
        id:rect2
        width: 100
        height: 50
        color: "black"
        anchors.left: rect1.right
        anchors.leftMargin: 20
    }
//    Re

        anchors.left: rect1.right  rect2 The left side of is equal to rect1 To the right of 

        anchors.leftMargin: 20  Left margin 20

Rectangle centered with parent control :

    Rectangle
    {
        id:rect2
        width: 100
        height: 50
        color: "black"
        anchors.centerIn: parent
    }

  Of course, both horizontal and vertical .

Rotation properties rotation:

rotate 30 degree

    Rectangle
    {
        id:rect2
        width: 100
        height: 50
        color: "black"
        rotation: 30
    }

Zoom attribute scale:

    Rectangle
    {
        id:rect2
        x:100
        y:100
        width: 100
        height: 50
        color: "black"
        rotation: 30
        scale: 2
    }

Set the edge control of the rectangle border:

    Rectangle
    {
        id:rect2
        x:100
        y:100
        width: 100
        height: 50
        color: "black"
        rotation: 30
        scale: 2
        border.width: 2
        border.color:"red"
    }

Rectangle fillet radian radius:

    Rectangle
    {
        id:rect2
        x:100
        y:100
        width: 100
        height: 50
        color: "black"
        rotation: 30
        scale: 2
        border.width: 2
        border.color:"red"
        radius: 15
    }

  qml Import the outer rectangle , In the other one qml As defined in