QML学习笔记3-定位-布局元素

定位元素: 有一些QML元素被用于放置元素对象，被称为定位器
QtQuick提供的定位器： Row、Column、Grid、Flow
Row: 水平排列
Column: 垂直排列
Grid: 栅格rows/columns(行列)排列
Flow(流) 通过flow(流)属性和layoutDirection(布局方向)属性来控制流的方向。它能够从头到底的横向布局，也可以从左到右或者从右
到左进行布局

布局元素: QML使用anchors(锚)对元素进行布局, 可以被所有的可视化QML元素使用
anchors是相对关系的表达式，通常需要与其他元素搭配使用
一个元素有6条锚定线(top顶， bottom底, left左， right右， horizontalCenter水平居中， verticalCenter垂直居中)
在文本元素中 有一条文本的锚定基线(baseline)。 每一条锚定线都有一个偏移量(offset)
在顶 底 左 右的锚定线被称作边距。 horizaontalCenter(水平中) vericalCenter(垂直中)与baseline(文本基线)中被称作偏移量

1 元素填充父类元素  
    anchors.fill: parent
    anchors.margins: 8        //上下左右各8像素
2 元素做对齐他的父元素
    anchors.left: parent.left
    anchors.leftMargin: 8  // 左边距8像素
3 元素的左边与他的父元素的右边对齐
    anchors.left: parent.right
4 元素中间对齐，    
    anchors.horizontalCenter: parent.horizontalCenter
5 元素在其父元素中居中
    anchors.centerIn: parent
6 元素水平方向居中对齐父类元素并向右偏移12个像素，垂直方向居中对齐
    anchors.horizontalCenter: parent.horizontalCenter
    anchors.horizontalCenterOffset: -12
    anchors.verticalCenter: parent.verticalCenter

输入元素：
文本输入(TextInput):文本输入允许用户输入一行文本。这个元素支持使用正则表达式验证器来限制输入和输入掩码的模式。
用户可以通过点击TextInout来改变焦点，可以使用keyNavigation(按键向导)附加属性，如tab键通过KeyNavigation.tab 来设置tab键切换聚焦

焦点区域(focusScope):如果焦点区域接收到焦点，它的最后一个使用focus：true的字元素接收焦点，它将会把焦点传递给最后申请焦点的子元素

例子：

//TLineEdit2.qml
import QtQuick 2.0

FocusScope {
    id: root
    width: 96; height: input.height + 8

    Rectangle{
        anchors.fill: parent
        color: 'lightsteelblue'
        border.color: 'green'
    }

    property alias text: input.text
    property alias input: input

    TextInput{
        id: input
        anchors.fill: parent
        anchors.margins: 4
        focus: true
    }
}

文本编辑(TextEdit)：与TextInput(文本输入)元素相似，它支持多行文本编辑，不在支持文本输入的限制，但是提供了已绘制文本的大小查询(paintedHeight, paintedWidth)按键元素(Key Element)：附加属性key允许你基于某个按键的点击来执行代码。
通过按键来控制元素的位置、旋转、缩放。例如使用up， down按键来移动一个方块， left，right按键来旋转一个元素，plus, minus按键缩放等等

import QtQuick 2.0

DarkSquare {
    width: 400; height: 200

    GreenSquare {
        id: square
        x: 8; y: 8
    }
    focus: true
    Keys.onLeftPressed: square.x -= 8
    Keys.onRightPressed: square.x += 8
    Keys.onUpPressed: square.y -= 8
    Keys.onDownPressed: square.y += 8
    Keys.onPressed: {
        switch(event.key) {
        case Qt.Key_Plus:
            square.scale += 0.2
            break;
        case Qt.Key_Minus:
            square.scale -= 0.2
            break;
        }
    }
}