继承自 Item
相关控件：Grid Row
Flow是一个浮动定位器，将其子项目定位在页面上的单词，包装它们以创建项目的行或列。
本文: https://www.lovejia.win/blog/article/Flow.html
参考原文：http://doc.qt.io/qt-5/qml-qtquick-flow.html
参考译文：http://blog.csdn.net/vampire_armand/article/details/39156569
属性说明
add : Transition
往Flow中增加组件或先创建位置，后给位置相应的子组件或一个组件由不可见变得可见时，这个过渡触发。过渡能用ViewTransition属性去访问添加在子组件上的细节。
注意：在Flow创建时已经是Flow的一部分的子组件不会触发这个过渡，取代的，是触发populate过渡。
bottomPadding : real / leftPadding : real / padding : real / rightPadding : real / topPadding : real
这些属性在内容周围保留了填充。
effectiveLayoutDirection : enumeration
布局的有效方向。当使用关联属性LayoutMirroring::enabled处理本地布局，栅格位置的可视化布局方向将会被镜像，但layoutDirection属性保持不变。
flow : enumeration
布局的流动方向。可能的值为
Flow.LeftToRight(默认) - 根据layoutDirection定位下一个子组件。当宽度超过限制，开始在下一行开始定位组件。
Flow.TopToBottom - 从顶到底定位下一个子组件，高度超过限制，开始在下一列定位组件。
layoutDirection : enumeration
布局的方向。可能值为：
Qt.LeftToRight(默认) - 子组件按照从顶到底，从左到右的顺序一个接一个定位。流方向依赖于Flow::flow属性。
Qt.RightToLeft - 子组件按照从顶到底，从右到左的顺序一个接一个定位，流方向依赖于 Flow::flow属性。
move : Transition
当由于添加，移除或重新排列子组件导致组件失去当前所处的位置，或改变组件的大小导致子组件失去位置时，这个过渡被触发。过渡能用ViewTransition属性去访问添加在子组件上的细节。
注意：对这个过渡来说，只有当过渡被在移动组件的位置添加组件而失去位置所触发时，ViewTransition.targetIndexes和ViewTransition.targetItems列表才被设置。其他情况，列表是空的。
注意：在Qt Quick 1，Flow被创建时的所有存在子组件，都使用这个过渡。而在Qt Quick 2中，使用populate这个过渡来处理Flow的第一次创建。
populate : Transition
Flow第一次被创建时，已经是Flow的一部分的子组件触发的过渡。过渡能用ViewTransition属性去访问添加在子组件上的细节。
spacing : real
相邻的组件之间的空间。以像素为单位，默认值为0。
功能简述
Flow是一个浮动定位器，像在一页上写字那样定位它的子组件，包装子组件到它的行或列上。
Flow没有行列属性，它会自动根绝宽高来计算item的行列。
例
下面的例子显示包含各种文本项目的Flow：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
| import QtQuick 2.0
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 }
}
|
Flow布局和Grid布局有点类似，但是Flow没有行列属性， 他会自动根绝宽高来计算item的行列。
以下示例Flow布局：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
| import QtQuick 2.0
Rectangle{
width: 360;
height: 240;
color:"#eeeeee";
id: rootItem;
Text{
id: centerText;
text:"A Signal Text.";
anchors.horizontalCenter: parent.horizontalCenter;
anchors.top: parent.top;
anchors.topMargin: 4;
font.pixelSize: 24;
font.bold: true;
}
function setTextColor(clr){
centerText.color = clr;
}
Flow{
anchors.left: parent.left;
anchors.leftMargin: 4;
anchors.bottom: parent.bottom;
anchors.bottomMargin: 4;
width: 280;
height: 130;
spacing: 4;
ColorPicker{
width: 80;
height: 20;
color: Qt.rgba(Math.random() , Math.random() , Math.random() , 1.0 );
onColorPicked: setTextColor(clr);
}
ColorPicker{
width: 100;
height: 40;
color: Qt.rgba(Math.random() , Math.random() , Math.random() , 1.0 );
onColorPicked: setTextColor(clr);
}
ColorPicker{
width: 80;
height: 25;
color: Qt.rgba(Math.random() , Math.random() , Math.random() , 1.0 );
onColorPicked: setTextColor(clr);
}
ColorPicker{
color: Qt.rgba(Math.random() , Math.random() , Math.random() , 1.0 );
onColorPicked: setTextColor(clr);
}
ColorPicker{
width: 35;
height: 35;
color: Qt.rgba(Math.random() , Math.random() , Math.random() , 1.0 );
onColorPicked: setTextColor(clr);
}
ColorPicker{
width: 20 ;
height: 80;
color: Qt.rgba(Math.random() , Math.random() , Math.random() , 1.0 );
onColorPicked: setTextColor(clr);
}
ColorPicker{
color: Qt.rgba(Math.random() , Math.random() , Math.random() , 1.0 );
onColorPicked: setTextColor(clr);
}
}
}
|
Flow会自动适应item的宽高，比如在LeftToRight模式下，他的宽大于了Flow的宽度了，所以会被放到下一行来显示。
这个就跟英文单词的显示很类似，当第一行写不下某个单词的时候，一般情况下会放到下一行来进行处理。而竖直的时候，不会去考虑他的宽度，而是去考虑他的高度。
