Qt Quick 定位器(Positioners)

 Qt Quick
时间:

定位器

定位器是一个容器,可以管理其子项目的布局。定位器包括Column,Row,Grid和Flow。如果他们的子项目不可见(visible为false),宽度或者高度为0,那么该子项目不会显示,也不会被布局。定位器可以自动布局其子项目,也就是说,其子项目不再需要显示设置x,y等坐标或使用anchors锚进行布局。下面分别介绍Column, Row, Grid 和 Flow. 可在帮助中心通过Item Positioners关键字查看。

  1. Column将其子项目排成一列
import QtQuick 2.2

Column {
    spacing: 2 //添加间距
    Rectangle { color: "red"; width: 50; height: 50 }
    Rectangle { color: "green"; width: 20; height: 50 }
    Rectangle { color: "blue"; width: 50; height: 20 }
}
  1. Row将其子项目排成一行
import QtQuick 2.0

Row {
    spacing: 2
    Rectangle { color: "red"; width: 50; height: 50 }
    Rectangle { color: "green"; width: 20; height: 50 }
    Rectangle { color: "blue"; width: 50; height: 20 }
}

3.Grid将其子项目排列在一个网格中。Grid会计算一个足够大的矩形网格来容纳所有的子项目。向网格中添加项目,会按照从左向右,从上向下的顺序进行排列。每一个项目都会被放置在网格左上角上(0,0)的位置。一个Grid默认有4列,可以有无限多的行容纳所有子项目。行数和列数也可以通过rows和columns属性指定。另外,与Row类似,Grid也可以通过spacing属性设置子项目之间的间距,此时,水平方向和垂直方向会使用相同的间距。如果需要分别设置水平方向和垂直方向的间距,可以使用rowSpacing和columnSpacing属性。

import QtQuick 2.0

Grid {
    columns: 3
    spacing: 2
    Rectangle { color: "red"; width: 50; height: 50 }
    Rectangle { color: "green"; width: 20; height: 50 }
    Rectangle { color: "blue"; width: 50; height: 20 }
    Rectangle { color: "cyan"; width: 50; height: 50 }
    Rectangle { color: "magenta"; width: 10; height: 10 }
}

在Grid中可以使用horizontalItemAlignment和verticalItemAlignment分别设置子项目在水平方向和垂直方向的对其方式,其各自的可选值为:

  • 水平方向: Grid.AlignLeft, Grid.AlignRight 和 Grid.AlignHCenter;
  • 垂直方向: Grid.AlignTop, Grid.AlignBottom 和 Grid.AlignVCenter.
  1. Flow

    Flow项目可以从前向后,像流一样布局其子项目,如同单词放置在页面上一样,通过换行,使这些子项目排列成多行或列。Flow排列项目的规则与Grid相似,主要区别使,Flow的子项目会在超出边界后自动换行,每行的子项目数不一定相同。Flow有一个flow属性,包含两个值:Flow.LeftToRight(默认)和Flow.TopToBottom.前者是按照从上到下顺序排列子项目,直到超出Flow的高度,然后换到下一列。下面的例子显示了一个包含多个Text子项目的Flow。

import QtQuick 2.0

Rectangle {
    color: "lightblue"
    width: 300; height: 200
    Flow {
        anchors.fill: parent
        anchors.margins: 4
        spacing: 10
        Text { text: "Text"; font.pixelSize:  40 }
        Text { text: "items"; font.pixelSize:  40 }
        Text { text: "flowing"; font.pixelSize:  40 }
        Text { text: "inside"; font.pixelSize:  40 }
        Text { text: "a"; font.pixelSize:  40 }
        Text { text: "Flow"; font.pixelSize:  40 }
        Text { text: "item"; font.pixelSize: 40 }
    }
}
  1. 使用过渡(Transition)
    定位器添加或删除一个子项目时,可以使用一个过渡(Transition)使这些操作具有动画效果。4个定位器都有add,move和populate属性,它们需要分配一个Transiton对象。add过渡应用在定位器创建完毕后,向定位器中添加一个子项目,或者将子项目通过更换父对象方式从定位器中移除对象时;populate过渡应用在定位器第一次创建时,只会运行一次。此外,将项目的透明度更改为0时,会使用move过渡隐藏项目;当项目的透明度为非0时,会使用add过渡显示项目。定位器过渡只会影响项目的位置(x,y)
import QtQuick 2.2

Column {

    spacing: 2

    Rectangle { color: "red"; width: 50; height: 50 }
    Rectangle { id: greenRect; color: "green";
                    width: 20; height: 50 }

    Rectangle { color: "blue"; width: 50; height: 20 }

    move: Transition {
        NumberAnimation { properties: "x,y"; duration: 1000 }
    }

    focus: true
    Keys.onSpacePressed: greenRect.visible = ! greenRect.visible

}

当按下空格时,绿色矩形的visible值会被翻转。当它在显示与隐藏之间交换时,蓝色矩形会自动应用move过渡进行移动。

  1. Positoner
    在Column,Row,Grid和Flow中会附加一个Positioner类型的对象作为顶层子项目,它可以为定位器中的子项目提供索引等信息。在下面的例子中,Grid通过Repeater创建了16个子矩形,每一个子矩形都使用Positioner.index显示了它在Grid中的索引,而第一i个矩形使用了不同颜色进行绘制。
import QtQuick 2.2

Grid {
    Repeater {
        model: 16
        Rectangle {
            id: rect
            width: 30; height: 30
            border.width: 1     //设置边宽
            color: Positioner.isFirstItem ? //isFirstItem第一项
                       "yellow" : "lightsteelblue"  //
            Text { text: rect.Positioner.index }    //设置矩形编号
        }
    }
}

  1. Recpeater
    Repeater类型用来创建大量相似的项目。与其他视图类型一样,一个Repeater包含一个模型model属性和一个委托delegate属性。委托用来将模型中的每一个条目进行可视化显示。一个Rectangle通常会包含在一个定位器中,用于直观地对Repeater产生的众多委托项目进行布局。下面的例子中显示了一个Repeater和一个Grid结合使用,来排列一组Rectangle项目。
import QtQuick 2.0

Rectangle {
    width: 400; height: 240; color: "black"
    Grid {
        x: 5; y: 5
        rows: 5; columns: 5; spacing: 10
        Repeater {
            model: 12
            Rectangle {
                width: 70; height: 70; color: "lightgreen"
                Text {
                    text: index; font.pointSize: 30
                    anchors.centerIn: parent
                }
            }
        }
    }
}

这里使用了一个矩形作为委托,在其中通过index索引属性显示了每个子项目的编号。在Recpeater中创建的项目数量可以通过count属性获得,该属性是只读的。


0 评论