2014年6月10日 星期二

操作QML的版面配置 ( Positioners and Layouts In QML )

介紹:
  • 如何操作QML的版面配置
Introduction:
  • How to use layout items in QML

開發環境:
  • QT 5.2
  • QtQuick 2.1

<Square.qml>

import QtQuick 2.0

Rectangle {
    id:root
    property alias color: root.color
    width: 48
    height: 48
    color: "#ea7025"
    border.color: Qt.lighter(color)
}

先建立Square.qml,接下來做的每一個示範都會用到此正方形。


<main.qml>
import QtQuick 2.0

Rectangle {
    id      : root
    width   : 300
    height  : 300
    color   : "#D8D8D8"
    Row {
        id : row
        anchors.centerIn: parent
        spacing : 20
        Square{color:"red"}
        Square{color:"blue"}
        Square{color:"green"}
    }
}

編譯成功後,會顯示以下排列方式。



<main.qml>
import QtQuick 2.0

Rectangle {
    id      : root
    width   : 300
    height  : 300
    color   : "#D8D8D8"
    Column {
        id : col
        anchors.centerIn: parent
        spacing : 20
        Square{color:"red"}
        Square{color:"blue"}
        Square{color:"green"}
    }
}

編譯成功後,會顯示以下排列方式。


<main.qml>
import QtQuick 2.0

Rectangle {
    id      : root
    width   : 300
    height  : 300
    color   : "#D8D8D8"
    Grid {
        id: grid
        rows: 2
        columns: 2
        anchors.centerIn: parent
        spacing: 20
        Square{color:"red"}
        Square{color:"blue"}
        Square{color:"green"}
        Square{color:"yellow"}
    }
}

編譯成功後,會顯示以下排列方式。


<main.qml>
import QtQuick 2.0

Rectangle {
    id      : root
    width   : 300
    height  : 300
    color   : "#D8D8D8"
    Flow {
        anchors.fill: parent
        anchors.margins: 20
        spacing: 20
        Square{color:"red"}
        Square{color:"blue"}
        Square{color:"green"}
        Square{color:"yellow"}
        Square{color:"red"}
        Square{color:"blue"}
        Square{color:"green"}
        Square{color:"yellow"}
    }
}

編譯成功後,會顯示以下排列方式。


0 意見:

張貼留言