简单的转换（ Simple Transformations）

QML元素对象通常能够被平移， 旋转， 缩放。

简单的位移是通过改变x,y坐标来完成的。 旋转是改变rotation（ 旋转） 属性来完成的， 这个值使⽤⾓度作为单位
（ 0~360） 。 缩放是通过改变scale（ ⽐例） 的属性来完成的， ⼩于1意味着缩⼩， ⼤于1意味着放⼤。

新建ClickableImage组件，代码

import QtQuick 2.0

Image {
    id: img
    //图路径
    source: "qrc:/meng.png"
    //定义信号
    signal clicked()

    MouseArea{
        anchors.fill: parent
        onClicked: img.clicked()
    }
}

使用三次组件，分别对应位移，旋转，缩放

Item{
        anchors.fill: parent

        ClickableImage{
            id: img1
            x: 50
            y: 50
            onClicked: y += 20
        }

        ClickableImage{
            id: img2
            x: 200
            y: 50
            onClicked: rotation += 20
        }

        ClickableImage{
            id: img3
            x: 350
            y: 50
            onClicked: scale -= 0.1
        }
    }

0_1526278295129_20180514_140702.gif

定位元素（ Positioning Element）

有⼀些QML元素被⽤于放置元素对象， 它们被称作定位器， QtQuick模块提供了Row， Column， Grid， Flow⽤来作为定位器。

新建组件MySquare

import QtQuick 2.0

Rectangle {
    width: 48
    height: 48
    //颜色
    color: "#ff0000"
    //边线颜色-高亮颜色
    border.color: Qt.lighter(color)
}

使用Column，列

Column{
        x: 5
        y: 5
        //间距
        spacing: 5
        //红方块
        MySquare{color: "#ea7025"}
        //绿方块
        MySquare{color: "#67c111"; width: 96}
        //蓝方块
        MySquare{color: "#00bde3"}
    }

0_1526278805606_a892170f-e64c-4ab0-a445-514a5c142ebd-image.png

使用Row, 行

Row{
        x: 5
        y: 5
        //间距
        spacing: 10
        //红方块
        MySquare{color: "#ea7025"}
        //绿方块
        MySquare{color: "#67c111"}
        //蓝方块
        MySquare{color: "#00bde3"}
    }

0_1526278934085_01848fc4-0086-487e-95b5-dbebae7cfcd6-image.png

使用Grid，栅格

Grid{
        x: 5
        y: 5
        //间距
        spacing: 10
        //行数
        rows: 2
        //列数
        columns: 3
        //红方块
        MySquare{color: "#ea7025"}
        //绿方块
        MySquare{color: "#67c111"}
        //蓝方块
        MySquare{color: "#00bde3"}

        MySquare{color: "#ea7025"}
        MySquare{color: "#ea7025"}
        MySquare{color: "#ea7025"}
    }

0_1526279079733_16901997-520a-48ea-ba0e-67c1c79e5a47-image.png

使用Flow，流，根据宽度，高度，会自动排列内部元素

Flow{
        //间距
        spacing: 10
        width: 96+10
        //红方块
        MySquare{color: "#ea7025"}
        //绿方块
        MySquare{color: "#67c111"}
        //蓝方块
        MySquare{color: "#00bde3"}
    }

0_1526279331796_c8d68a26-ec74-4723-9628-47f1b0016b2b-image.png

通常Repeater（ 重复元素） 与定位器⼀起使⽤。 它的⼯作⽅式就像for循环与迭代器的模式⼀样。

Grid{
        x: 5; y: 5
        spacing: 5

        Repeater{
            model: 16
            //红方块
            MySquare{color: "#ea7025"}
        }
    }

0_1526279487502_ffc63172-a9f6-45db-932a-53ce6eef7c73-image.png

源代码

Fork me on Gitee