import QtQuick
import QtQuick.Window
Window {
width: 800
height: 600
visible: true
title: qsTr("Test Anchors")
///锚点 上下左右
Rectangle
{
id: anchor1
width:200
height: 150
color:"#EEEEEE"
Rectangle
{
id:rect1
width:50
height:50
color: "red"
Text{text:"rect1"}
}
Rectangle
{
id:rect2
width:50
height:50
color: "blue"
Text{text:"rect2"}
anchors.left: rect1.right
}
Rectangle
{
id:rect3
width:50
height:50
color: "green"
Text{text:"rect3"}
anchors.top: rect1.bottom
}
Rectangle
{
id:rect4
width:50
height:50
color: "pink"
Text{text:"rect4"}
anchors.left: rect3.right
anchors.top: rect2.bottom
}
}
///锚点 动态大小
Rectangle
{
id: anchor2
anchors.left:anchor1.right
anchors.leftMargin: 5 //左侧间距
width:200
height: 150
color:"#EEEEEE"
Rectangle
{
id:leftpage
width: 50
color:"blue"
anchors.top: parent.top //自动拉升高度
anchors.bottom: parent.bottom
Text{text:"left"}
}
Rectangle
{
id:mainpage
color:"pink"
anchors.top: parent.top //自动拉升高度
anchors.bottom: parent.bottom
anchors.left:leftpage.right //自动拉升宽度
anchors.right: rightpage.left
Text{text:"main"}
}
Rectangle
{
id:rightpage
width: 50
color:"green"
anchors.top: parent.top //自动拉升高度
anchors.bottom: parent.bottom
anchors.right: parent.right
Text{text:"right"}
}
MouseArea
{
anchors.fill: parent
onClicked:
{
parent.width +=10
parent.height +=10
}
}
}
Rectangle
{
id:anchor3
//通过anchor2、和窗口 锚定宽高和位置
anchors.left: anchor2.right
anchors.right: parent.right
anchors.top: anchor2.top
anchors.bottom: anchor2.bottom
anchors.leftMargin: 5
color:"#EEEEEE"
//水平居中
Rectangle
{
id:hcenter
color:"red"
width:50
//拉升高度
anchors.top: parent.top
anchors.bottom: parent.bottom
//水平居中
anchors.horizontalCenter: parent.horizontalCenter
}
Rectangle
{
width:50
height: 50
color:"blue"
//垂直居中
anchors.verticalCenter:hcenter.verticalCenter
anchors.left: hcenter.right
}
//完全居中
Rectangle
{
width:50
height: 50
color:"yellow"
anchors.centerIn: parent
}
}
}
推荐一个零声学院项目课,个人觉得老师讲得不错,分享给大家:
零声白金学习卡(含基础架构/高性能存储/golang云原生/音视频/Linux内核)
https://xxetb.xet.tech/s/3Zqhgt