Rectangle 1Rectangle示例 布局管理 1Column 将子项目排成一列2Row 将子项目排成一行3Grid排成网格4Flow 将子项目从前向后像流一样排列Grid示例5anchors锚6Layouts布局管理器

自己博客中的代码可以在https://github.com/xixihaha331/QT_Repository中获取

1.Rectangle

属性:id;text;color;width;height; border.color 边框颜色 border.width边框宽度 opacity 透明度 radius 绘制圆形 gradient 渐变色

1.1Rectangle示例

import QtQuick 2.8 import QtQuick.Window 2.2 Window { visible: true width: 640 height: 480 title: qsTr("Rectangle example") Item{ Rectangle{ width: 400 height: 400 border.color: "red" border.width: 3 color: "green" opacity: 0.3 radius: width/2 gradient:Gradient{ GradientStop{ position: 0.0 color: "green" } GradientStop{ position: 0.4 color: "yellow" } GradientStop{ position: 0.8 color: "blue" } } } } }

如图:

2.布局管理

2.1Column 将子项目排成一列

2.2Row 将子项目排成一行

2.3Grid排成网格

属性:rows设置网格的行数;columns;spacing;columnSpacing列间距 rowSpacing 行间距

2.4Flow 将子项目从前向后,像流一样排列

和Grid相似,主要区别是Flow的子项目会在超过边界后自动换行,每行的子项目数目不一定相同 属性:flow包含两个值,Flow.LeftToRight从左向右排列子项目;FLow.TopBottom从上到下

2.5anchors锚 2.6Layouts布局管理器 LayoutMirroring在水平方向镜像锚布局

都有的属性: spacing Repeater用来创建大量相似的项目 属性:model项目个数;delegate;count创建的项目数量可以通过count属性获得 Transition过渡,定位器添加或者删除一个子项目时,可以使用这个过渡属性,使操作具有动画效果

Grid示例

import QtQuick 2.8 import QtQuick.Window 2.2 Window{ visible: true width: 600 height: 800 title: qsTr("布局管理") color: "black" Grid{ x:100 y:100 rows: 4 columns: 3 rowSpacing: 50 columnSpacing: 50 Repeater{ model: 12 Rectangle{ width: 100 height: 100 color: "yellow" radius: width/2 Text { text: index font.pointSize: 30//控制数字的大小 anchors.centerIn: parent//让数字处于圆圈的中间 } } } } }

如图:

Transition过渡,定位器添加或者删除一个子项目时,可以使用这个过渡属性,使操作具有动画效果

import QtQuick 2.8 import QtQuick.Window 2.2 Window{ visible: true width: 500 height: 400 color: "black" Column{ Rectangle{ width: 100 height: 100 color: "yellow" radius: width/2 } Rectangle{ id:green_rectangle x: 25 width: 50 height: 100 color: "green" } Rectangle{ width: 100 height: 100 color: "red" radius: width/2 } move:Transition { NumberAnimation{ properties: "x,y" duration: 1000 } } focus: true Keys.onSpacePressed: green_rectangle.visible = ! green_rectangle.visible } }

2.5anchors锚

除了前面总结的Row;Column;Grid;Flow;qt quick还提供了一种使用anchors锚来进行项目布局的方法

属性:left;right;bottom;top来指定位置 topMargin;bottomMargin;leftMargin;rightMargin来指定锚边距,或者使用anchor.margins来为所有的4个边指定相同的边距 anchors.fill:parent可以使事件充满整个父项目区域 anchors.centerIn.parent 将什么东西放在父项目中间

实现鼠标双击变红色,单击变黄色

import QtQuick 2.8 import QtQuick.Window 2.2 Window{ Rectangle{ id: rectangle1 width: 100 height: 100 color: "red" radius: width/2 } Rectangle{ id: rectangle2 width: 100 height: 100 color: "green" radius: width/2 anchors.bottomMargin: 30 anchors.left: rectangle1.right MouseArea{ anchors.fill: rectangle2 onClicked: { rectangle2.color = 'yellow' } onDoubleClicked: { rectangle2.color = 'red' } } } }

2.6Layouts布局管理器

布局管理器主要包括:RowLayout;ColoumnLayout;GridLayout Layouts不仅可以进行项目布局.还可以改变项目的大小 如果想要做到用户放大窗口时,我们的项目布局也随着窗口的拉伸进行自动的扩展 属性:Layout.fillWidth;Layout.fillHeight将其设置为true时,对象会根据窗口大小变化 对象大小约束Layout.minimumWidth;Layout.preferedWidth;Layout.maximumWidth还有相应的height的约束

import QtQuick 2.8 import QtQuick.Window 2.2 import QtQuick.Layouts 1.1 Window{ width: 100 height: 100 RowLayout{ anchors.fill: parent Rectangle{ id: rectangle1 color: "green" radius: width/2 Layout.fillWidth: true Layout.fillHeight: true Layout.minimumHeight: 50 Layout.maximumHeight: 400 Layout.minimumWidth: 50 Layout.maximumWidth: 400 } } }

LayoutMirroring镜像项目锚布局,意思是说,如果我们利用Row将项目从左向右排成一列,那么LayoutMirroring可以将项目从右向左排成一列, LayoutMirroring.enabled: true启动镜像 LayoutMirroring.childrenInherit: true那么该项目的所有子项目都会启动镜像