QML元素布局

1.定位器

Row
Properties(属性)
```
- add:Transition(过渡)
- bottomPadding:real
- topPadding:real
- leftPadding:real
- rightPadding:real
- effectiveLayoutDirection:enumeration
- layoutDirection:enumeration
- move:Transition
- padding:real
- populate:transition
- spacing:real
```
Signal(信号)
positioningComplete:定位完成后发出
Method
forceLayout: 行通常每帧一次定位其子代。这意味着内部脚本块有可能对底层的子对象进行更改，但尚未相应地更新该行。此方法强制该行立即响应其子级中的任何未完成的更改。

属性	用法
add	1.当有元素被添加到定位器内且是该定位器的子元素时或有元素变成定位器的子元素时会执行该过渡动画 2，当该定位器有子元素的属性Item::visible由false转变为true时,会执行该过渡动画
topPadding bottomPadding leftPadding rightPadding	定义了上下左右的内容内边距
spacing	相邻元素的边距,默认是0pixel
populate	定义了当定位器被创建时定位的过渡动画
move	定义了当定位器内元素移动或者重新定义大小时执行的过渡动画
effectiveLayout	定义了行定位器有效布局方向
layoutDirection	定义了行定位器的布局方向有两个可选值: 1.Qt.LeftToRight(从左到右进行布局) 2.Qt.RightToLeft(从右向左布局)

demo:

import QtQuick 2.7

Rectangle {
        width:200;
        height:300;
        Row {
                spacing:2;
                leftPadding:10;
                topPadding:20;
                Rectangle{color:"red";width:50;height:50;}
                Rectangle{color:"green";width:20;height:50;}
                Rectangle{color:"blue";width:50;height:20;}
        }
}

Column
- Poperties（属性)
  - add:Transition
  - topPadding:real
  - bottomPadding:real
  - rightPadding:real
  - leftPadding:real
  - padding:real
  - populate:Transition
  - move:real
  - spacing:real
- Signal(信号)
  - positioningComplete: 当定位器定位完成时发送的信号
- Method(方法)
  - forceLayout:强制Column定位器刷新以应对子元素已经改变的不及时反应 Note:必须在容器已经构造完成后调用

属性	用法
add	当有元素成为定位器的子元素调用的过渡动画
topPadding bottomPadding leftPadding rightPadding padding	定位器的上下左右内边距
populate	定位器首次创建时调用的过渡动画
move	定位器内元素移动或者大小发生变化时调用的过渡动画

Layout Demo

import QtQuick 2.7

Rectangle {
        width:200;
        height:300;
        Column {
                spacing:2;
                leftPadding:10;
                topPadding:20;
                Rectangle{color:"red";width:50;height:50;}
                Rectangle{color:"green";width:20;height:50;}
                Rectangle{color:"blue";width:50;height:20;}
        }
}

Transition Demo

import QtQuick 2.7

Rectangle {
        width:200;
        height:300;
        Column {
                spacing:2;
                leftPadding:10;
                topPadding:20;
                Rectangle{color:"red";width:50;height:50;}
                Rectangle{id:greenRect;color:"green";width:20;height:50;}
                Rectangle{color:"blue";width:50;height:20;}
                move:Transition {
                        NumberAnimation {properties:"x,y";duration:1000}
                }
                focus:true;
                Keys.onSpacePressed:greenRect.visible = !greenRect.visible;
        }
}

Grid
- Properties(属性)
  - add:Transition
  - topPadding:real
  - bottomPadding:real
  - leftPadding:real
  - rightPadding:real
  - padding:real
  - cloumnSpacing:qreal
  - rowSpacing:qreal
  - columns:int
  - rows:int
  - move:Transition
  - populate:Transition
  - effectiveHorizontalItemAlignment:enumeration
  - horizontalItemAlignment:enumeration
  - efficetiveLayoutDirection:enumeration
  - layoutDirection:enumeration
  - verticalItemAlignment:enumeration
  - spacing:qreal
  - flow:enumeration
- Signal(信号)
  - positioningComplete:定位器创建完成时发出的信号
- Method(方法)
  - forceLayout:为了应对子元素修改属性时能够及时刷新布局,可以强制其刷新布局注:该方法必须在定位器容器创建完成后调用

属性	用法
add	当有新子元素加入时执行的过渡动画
move	当有子元素位置发生改变或者大小发生改变(间接位置发生改变)时执行过渡的动画
populate	定位器创建时执行的动画
topPadding bottomPadding leftPadding rightPadding padding	定位器上下左右内边距
rowSpacing columnSpacing spacing	定位器行外边距列外边距
rows columns	定位器的行数列数
layoutDirection	布局方向,有两个可选值 1.Qt.LeftToRight:元素从左向右布局 2.Qt.RightToLeft:元素从右向左布局
effectiveLayoutDirection	有效布局方向
horizontalItemAlignment	水平子元素对齐布局方式有3个可选值 1.Grid.AlignLeft(左对齐) 2.Grid.AlignRight(右对齐) 3.Grid.AlignHCenter(水平居中对齐)
verticalItemAlignment	垂直子元素对齐方式有三个可选值 1.Grid.AlignTop(顶对齐) 2.Grid.AlignBottom(底对齐) 3.Grid.AlignVCenter(垂直居中对齐)
effectiveHorizontalItemAlignment	有效水平子元素对齐方式
flow	子元素流布局方式有两个可选值 1.Qt.LeftToRight(从左向右) 2.Qt.TopToBottom(从上向下)

Layout Demo

Rectangle {
        width:300;
        height:300;
        Grid {
                rows:3;
                columns:3;
                rowSpacing:10;
                columnSpacing:10;
                verticalItemAlignment:Grid.AlignBottom;
                horizontalItemAlignment:Grid.AlignRight;
                Rectangle{color:"red";width:50;height:50;}
                Rectangle{color:"green";width:20;height:70;}
                Rectangle{color:"blue";width:70;height:20;}
                Rectangle{color:"red";width:30;height:40;}
                Rectangle{color:"green";width:55;height:45;}
                Rectangle{color:"blue";width:80;height:35;}
                Rectangle{color:"red";width:70;height:50;}
                Rectangle{color:"green";width:50;height:40;}
                Rectangle{color:"blue";width:40;height:60;}
        }
}

Flow
- Properties(属性)
  - add:Transition
  - move:Transition
  - populate:Transition
  - topPadding:real
  - bottomPadding:real
  - leftPadding:real
  - rightPadding:real
  - padding:real
  - spacing:real
  - layoutDirection:enumeration
  - effectiveLayoutDirection:enumeration
  - flow:enumeration
  Signal(信号)
  - positioningComplete:定位器定位完成后发出
  Method(方法)
  - forceLayout:为了应对子元素属性改变能够及时作出反应,强制刷新布局注:需要在定位器容器构造完成后才能调用该方法

属性方法与其他定位器同名同义

2.布局管理器

1.GridLayout

Properties(属性)

rows:int
column:int
rowSpacing:real
columnSpacing:real
layoutDirection:enumeration
flow:enumeration

属性	方法
rows	布局行数
columns	布局列数
rowSpacing	行元素边距
columnSpacing	列元素边距
layoutDirection	布局方向
flow	流式布局方向

布局管理器不止强大于此,布局管理器真正强大的威力在于能给你想要放置的元素优先对待,一旦成为布局管理器的子元素你可以设置如下属性

子元素附加属性	含义
Layout.row	子元素行号
Layout.column	子元素列号
Layout.rowSpan	子元素行跨度默认是1
Layout.columnSpan	子元素列跨度默认是1
Layout.minimumWidth	子元素最小宽度
Layout.minimumHeight	子元素最小高度
Layout.maximumWidth	子元素最大宽度
Layout,maximumHeight	子元素最大高度
Layout.preferredWidth	子元素首选宽度
Layout.preferredHeight	子元素首选高度
Layout.fillWidth(bool)	是否尽可能宽
Layout.fillHeight(bool)	是否尽可能高
Layout.alignment	子元素对齐方式可能有如下值或者不冲突的或与 1.Qt.AlignLeft(左对齐) 2.Qt.AlignRight(右对齐) 3.Qt.AlignTop(顶对齐) 4.Qt.AlignBottom(底对齐) 5.Qt.AlignHCenter(水平居中对齐) 6.Qt.AlignVCenter(垂直居中对齐) 7.Qt.AlignBaseline(基线对齐)
Layout.margins Layout.leftMargin Layout.rightMargin Layout.topMagin Layout.bottomMargin	子元素的上下左右外边距

Demo

import QtQuick 2.7
import QtQuick.Layouts 1.3

Rectangle {
    width:600;
    height:600;
    GridLayout {
        anchors.fill:parent;
        rows:2;
        columns:2;
        Rectangle {
            Layout.row:1;
            Layout.column:1;
            color:"red";
            width:80;
            height:40;
            Layout.fillWidth:false;
            Layout.fillHeight:true;
        }
        Rectangle {
            Layout.row:1;
            Layout.column:0;
            color:"green";
            width:30;
            height:50;
            Layout.fillHeight:false;
        }
        Rectangle {
            Layout.row:0;
            Layout.column:1;
            color:"blue";
            width:40;
            height:70;
            Layout.fillHeight:false;
        }
        Rectangle {
            Layout.row:0;
            Layout.column:0;
            color:"cyan";
            width:50;
            height:90;
            Layout.fillWidth:false;
        }
    }
}

2.RowLayout ColumnLayout

属性	含义
layoutDirection	布局方向(Qt.LeftToRight or Qt.TopToBottom)
spacing	元素之间边距

RowLayout,ColumnLayout子元素也具有GridLayout子元素的附加属性,不再赘述

QML元素布局

QML元素布局

1.定位器

2.布局管理器

1.GridLayout

猜你喜欢