重庆网站建设培训学校,给别人做网站的销售叫什么软件,合肥创业网,金华电子商务网站建设目录 引言常见方法锚定#xff08;anchors#xff09;定位器Row、ColumnGridFlow 布局管理器RowLayout、ColumnLayoutGridLayoutStackLayout 总结 引言
UI界面由诸多元素构成#xff0c;如Label、Button、Input等等#xff0c;各种元素需要按照一定规律进行排布才能提高界… 目录 引言常见方法锚定anchors定位器Row、ColumnGridFlow 布局管理器RowLayout、ColumnLayoutGridLayoutStackLayout 总结 引言
UI界面由诸多元素构成如Label、Button、Input等等各种元素需要按照一定规律进行排布才能提高界面的可读性、美观度需要调整元素的绝对坐标也就是x、y使得界面上的元素保持一定的间距通过间距表达元素之间的关联性或者是区别。
排布策略多种多样诸如行排列、列排列、栅格排列等等将元素排布的策略抽象出来也就是我们所说的布局。Qt Quick中提供了多种布局方法本文旨在展示不同的布局方法以及探讨其适合的使用场景。
常见方法
锚定anchors 锚定是Qt Quick中较为特殊的布局方式通过设置Item的anchors属性去调整元素的水平、垂直位置如上图所示比较重要的基准线AnchorLine有left、righit、top、bottom以及horizontalCenter、verticalCenter还有一条baseline只针对Text元素不常用类似文字下划线的位置。示例代码如下
Rectangle {anchors.centerIn: parentwidth: 300height: 100color: Qt.rgba(247 / 255, 220 / 255, 111 / 255)Text {anchors.left: parent.leftanchors.bottom: parent.toptext: To Be Continuefont.family: Microsoft YaHei}
}需要注意的是fill、centerIn的锚定对象不再是AnchorLine而是Item与上述的属性互斥。
定位器
anchors对于单个元素的布局非常灵活、适应性很高但是对于多个元素的成组的布局而言代码可读性不高且可拓展性较差。下面将以4个Rectangle的水平排列为例子对比使用anchors和定位器的实现方案。 anchors实现代码如下
Rectangle {id: rect1width: 200height: 100color: gold
}Rectangle {id: rect2anchors.left: rect1.rightwidth: 100height: 50color: lightseagreen
}Rectangle {id: rect3anchors.left: rect2.rightwidth: 80height: 150color: lightcoral
}Rectangle {anchors.left: rect3.rightwidth: 100height: 120color: lightskyblue
}定位器实现代码如下
Row {anchors.fill: parentRectangle {width: 200height: 100color: gold}Rectangle {width: 100height: 50color: lightseagreen}Rectangle {width: 80height: 150color: lightcoral}Rectangle {width: 100height: 120color: lightskyblue}
}可以看到使用anchors的实现方式元素之间需要依次锚定若需要在水平布局后继续追加则需要延续这个规则若需要调换两个元素的位置需要调整自身的锚定和与之相关的元素的锚定如rect2需要调整只末尾在调整自身的anchors.left之外还需要调整rect3的anchors.left在界面元素较多的情况下很容易出现遗漏且很难排查。
而使用Row定位器的实现方式Row会调整自身的所有子元素将它们按照水平布局进行排布子元素内部只需要考虑自身的宽高相互之间并没有直接耦合关系插入和调整顺序只需要整个代码段进行调节后期对于间距的调整也可以通过定位器的spacing属性去调节。
Row、Column
Row和Column为行定位器和列定位器顾名思义就是水平排布以及垂直排布前面比较中有展示此处不再赘述。
Grid
Grid为栅格定位器一般用在元素较多的表单布局中示例代码如下
Grid {anchors.fill: parentcolumns: 3spacing: 5Rectangle {width: 100height: 100color: gold}Rectangle {width: 100height: 100color: lightseagreen}Rectangle {width: 100height: 100color: lightcoral}Rectangle {width: 100height: 100color: lightskyblue}
}Flow
Flow为流定位器功能与Grid类似用于元素较多的布局但是可以动态调整列的数量。可以看到Grid示例中固定了列数为3列而其右侧还有空间并未被填满Flow则为解决这个问题示例代码如下
Flow {anchors.fill: parentspacing: 5Rectangle {width: 100height: 100color: gold}Rectangle {width: 100height: 100color: lightseagreen}Rectangle {width: 100height: 100color: lightcoral}Rectangle {width: 100height: 100color: lightskyblue}
}布局管理器
上述两种布局方式锚定和定位器都只针对元素的坐标除了anchors.fill之外都没有对元素的宽高进行调整实际很多情况下是希望元素能够铺满整个窗口的也就是元素的宽高能够跟随窗口宽度的变化而变化的。而布局管理器则是为了处理这种情况而出现的示例代码如下
RowLayout {anchors.fill: parentspacing: 5Rectangle {Layout.preferredWidth: 100Layout.fillHeight: truecolor: gold}Rectangle {Layout.fillWidth: trueLayout.fillHeight: truecolor: lightseagreen}Rectangle {Layout.preferredWidth: 100Layout.fillHeight: truecolor: lightcoral}
}可以看到左右两个元素设置了固定的宽度Layout.preferredWidth为100而中间的元素设置Layout.fillWidth填充宽度在窗口调整时改变的是中间的元素而两侧不变。
布局管理器实现方式与定位器类似都是管理子元素的位置信息在使用时需要注意原本的width、height将不再生效取而代之的是附加属性Layout.preferredWidth、Layout.preferredHeight或是隐式宽高implicitWidth、implicitHeight推荐使用附加属性。 Layout.preferredWidth : real This property holds the preferred width of an item in a layout. If the preferred width is -1 it will be ignored, and the layout will use implicitWidth instead. The default is -1. 在实际使用时还有一个小技巧可以使用空的Item元素设置Layout.fillWidth: true或Layout.fillHeight: true作为水平布局和垂直布局的弹簧使用类似QBoxLayout::addStretch()去使用。
RowLayout、ColumnLayout
RowLayout、ColumnLayout为行布局和列布局,用法与Row、Column类似附加属性Layout有很多参数可以调节如fillWidth、maximumWidth、minimumWidth、margins等等。
GridLayout
GridLayout为栅格布局用法与Grid类似主要是通过附加属性Layout.row、Layout.column调整行号、列号以此完成特殊的表单布局。
StackLayout
StackLayout为栈布局主要用于多页签切换使用示例代码如下
StackLayout {id: stackLayoutanchors.fill: parentRectangle {color: gold}Rectangle {color: lightseagreen}Rectangle {color: lightcoral}Rectangle {color: lightskyblue}
}Button {text: Swichfont.family: Microsoft YaHeionClicked: {stackLayout.currentIndex (stackLayout.currentIndex 1) % stackLayout.count}
}总结
对于单个相对独立的元素而言推荐使用anchors。对于多个元素而言布局定位器的功能更为强大考虑到后续的可拓展性多数情况下布局管理器比定位器更好推荐使用布局管理器根据开发需要可以酌情使用定位器。
