QML Button组件 及 定位器

新建Button.qml

import QtQuick 2.0

Rectangle{

    id:root
    //定义属性别名 text  值为label的text
    property alias text: label.text
    //定义信号名字  利用on实现调用函数
    //signal clicked
    signal myClicked

    width: 116; height: 26
    color: "lightsteelblue"
    border.color: "slategrey"
    radius:8

    Text {
        id: label
        anchors.centerIn: parent
        text: "Start"
    }
    MouseArea {
        anchors.fill: parent
        onClicked: {
            //root.clicked()
            root.myClicek()
        }
    }
}

主界面中调用：

import QtQuick 2.0
import QtQuick.Window 2.2
Window{
    width: 300
    height: 300
    visible: true
    Button{
        id:button
        x:12
        y:12
        //这里的text调用的是Button中定义的属性别名property alias text
        //如未定义 报错Cannot assign to non-existent property "text"
        text: "start"
        color: "blue"
        //onClicked: 
        //利用on调用Button里定义的信号
        onMyClicked:{
            status.text = "gagagga...."
            button.color ="cyan"
        }
    }
 }
    Text {
        id: status
        x:12
        y:76
        width: 116
        height: 26
        text: qsTr("waiting...")
        anchors.centerIn: parent
    }
}

定位器(Row{} Column{} Grid{} FLow{})
定义三个组件
BlueRectangle

import QtQuick 2.0

Rectangle { 
    width: 48
    height: 48
    color: "blue"
    //Qt.lighter(color)  颜色变亮
    border.color: Qt.lighter(color)
}

GreenRectangle

import QtQuick 2.0

Rectangle {
    width: 48
    height: 48
    color: "green"
    border.color: Qt.lighter(color)
}

RedRectangle

import QtQuick 2.0

Rectangle {
    width: 48
    height: 48
    color: "red"
    border.width: 5
    border.color: Qt.lighter(color)
}

列定位：

    Column{
        id:col
        anchors.centerIn: parent
        spacing: 8
        RedRectangle{

        }
        BlueRectangle{
            width: 94
        }
        GreenRectangle{

        }
    }

行定位：

Row{
        id:row
        anchors.centerIn: parent
        spacing: 8
        RedRectangle{

        }
        BlueRectangle{
            width: 94
        }
        GreenRectangle{

        }
    }

网格Grid定位：

Grid{
        id:grid
        anchors.centerIn: parent
        //设置网格的行数
        //rows:2
        //设置网格的列数
        //columns: 2
        //不设置时网格默认列数为4
        spacing: 8
        RedRectangle { }
        RedRectangle { }
        RedRectangle { }
        RedRectangle { }
        RedRectangle { }
    }

Flow 结合LayoutDirection控制显示方式（流布局 宽度不够自动换行）

Flow {
        anchors.fill: parent
        //marigins 针对的是父元素的margin
        anchors.margins: 20
        spacing: 20
        RedRectangle { }
        BlueRectangle { }
        GreenRectangle { }
    }

Repeat 重复