网站 源码 php,小程序网站建设y021,浅谈网站建设开发,扬州北京网站建设QML布局系统主要分为三大类#xff1a;锚布局、定位器布局、布局管理器。一、锚布局#xff08;Anchors#xff09;通过定义元素与其他元素或父容器的锚点关系实现精确定位#xff0c;支持动态调整。核心特性属性作用示例anchors.left左边缘对齐目标元素anchors.…QML布局系统主要分为三大类锚布局、定位器布局、布局管理器。一、锚布局Anchors通过定义元素与其他元素或父容器的锚点关系实现精确定位支持动态调整。核心特性属性作用示例anchors.left左边缘对齐目标元素anchors.left: parent.leftanchors.right右边缘对齐目标元素anchors.right: parent.rightanchors.top顶部对齐目标元素anchors.top: parent.topanchors.bottom底部对齐目标元素anchors.bottom: parent.bottom组合属性anchors.fill填充整个目标元素通常为父容器anchors.fill: parentanchors.centerIn在目标元素中居中anchors.centerIn: parent边距控制anchors.margins统一设置四周边距anchors.margins: 10*Margin单独设置某方向边距如leftMarginanchors.leftMargin: 15适用场景需要精确相对定位的UI元素如表单控件对齐。 代码示例//锚布局Rectangle {// 填充整个区域anchors.left: parent.leftcolor: #f9e370width: 300height: 300Rectangle {// 左上角anchors.top: parent.topanchors.topMargin: 5anchors.left: parent.leftanchors.leftMargin: 5color: #ef2929width: 50height: 50}Rectangle {// 右上角anchors.top: parent.topanchors.topMargin: 5anchors.right: parent.rightanchors.rightMargin: 5color: #8ae234width: 50height: 50}Rectangle {// 左下角anchors.bottom: parent.bottomanchors.bottomMargin: 5anchors.left: parent.leftanchors.leftMargin: 5color: #204a87width: 50height: 50}Rectangle {// 右下角anchors.bottom: parent.bottomanchors.bottomMargin: 5anchors.right: parent.rightanchors.rightMargin: 5color: #5c3566width: 50height: 50}Rectangle {// 居中anchors.centerIn: parentcolor: #ad7fa8width: 50height: 50}Rectangle {// 中上anchors.top: parent.topanchors.topMargin: 5anchors.horizontalCenter: parent.horizontalCentercolor: #fcaf3ewidth: 50height: 50}Rectangle {// 左中anchors.left: parent.leftanchors.leftMargin: 5anchors.verticalCenter: parent.verticalCentercolor: #729fcfwidth: 50height: 50}Rectangle {// 右中anchors.right: parent.rightanchors.rightMargin: 5anchors.verticalCenter: parent.verticalCentercolor: #555753width: 50height: 50}Rectangle {// 中下anchors.bottom: parent.bottomanchors.bottomMargin: 5anchors.horizontalCenter: parent.horizontalCentercolor: #ce5c00width: 50height: 50}}
运行结果二、定位器布局Positioners自动排列子元素无需手动计算位置适合规则排列。四大定位器类型类型排列方向关键属性特点Row水平排列spacing子项等宽或按内容自适应Column垂直排列spacing子项等高或按内容自适应Grid网格排列rows/columns支持跨行/列自动换行Flow流式排列flow根据容器宽度自动换行属性定位器类型核心属性属性说明布局特点典型应用场景代码示例行定位器(Row)spacing子项水平间距像素从左向右水平排列子项水平导航栏、工具栏按钮组Row {spacing: 10 Button {}Button {}}layoutDirection排列方向Qt.LeftToRight默认或Qt.RightToLeft从右向左支持反向布局RTL语言界面适配layoutDirection: Qt.RightToLeft列定位器(Column)spacing子项垂直间距像素从上向下垂直排列子项设置菜单、垂直列表Column {spacing: 15 Text {} Slider {}}自动尺寸约束宽度继承最宽子项高度自适应无需显式设置尺寸动态内容容器默认行为网格定位器(Grid)rows/columns强制指定行/列数量默认自适应从左到右、从上到下矩阵排列表单布局、图标网格Grid { rows: 2; columns: 3spacing: 8 Repeater { model: 6; delegate: Item{} }}flow排列顺序Grid.LeftToRight先行后列或Grid.TopToBottom先列后行控制填充优先级特殊顺序布局flow: Grid.TopToBottomrowSpacing/columnSpacing独立设置行/列间距覆盖spacing支持非均衡间距复杂表格布局rowSpacing: 5; columnSpacing: 12流式定位器(Flow)flow换行方向Flow.LeftToRight水平流或Flow.TopToBottom垂直流自动换行/换列瀑布流布局、标签云Flow { width: 300 spacing: 10 Repeater { model: 20; delegate: Tag{} }}padding容器内边距像素子项与容器边缘的距离带边距的响应式布局padding: 15spacing统一控制水平和垂直间距简化间距设置紧凑型布局spacing: 10适用场景规则排列的列表、图标网格或色块组。代码示例//定位器布局Rectangle {// 填充整个区域anchors.right: parent.rightcolor: #c5fd30width: 300height: 300//水平Row {anchors.top: parent.topanchors.topMargin: 3anchors.left: parent.leftanchors.leftMargin: 3spacing: 3Repeater {model: 4Rectangle {width: 30height: 30color: {switch(index) {case 0: return redcase 1: return greencase 2: return bluecase 3: return gray}}}}}//垂直Column {anchors.bottom: parent.bottomanchors.bottomMargin: 3anchors.left: parent.leftanchors.leftMargin: 3spacing: 3Repeater {model: 4Rectangle {width: 30height: 30color: {switch(index) {case 0: return redcase 1: return greencase 2: return bluecase 3: return gray}}}}}//网格Grid {anchors.top: parent.topanchors.topMargin: 3anchors.right: parent.rightanchors.rightMargin: 3columns: 3spacing: 3Repeater {model: 14Rectangle {width: 30height: 30color: getRectColor()function getRectColor() {if (Positioner.index % 4 0)return redelse if (Positioner.index % 4 1)return greenelse if (Positioner.index % 4 2)return blueelsereturn gray}}}}//流式Flow {anchors.bottom: parent.bottomanchors.bottomMargin: 3anchors.right: parent.rightanchors.rightMargin: 3width: 162spacing: 3Repeater {model: 14Rectangle {width: 30height: 30color: getRectColor()function getRectColor() {if (Positioner.index % 4 0)return redelse if (Positioner.index % 4 1)return greenelse if (Positioner.index % 4 2)return blueelsereturn gray}}}}}运行结果三、布局管理器Layout Managers提供响应式布局能力需导入QtQuick.Layouts模块支持动态拉伸和约束控制。核心类型及功能类型方向特有附加属性功能RowLayout水平Layout.fillWidth子项按比例填充剩余宽度ColumnLayout垂直Layout.preferredHeight控制子项高度优先级GridLayout网格Layout.rowSpan支持跨行/列布局StackLayout堆叠currentIndex类似选项卡切换显示不同子项属性布局类型核心属性属性说明示例代码行布局(RowLayout)spacing子项水平间距像素RowLayout {spacing: 10Rectangle { Layout.preferredWidth: 100 }}Layout.fillWidth子项是否填充剩余宽度true/falseRectangle {Layout.fillWidth: true}列布局(ColumnLayout)spacing子项垂直间距像素ColumnLayout {spacing: 15Button {}Slider {}}Layout.fillHeight子项是否填充剩余高度true/falseRectangle {Layout.fillHeight: true}网格布局(GridLayout)columns/rows强制指定列/行数默认自适应GridLayout {columns: 3Rectangle {}}flow排列方向LeftToRight默认或TopToBottomflow: GridLayout.TopToBottom堆栈布局(StackLayout)currentIndex当前可见子项的索引默认0StackLayout {currentIndex: 1 Rectangle {}}count子项总数只读属性onCountChanged: console.log(count)Layout.fillWidth/Height子项默认填充整个布局区域trueRectangle {Layout.fillWidth: false // 禁用默认填充}代码示例//布局管理器Rectangle {anchors.left: parent.leftanchors.bottom: parent.bottomcolor: #5ccbf6width: 300height: 300//水平RowLayout {anchors.top: parent.topanchors.topMargin: 5anchors.left: parent.leftanchors.leftMargin: 5width: 100Rectangle {color: redLayout.fillWidth: trueLayout.minimumWidth: 50Layout.preferredWidth: 50Layout.maximumWidth: 100Layout.minimumHeight: 25Text {anchors.centerIn: parenttext: parent.width x parent.height}}Rectangle {color: greenLayout.fillWidth: falseLayout.minimumWidth: 25Layout.preferredWidth: 100Layout.preferredHeight: 50Text {anchors.centerIn: parenttext: parent.width x parent.height}}}//垂直ColumnLayout {anchors.bottom: parent.bottomanchors.bottomMargin: 5anchors.left: parent.leftanchors.leftMargin: 5height: 150Rectangle {color: redLayout.fillHeight: trueLayout.minimumHeight: 50Layout.preferredWidth: 75Layout.preferredHeight: 75Layout.maximumWidth: 100Layout.maximumHeight: 100Text {anchors.centerIn: parenttext: parent.width x parent.height}}Rectangle {color: greenLayout.fillHeight: falseLayout.minimumWidth: 100Layout.preferredWidth: 100Layout.preferredHeight: 50Text {anchors.centerIn: parenttext: parent.width x parent.height}}}//网格GridLayout {anchors.top: parent.topanchors.topMargin: 5anchors.right: parent.rightanchors.rightMargin: 5flow: GridLayout.LeftToRightheight: 120columns: 3Rectangle {color: redLayout.columnSpan: 1width: 30height: 30}Rectangle {color: grayLayout.alignment: Qt.AlignVCenter | Qt.AlignHCenterwidth: 30height: 30}Rectangle {color: blueLayout.rowSpan: 2width: 30height: 30}Rectangle {color: greenwidth: 30height: 30}}//堆叠StackLayout {anchors.right: parent.rightanchors.bottom: parent.bottomcurrentIndex: parseInt(textEdit.text)height: 120width: 120Rectangle {color: red}Rectangle {color: green}Text {text: Text}Image {source: file:///home/li/图片/1.png}}TextEdit {id: textEditanchors.centerIn: parentwidth: 80height: 20text: qsTr(0)}}
运行结果四、定位器布局 vs 布局管理器对比表 特性定位器布局Positioners布局管理器Layout Managers核心类型Row, Column, Grid, FlowRowLayout, ColumnLayout, GridLayout子元素尺寸调整 固定子元素原始尺寸不自动缩放动态调整子元素大小填充/约束空间排列方式简单顺序排列水平/垂直/网格高级自适应排列支持权重/对齐/跨行跨列响应式布局 窗口缩放时元素位置固定不变自动根据容器尺寸调整子项布局附加属性仅基础属性如spacing丰富约束属性fillWidth/alignment/minimumHeight等适用场景静态元素排列图标栏、固定菜单动态表单、可伸缩界面、复杂自适应布局五、完整代码示例
import QtQuick 2.6
import QtQuick.Window 2.2
import QtQuick.Layouts 1.14Window {visible: truewidth: 640height: 640title: qsTr(布局)//锚布局Rectangle {// 填充整个区域anchors.left: parent.leftcolor: #f9e370width: 300height: 300Rectangle {// 左上角anchors.top: parent.topanchors.topMargin: 5anchors.left: parent.leftanchors.leftMargin: 5color: #ef2929width: 50height: 50}Rectangle {// 右上角anchors.top: parent.topanchors.topMargin: 5anchors.right: parent.rightanchors.rightMargin: 5color: #8ae234width: 50height: 50}Rectangle {// 左下角anchors.bottom: parent.bottomanchors.bottomMargin: 5anchors.left: parent.leftanchors.leftMargin: 5color: #204a87width: 50height: 50}Rectangle {// 右下角anchors.bottom: parent.bottomanchors.bottomMargin: 5anchors.right: parent.rightanchors.rightMargin: 5color: #5c3566width: 50height: 50}Rectangle {// 居中anchors.centerIn: parentcolor: #ad7fa8width: 50height: 50}Rectangle {// 中上anchors.top: parent.topanchors.topMargin: 5anchors.horizontalCenter: parent.horizontalCentercolor: #fcaf3ewidth: 50height: 50}Rectangle {// 左中anchors.left: parent.leftanchors.leftMargin: 5anchors.verticalCenter: parent.verticalCentercolor: #729fcfwidth: 50height: 50}Rectangle {// 右中anchors.right: parent.rightanchors.rightMargin: 5anchors.verticalCenter: parent.verticalCentercolor: #555753width: 50height: 50}Rectangle {// 中下anchors.bottom: parent.bottomanchors.bottomMargin: 5anchors.horizontalCenter: parent.horizontalCentercolor: #ce5c00width: 50height: 50}}//定位器布局Rectangle {// 填充整个区域anchors.right: parent.rightcolor: #c5fd30width: 300height: 300//水平Row {anchors.top: parent.topanchors.topMargin: 3anchors.left: parent.leftanchors.leftMargin: 3spacing: 3Repeater {model: 4Rectangle {width: 30height: 30color: {switch(index) {case 0: return redcase 1: return greencase 2: return bluecase 3: return gray}}}}}//垂直Column {anchors.bottom: parent.bottomanchors.bottomMargin: 3anchors.left: parent.leftanchors.leftMargin: 3spacing: 3Repeater {model: 4Rectangle {width: 30height: 30color: {switch(index) {case 0: return redcase 1: return greencase 2: return bluecase 3: return gray}}}}}//网格Grid {anchors.top: parent.topanchors.topMargin: 3anchors.right: parent.rightanchors.rightMargin: 3columns: 3spacing: 3Repeater {model: 14Rectangle {width: 30height: 30color: getRectColor()function getRectColor() {if (Positioner.index % 4 0)return redelse if (Positioner.index % 4 1)return greenelse if (Positioner.index % 4 2)return blueelsereturn gray}}}}//流式Flow {anchors.bottom: parent.bottomanchors.bottomMargin: 3anchors.right: parent.rightanchors.rightMargin: 3width: 162spacing: 3Repeater {model: 14Rectangle {width: 30height: 30color: getRectColor()function getRectColor() {if (Positioner.index % 4 0)return redelse if (Positioner.index % 4 1)return greenelse if (Positioner.index % 4 2)return blueelsereturn gray}}}}}//布局管理器Rectangle {anchors.left: parent.leftanchors.bottom: parent.bottomcolor: #5ccbf6width: 300height: 300//水平RowLayout {anchors.top: parent.topanchors.topMargin: 5anchors.left: parent.leftanchors.leftMargin: 5width: 100Rectangle {color: redLayout.fillWidth: trueLayout.minimumWidth: 50Layout.preferredWidth: 50Layout.maximumWidth: 100Layout.minimumHeight: 25Text {anchors.centerIn: parenttext: parent.width x parent.height}}Rectangle {color: greenLayout.fillWidth: falseLayout.minimumWidth: 25Layout.preferredWidth: 100Layout.preferredHeight: 50Text {anchors.centerIn: parenttext: parent.width x parent.height}}}//垂直ColumnLayout {anchors.bottom: parent.bottomanchors.bottomMargin: 5anchors.left: parent.leftanchors.leftMargin: 5height: 150Rectangle {color: redLayout.fillHeight: trueLayout.minimumHeight: 50Layout.preferredWidth: 75Layout.preferredHeight: 75Layout.maximumWidth: 100Layout.maximumHeight: 100Text {anchors.centerIn: parenttext: parent.width x parent.height}}Rectangle {color: greenLayout.fillHeight: falseLayout.minimumWidth: 100Layout.preferredWidth: 100Layout.preferredHeight: 50Text {anchors.centerIn: parenttext: parent.width x parent.height}}}//网格GridLayout {anchors.top: parent.topanchors.topMargin: 5anchors.right: parent.rightanchors.rightMargin: 5flow: GridLayout.LeftToRightheight: 120columns: 3Rectangle {color: redLayout.columnSpan: 1width: 30height: 30}Rectangle {color: grayLayout.alignment: Qt.AlignVCenter | Qt.AlignHCenterwidth: 30height: 30}Rectangle {color: blueLayout.rowSpan: 2width: 30height: 30}Rectangle {color: greenwidth: 30height: 30}}//堆叠StackLayout {anchors.right: parent.rightanchors.bottom: parent.bottomcurrentIndex: parseInt(textEdit.text)height: 120width: 120Rectangle {color: red}Rectangle {color: green}Text {text: Text}Image {source: file:///home/li/图片/1.png}}TextEdit {id: textEditanchors.centerIn: parentwidth: 80height: 20text: qsTr(0)}}}
运行结果
