QML学习 第二天

目录

Rectangle控件:

focus属性:

锚点:

矩形居中与父控件:

旋转属性rotation:

设置矩形的边控border:

矩形圆角弧度 radius:

  qml导入外部的矩形,在另外的一个qml中定义的

---

接着昨天.在来学点QML的空间.

Rectangle控件:

今天第一个空间就是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"
    }

如果要是两个矩阵重合了怎么办,其实还有第三个坐标z,默认z是0,如果设置z为1,就是z大的在上.

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")
        }
    }

当把focus这个属性设置为true就可以获取这个矩形控件的焦点.如果单击这个矩形就会触发打印  on clicked,下面这段代码.

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

当键盘获取矩形的焦点按下回车也会触发 打印 on clicked

下面代码:

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

当focus设置为false或者没有就不会获取焦点,上面两个操作也就没有了.

锚点:

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

结果:

通过锚点实现:

    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的左边等于rect1的右边

        anchors.leftMargin: 20 左边间隔20

矩形居中与父控件:

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

 当然水平和垂直都可以.

旋转属性rotation:

旋转30度

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

放缩属性scale:

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

设置矩形的边控border:

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

矩形圆角弧度 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导入外部的矩形,在另外的一个qml中定义的