QML的定位器Flow是一个流式布局,可以说是一个另类的Grid布局,有点相似,Flow布局方式不需要设置属性行与列,只要设置是先布局行还是列,它就会根据子项和布局空间的大小先布局好一行或者时列。
Rectangle{
anchors.centerIn: parent
height: 200
width: 300
color: "gray"
radius: 10
Flow { //自动排列子项,根据属性flow布局流,是先排满一行或者一列再进行第二行或者列
//注意的是,当剩下的空间不足以放下下一个子项,就得另外开始一行或者列。
anchors.fill: parent
anchors.centerIn: parent
spacing: 10 //子项的间隔
//flow:Flow.LeftToRight//默认从左到右排列
//flow:Flow.TopToBottom //从上到下排列
move:Transition { //子项增加时或者减少时的过度,也就是子项的visible变化的过度
NumberAnimation {
properties:"x";
duration: 1000
}
}
Text { id:text1;text: "Text"; font.pixelSize: 40 ;color: "red"}
Text { id:text2;text: "items"; font.pixelSize: 40 ;color: "red"}
Text { id:text3;text: "flowing"; font.pixelSize: 40 ;color: "red"}
Text { id:text4;text: "inside"; font.pixelSize: 40 ;color: "red"}
Text { id:text5;text: "a"; font.pixelSize: 40 ;color: "red"}
Text { id:text6;text: "Flow"; font.pixelSize: 40 ;color: "red"}
Text { id:text7;text: "item"; font.pixelSize: 40 ;color: "red"}
MouseArea{
anchors.fill: parent
onClicked: {text3.visible = !text3.visible}
}
}
}