qml学习----------Flow（流式布局）

Flow布局和Grid布局有点类似，但是Flow没有行列属性， 他会自动根绝宽高来计算item的行列。

import QtQuick 2.2

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;
//rows: 3;
//columns: 3;
//rowSpacing: 4;
//columnSpacing: 4;
width: 280;
height: 130;
spacing: 4;

//描述表格的流模式，如果是LeftToRight 从左到右填充一行，满了就填充第二行
//flow: Grid.TopToBottom;

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属性的时候，他的默认属性是lefttoright ， 运行效果如下：



在设置flow： Grid.TopToRight 的时候运行效果如下：



可以看出他的差别还是相当的大的，为啥会这样的呢?就是因为他会自动适应item的宽高，比如在LeftToRight模式下，当插入第四个元素的时候，他的宽就大于了Flow的宽度了，所以会被放到下一行来显示。

这个就跟英文单词的显示很类似，当第一行写不下某个单词的时候，一般情况下会放到下一行来进行处理。

而竖直的时候，不会去考虑他的宽度，而是去考虑他的高度是一个道理的