qml学习------------GridLayout

来源：互联网发布：指南针软件诈骗编辑：程序博客网时间：2024/06/11 22:20

在qml中，除了定位器，还有另外一套布局，叫做布局管理器。布局管理器和Qt Widgets中的相似，他和定位器不同的是Item会自动调整Item的尺寸来使用界面的大小。这点跟Qt中的布局是完全相同的。

要使用Layouts ，比如引用他的模块
import QtQuick.Layouts 1.1

GirdLayout可以说是布局管理器中最复杂的，RowLayout和ColumnLayout可以说是GridLayout的特例。

下面就来学习下GridLayout吧。

 import QtQuick 2.2 import QtQuick.Layouts 1.1Rectangle{    width: 360;    height: 240;    color:"#eeeeee";    id:rootItem;    Text{        id: centerText;        text:"A Signal Text.";        font.pixelSize: 24;        font.bold: true;    }    function setTextColor(clr){        centerText.color = clr;    }    GridLayout{        anchors.left: parent.left;        anchors.leftMargin: 4;        anchors.bottom: parent.bottom;        anchors.bottomMargin: 4;        rows: 3;        columns: 3;        rowSpacing: 4;        columnSpacing: 4;        flow: GridLayout.TopToBottom;        ColorPicker{            color:Qt.rgba(Math.random() , Math.random() , Math.random() );            onColorPicked: setTextColor(clr);        }        ColorPicker{            color:Qt.rgba(Math.random() , Math.random() , Math.random() );            onColorPicked: setTextColor(clr);        }        ColorPicker{            color:Qt.rgba(Math.random() , Math.random() , Math.random() );            onColorPicked: setTextColor(clr);        }        ColorPicker{            color:Qt.rgba(Math.random() , Math.random() , Math.random() );            onColorPicked: setTextColor(clr);        }        ColorPicker{            color:Qt.rgba(Math.random() , Math.random() , Math.random() );            onColorPicked: setTextColor(clr);        }        ColorPicker{            color:Qt.rgba(Math.random() , Math.random() , Math.random() );            onColorPicked: setTextColor(clr);        }        ColorPicker{            color:Qt.rgba(Math.random() , Math.random() , Math.random() );            onColorPicked: setTextColor(clr);        }    }}

其中这个也可以通过flow来调整是先横向布局还是纵向布局。具体属性是TopToBottom, LeftToRight 。

0 0