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

Flow布局与Grid布局差异：自动适应与网格模式

最新推荐文章于 2025-11-25 09:00:00 发布

原创最新推荐文章于 2025-11-25 09:00:00 发布 · 743 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#学习 #qt #python

本文探讨了Flow布局与Grid布局的区别，前者不设行列属性，根据宽高动态调整item布局，如LeftToRight模式下的自动换行，而Grid布局则明确行列设定。通过实例展示了两者在实际应用中的效果和行为差异。

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的宽度了，所以会被放到下一行来显示。
这个就跟英文单词的显示很类似，当第一行写不下某个单词的时候，一般情况下会放到下一行来进行处理。
而竖直的时候，不会去考虑他的宽度，而是去考虑他的高度是一个道理的