QML&Rectangle
main.qml
import QtQuick 2.14
import QtQuick.Window 2.14
import QtQuick.Controls 2.5
Window {
visible: true
width: 640
height: 480
title: qsTr("My QML")
color: "white"
MyRectangle {
x: 100
y: 50
width: 200
height: 100
// myTopMargin: 10
// myBottomMargin: 10
}
// Rectangle {
// x: 100
// y: 30
// width: 100
// height: 50
// color: "black"
anchors.centerIn: parent //居中于父控件
anchors.horizontalCenter: parent.horizontalCenter //水平居中
anchors.verticalCenter: parent.verticalCenter //垂直居中
rotation: 30 //旋转
scale: 0.5 //放缩
antialiasing: false //抗锯齿
// //边框
// border.width: 5
// border.color: "red"
// //圆角弧度
// radius: 15
// }
//GradientStop颜色层次变化效果
// Rectangle {
// y: 100; width: 80; height: 80
// rotation: 45
// gradient: Gradient {
// GradientStop { position: 0.0; color: "lightsteelblue" }
// GradientStop { position: 1.0; color: "blue" }
// }
// }
// Rectangle {
// x: 50
// y: 30
// width: 100
// height: 50
// border.width: 5
// border.color: "black"
// }
//坐标 z 使用;焦点使用;
// Rectangle {
// x: 100
// y: 100
// z: 3
// width: 100
// height: 50
// color: "black"
// focus: true //焦点
// //activeFocus:
// MouseArea {
// anchors.fill: parent
// onClicked: {
// console.log("on clicked")
// }
// }
// Keys.onReturnPressed: {
// console.log("on return pressed")
// }
// }
// Rectangle {
// x: 120
// y: 120
// width: 100
// height: 50
// color: "blue"
// }
// Rectangle {
// x: 140
// y: 140
// z: 2
// width: 100
// height: 50
// color: "green"
// }
//锚点anchor使用
// Rectangle {
// id: rect1
anchors.fill: parent //填充在父控件当中
// width: 100
// height: 50
// color: "black"
// }
// Rectangle {
x: rect1.width + 20
// id: rect2
// width: 100
// height: 50
// anchors.left: rect1.right //使用锚点,将两个矩形挨在一起
// anchors.leftMargin: 20
// color: "black"
// }
// Rectangle {
// id: rect3
// width: 100
// height: 50
// anchors.top: rect1.bottom
// anchors.topMargin: 20
// color: "black"
// }
}
MyRectangle.qml
import QtQuick 2.0
Rectangle {
id: borderRect
property int myTopMargin: 0
property int myBottomMargin: 0
width: 200
height: 100
color: "black"
Rectangle {
id: innerRect
color: "blue"
anchors.fill: parent
anchors.topMargin: myTopMargin
anchors.bottomMargin: myBottomMargin
anchors.leftMargin: 5
anchors.rightMargin: 5
}
}