qt quick controls,qt 移动控件的位置
参考文档：https://doc . Qt . io/Qt-6/Qt quick-location-topic . html
几种定位方式绝对定位（通过设置x，y的值)相对定位（在夸脱快速中也叫锚定位)定位器布局绝对定位请看代码
导入数量快速
窗口{
宽度：640
身高：480
可见：真
标题：qsTr("你好世界")
矩形
宽度：200
身高：200
x: 20
y: 30
颜色：绿色
矩形
x: 20
y: 5
宽度：150
身高：100
颜色："灰色"
}
}
}运行效果
使用x，y定位时，它是相对于父元素的。
也可以通过属性绑定的功能，实现动态布局：
导入数量快速
导入QtQuick .控制
窗口{
宽度：640
身高：480
可见：真
标题：qsTr("你好世界")
矩形
id: rect1
宽度：50
身高：60
x: 20
y: 30
颜色：绿色
}
矩形
x:矩形1.x矩形1 .宽度5
y:矩形1.y矩形1 .高度一
宽度：20
身高：20
颜色："灰色"
}
流动{
锚。水平居中：父级。水平居中
锚。底部：父级
函数移动(x，y){
rect1.x=x * 5
rect1.y=y * 5
}
按钮{
文本：" x "
onClicked: parent.move(1，0)
}
按钮{
文本："-x "
onClicked: parent.move(-1，0)
}
按钮{
文本：" y "
onClicked: parent.move(0，1)
}
按钮{
文本："-y "
onClicked: parent.move(0，-1)
}
}
}
在按钮的点击事件中，我们只改变了rect1的位置，灰色小矩形的位置也会跟关变化。
相对定位（锚定位)关于锚定位的描述：https://doc . Qt . io/Qt-6/Qt quick-positioning-anchors . html
根据文档描述可以得到以下信息：
每个控件都七条锚定线如下图示（还有一条叫基线跟字体相关的)
设置格式
#主播。锚线：itemId .锚索
# 例如：
矩形{ id:rect 1；}
矩形{ id:rect 2；锚。左：矩形1。对；}留白与偏移量
水平中心偏移setverticalCenterOffset基线偏移
第条锚定线都有对应的偏移量
#主播。锚线边距/偏移量
矩形{ id:rect 1；}
矩形{ id:rect 2；
锚。左：矩形1。对；
锚。左边距：5；}只能与兄弟元素和直接父对容器进行锚定#错误代码
项目{
id:组一
矩形{ id:rect 1；}
}
项目{
id:组2
矩形{ id:rect 2；锚。左：矩形1。对；} //无效锚点！
}定位器参考文档：https://doc . Qt . io/Qt-6/Qt quick-location-layouts . html
定位器，只定位，不修改子元素的大小。
专栏导入QtQuick
导入QtQuick .控制
窗口{
宽度：640
身高：480
可见：真
标题：qsTr("定位器")
列{
中继器{
型号：10
矩形
高度：txt.height
宽度：txt.width
color: index % 2==0？天蓝色:灰色
文本{
id: txt
文本：qsTr(文本索引)
font.pointSize: 24
color: index % 2==0？红色:绿色
}
}
}
}
}
行导入数量快速
导入QtQuick .控制
窗口{
宽度：640
身高：480
可见：真
标题：qsTr("定位器")
第{
中继器{
型号：10
矩形
高度：txt.height
宽度：txt.width
color: index % 2==0？天蓝色:灰色
文本{
id: txt
文本：qsTr(文本索引)
font.pointSize: 24
color: index % 2==0？红色:绿色
}
}
}
}
}
超出了范围也不会折行
流量导入数量快速
导入QtQuick .控制
窗口{
宽度：640
身高：480
可见：真
标题：qsTr("定位器")
流动{
宽度：窗口宽度
中继器{
型号：10
矩形
高度：txt.height
宽度：txt.width
color: index % 2==0？天蓝色:灰色
文本{
id: txt
文本：qsTr(文本索引)
font.pointSize: 24
color: index % 2==0？红色:绿色
}
}
}
}
}必须要给流动设置一个宽度，才有换行的功能
Gridimport QtQuick
导入QtQuick .控制
窗口{
宽度：640
身高：480
可见：真
标题：qsTr("定位器")
网格{
宽度：窗口宽度
列：3
中继器{
型号：10
矩形
高度：txt.height
宽度：txt.width
color: index % 2==0？天蓝色:灰色
文本{
id: txt
文本：qsTr(文本索引)
font.pointSize: 24
color: index % 2==0？红色:绿色
}
}
}
}
}
可以指定行列，一般来说只要指定列即可
布局镜像导入QtQuick
导入QtQuick .控制
窗口{
宽度：640
身高：480
可见：真
标题：qsTr("定位器")
LayoutMirroring.enabled: true
布局镜像。子女继承：真
网格{
宽度：窗口宽度
列：3
中继器{
型号：10
矩形
高度：txt.height
宽度：txt.width
color: index % 2==0？天蓝色:灰色
文本{
id: txt
文本：qsTr(文本索引)
font.pointSize: 24
color: index % 2==0？红色:绿色
}
}
}
}
}
定位器这是一个附加属性，包含的定位器的详细信息
网格{
中继器{
型号：16
矩形
id: rect
宽度：30;身高：30
边框宽度：1
color: Positioner.isFirstItem？黄色:亮蓝色
Text { text: rect .定位器。索引}
}
}
}参考文档：https://doc . Qt . io/Qt-6/qml-Qt quick-定位器. html
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。