QML布局管理基础(一)
来源:互联网 发布:秦舞阳 知乎 编辑:程序博客网 时间:2024/06/03 17:31
在QT中的布局主要采用QHBoxLayout, QVBoxLayout和QGridLayout这三个类进行实现,在QML中该如何进行UI的布局管理呢?答案是QML中提供了三种布局管理器:Row,、Column、Grid,在使用时灵活使用Anchor进行布局,可以很方便的调整UI,省去了布局通过代码维护的麻烦。
Row
QML 中的 Row 元素会将其子控件都排列在同一行,相互不重叠。我们还可以使用它的spacing 属性来定义子控件之间的距离。比如下列代码就会产生如图所示的效果:
Row {
spacing: 2
Rectangle { color: "red"; width: 50; height: 50 }
Rectangle { color: "green"; width: 20; height: 50 }
Rectangle { color: "blue"; width: 50; height: 20 }
}
Column
QML 中的 Column元素会将其子控件都排列在同一行,相互不重叠。我们还可以使用它的spacing 属性来定义子控件之间的距离。比如下列代码就会产生如图所示的效果:
Column {
spacing: 2
Rectangle { color: "red"; width: 50; height: 50 }
Rectangle { color: "green"; width: 20; height: 50 }
Rectangle { color: "blue"; width: 50; height: 20 }
}
Grid
QML 中的 Grid元素会将其子控件都均匀地排列在一个网格内,相互不重叠,每一个子控件都被放置在一个网格单元的(0,0)位置,也就是左上角。Grid的rows 和columns属性定义网格的行数和列数,列数默认是4。我们还可以使用Grid的spacing 属性来定义网格单元之间的距离,这里注意水平和垂直方向的spacing都是一样的。比如下列代码就会产生如图所示的效果:
Grid {
columns: 3
spacing: 2
Rectangle { color: "red"; width: 50; height: 50 }
Rectangle { color: "green"; width: 20; height: 50 }
Rectangle { color: "blue"; width: 50; height: 20 }
Rectangle { color: "cyan"; width: 50; height: 50 }
Rectangle { color: "magenta"; width: 10; height: 10 }
}
混合应用
我们还可以将Grid、Row 和 Column 进行混合应用。比如下面的代码会产生如图所示的效果:
Column {
spacing: 2
Rectangle { color: "red"; width: 50; height: 50 }
Row {
spacing: 2
Rectangle { color: "yellow"; width: 50; height: 50 }
Rectangle { color: "black"; width: 20; height: 50 }
Rectangle { color: "blue"; width:50; height: 20 }
}
Rectangle { color: "green"; width: 20; height: 50 }
}
Anchor
以上方法进行排列是不重叠的,而anchor通俗的说是当前图形相对于某一图形的位置(可重叠)
每一个item 都可以被认为具有 7 条隐藏的“anchor lines":left、 horizontalCenter、 right、 top、 verticalCenter、baseline、以及bottom,如下图所示:
····
其中baseline是指的文本所在的线,在上图中并未标出,如果item没有文字的话baselinw就和top的位置是相同的。
除此之外,Anchor系统还提供了margins 和offsets。margins 是指一个item和外界之间所留有的空间,而offsets 则可以通过使用 center anchor lines来进行布局。如下图所示
·····
使用 QML anchoring系统,我们可以定义不同items之间的anchor lines之间的关系。例如:
Rectangle { id: rect1; ... }
Rectangle { id: rect2; anchors.left: rect1.right; anchors.leftMargin: 5; ... }
·····
我们还可以使用多个anchors:
Rectangle { id: rect1; ... }
Rectangle { id: rect2; anchors.left: rect1.right; anchors.top: rect1.bottom; ... }
·····
通过定义多个水平或垂直的anchors,我们还可以控制item的大小,例如:
Rectangle { id: rect1; x: 0; ... }
Rectangle { id: rect2; anchors.left: rect1.right; anchors.right: rect3.left; ... }
Rectangle { id: rect3; x: 150; ... }
·····
注意:出于效率方面的考虑,我们只允许对一个item的邻居和之接父亲使用anchor定义。比如下面的定义是不合法的:
Item {
id: group1
Rectangle { id: rect1; ... }
}
Item {
id: group2
Rectangle { id: rect2; anchors.left: rect1.right; ... } // invalid anchor!
}
- QML布局管理基础(一)
- QML基础——UI布局管理
- QML基础——UI布局管理
- QML基础——UI布局管理
- QML基础——UI布局管理
- QML基础——UI布局管理
- QML基础——UI布局管理
- QML中的布局管理
- QML布局管理
- QML UI布局管理
- QML的UI布局管理
- QML布局管理--基于锚的布局
- QML布局管理—QML定位器和重复器
- BB10 Cascades:QML中的布局管理方式
- qml+opencv(一)
- QML入门必备基础知识之——UI布局管理
- qml学习------------Grid(网格布局)
- qml学习----------Flow(流式布局)
- 对C++中指向类的静态成员的指针的认识
- Longest Consecutive Sequence 非递归实现
- http://www.ebay.com/cln/0846977/-/157876841014/2015-01-17.html
- JavaScript
- java学习day22
- QML布局管理基础(一)
- linux gpg 使用笔记
- 降低HWM方法实验move shrink
- React 框架解析
- 九度 题目1122:吃糖果
- 【BST】返回搜索二叉树最大的k个数
- storm 的一个drpc例子(值得一看)
- 8 第八天【健身】
- 1.12-1.17 项目进度