QML学习摘录 02 - 定位和布局

定位和布局

完整文档参考：https://github.com/cwc1987/QmlBook-In-Chinese

1. 定位元素

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

• Column（列）元素将它的⼦对象通过自上往下依次对齐⽅式进⾏排列。spacing属性⽤来设置每个元素之间的间隔⼤⼩。
• Row（⾏）元素将它的⼦对象从左到右，或者从右到左依次排列，排列⽅式取决于layoutDirection属性。spacing属性⽤来设置每个元素之间的间隔⼤⼩。
• Grid（栅格）元素通过设置rows（⾏数）和columns（列数）将⼦对象排列在⼀个栅格中。可以只限制⾏数或者列数。如果没有设置它们中的任意⼀个，栅格元素会⾃动计算⼦项目总数来获得配置，例如，设置rows为3，添加了6个⼦项目到元素中，那么会⾃动计算columns（列数）为2。属性flow（流）与layoutDirection（布局⽅向）⽤来控制⼦元素的加⼊顺序。spacing属性⽤来控制所有元素之间的间隔。
• Flow（流）。通过flow属性和layoutDirection（布局⽅向）属性来控制流的⽅向。它能够从头到底的横向布局，也可以从左到右或者从右到左进⾏布局。作为加⼊流中的⼦对象，它们在需要时可以被包装成新的⾏或者列。为了让⼀个流可以⼯作，必须指定⼀个宽度或者⾼度，可以通过属性直接设定，或者通过anchor（锚定）布局设置。
  

示例代码：演示了四种定位元素的基本用法

import QtQuick 2.3
/*定位元素 Positioning Element
  定位器 ：Row,Column,Grid,Flow 用以存放元素对象*/
Item{
    id:root
    width:800; height: 450
    Column{
        width: 200
        height: root.height
        x:20;y:10
        spacing:5
        Text{text: "Colum"}
        Rectangle{
         width: 50;height: 50
         color: "red"
        }
        Rectangle{
         width: 50;height: 50
         color: "green"
        }
        Rectangle{
         width: 50;height: 50
         color: "yellow"
        }
    }
    Row{
        width: 200
        height: root.height
        x:120;y:10
        spacing:5
        Text{text: "Row"}
        Rectangle{
         width: 50;height: 50
         color: "red"
        }
        Rectangle{
         width: 50;height: 50
         color: "green"
        }
        Rectangle{
         width: 50;height: 50
         color: "yellow"
        }
    }
    Grid{
        width: 300
        height: 300
        x:350;y:10
        rows:2
        columns: 2
        spacing:5
        Text{text: "Grid"}
        Rectangle{
         width: 50;height: 50
         color: "red"
        }
        Rectangle{
         width: 50;height: 50
         color: "green"
        }
        Rectangle{
         width: 50;height: 50
         color: "yellow"
        }
    }
    Rectangle{
        x:10;y:200
        width: parent.width-10
        height: parent.height
        Text{text: "Flow"}
        Flow{
            anchors.fill: parent
            anchors.margins: 20
            spacing: 5
            Repeater{//重复创建元素
                model:20
                Rectangle{
                 width: 50;height: 50
                 color: "red"
                }
            }
        }
    }
}

2. 布局元素

QML使⽤anchors（锚）对元素进⾏布局。anchors是基础元素对象的基本属性，可以被所有的可视化QML元素使⽤。anchors是相对关系的表达式，通常需要与其它元素搭配使⽤。

⼀个元素有6条锚定线（top顶，bottom底，left左，right右，horizontalCenter⽔平中，verticalCenter垂直中）。在⽂本元素（Text Element）中有⼀条⽂本的锚定基线（baseline）。每⼀条锚定线都有⼀个偏移（offset）值，在top，bottom，left，right的锚定线中它们也被称作margins。对于horizontalCenter与verticalCenter与baseline中被称作offsets.

示例代码：演示布局元素的使用

/* 布局元素 Layout Element QML使用anchors（锚）对元素进行布局  */
Rectangle {
    id: root
    width: 800;height: 800
    color: "lightblue"
    Rectangle {
        x: 0; y: 0
        width: 100;height: 100
        Rectangle {
            anchors.fill: parent
            color: "red"
        }
        Text { text: "fill:填充"  }
    }
    Rectangle {
        x: 105; y: 0
        width: 100;height: 100
        Rectangle {
            anchors.left: parent.left
            width: 50
            height: 50
            color: "green"
        }
        Text {text: "left:左对齐"}
    }
    Rectangle {
        x: 210
        y: 0
        width: 100
        height: 100

        Rectangle {
            anchors.horizontalCenter: parent.horizontalCenter
            width: 50
            height: 50
            color: "yellow"
        }
        Text { width: 100;wrapMode:Text.Wrap;text: "horizontalCenter:水平中间线对齐"}
    }
    Rectangle {
        x: 0
        y: 105
        width: 100
        height: 100
        Rectangle {
            anchors.centerIn: parent
            width: 50
            height: 50
            color: "blue"
        }
        Text {width: 100;wrapMode:Text.Wrap;text: "centerIn:水平居中" }
    }
    Rectangle {
        x: 105; y: 105
        width: 100;height: 100
        Rectangle {
            anchors.horizontalCenter: parent.horizontalCenter
            anchors.horizontalCenterOffset: 20
            width: 50; height: 50
            color: "blue"
        }
        Text {width: 100;wrapMode:Text.Wrap;text:"horizontalCenterOffset:偏移20"}
    }
    Rectangle {
        x: 0; y: 210
        width: 100;height: 100
        Rectangle {
            anchors.verticalCenter: parent.verticalCenter
            anchors.verticalCenterOffset: 20
            width: 50
            height: 50
            color: "blue"
        }
        Text {width: 100; wrapMode:Text.Wrap;text: "verticalCenterOffset:垂直居中偏移20"}
    }
    Rectangle {
        x: 210
        y: 105
        width: 100
        height: 100
        Rectangle {
            anchors.verticalCenter: parent.verticalCenter
            width: 50
            height: 50
            color: "blue"
        }
        Text {width: 100;wrapMode:Text.Wrap;text: "verticalCenter:垂直居中"}
    }
 }

运行效果如下：