QML Button组件 及 定位器

新建Button.qml

import QtQuick 2.0Rectangle{    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.0import QtQuick.Window 2.2Window{    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.0Rectangle {     width: 48    height: 48    color: "blue"    //Qt.lighter(color)  颜色变亮    border.color: Qt.lighter(color)}

GreenRectangle

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

RedRectangle

import QtQuick 2.0Rectangle {    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 重复