1.简介
在QML中布局分为以下几种:绝对坐标、锚布局、定位器、布局管理器。
2.绝对坐标
设置x、y、width、height能够定位一个组件的位置,这种方法扩展性太差。
Button{
width: 50
height: 50
x: 10
y:10
background: Rectangle{
color:"red"
}
}
3.锚布局
示例:实现一行按钮。
Window {
id: window
objectName: "window"
visible: true
width: 400
height: 500
title: qsTr("Hello World")
//做一行按钮
Button{
id:b1
width: 50
height: 50
anchors.centerIn: parent //在Window的中心
background: Rectangle{
color:"red"
}
}
Button{
id:b2
width: 50
height: 50
anchors.left: b1.right //b2放在b1的右边,左边距20
anchors.top: b1.top
anchors.leftMargin: 20
background: Rectangle{
color:"black"
}
}
Button{
id:b3
width: 50
height: 50
anchors.right: b1.left //b3放在b1的左边,右边距20
anchors.top: b1.top
anchors.rightMargin: 20
background: Rectangle{
color:"blue"
}
}
Button{
id:b4
width: 25 //b4放在b1的中心
height: 25
anchors.horizontalCenter: b1.horizontalCenter
anchors.verticalCenter: b1.verticalCenter
background: Rectangle{
color:"yellow"
}
}
}
3.定位器
Window {
id: window
objectName: "window"
visible: true
width: 400
height: 500
title: qsTr("Hello World")
Rectangle{
border.color: "black"
border.width: 2
width: 200
height: 300
Row {
Repeater {
model: 3
Button {
width: 30
height: 40
background: Rectangle{
color:"yellow"
}
text:index
}
}
spacing: 10 //设置间隔
padding: 10 //设置内边距
}
}
}
Flow:流式布局
示例:Flow项自动将子Text项并排放置,当超出父控件边界时会自动换行。
Window {
id: window
objectName: "window"
visible: true
width: 400
height: 500
title: qsTr("Hello World")
Rectangle{
border.color: "black"
border.width: 2
width: 200
height: 300
Flow {
anchors.fill: parent
anchors.margins: 4
spacing: 10
Text { text: "Text"; font.pixelSize: 40 }
Text { text: "items"; font.pixelSize: 40 }
Text { text: "flowing"; font.pixelSize: 40 }
Text { text: "inside"; font.pixelSize: 40 }
Text { text: "a"; font.pixelSize: 40 }
Text { text: "Flow"; font.pixelSize: 40 }
Text { text: "item"; font.pixelSize: 40 }
}
}
}
Grid:网格布局
可以控制绘制几行几列。
Window {
id: window
objectName: "window"
visible: true
width: 400
height: 500
title: qsTr("Hello World")
Rectangle{
border.color: "black"
border.width: 2
width: 200
height: 300
Grid {
columns: 3
spacing: 2
padding: 10
Rectangle { color: "red"; width: 50; height: 50 }
Rectangle { color: "green"; width: 20; height: 50 }
Rectangle { color: "blue"; width: 50; height: 20 }
Rectangle { color: "cyan"; width: 50; height: 50 }
Rectangle { color: "magenta"; width: 10; height: 10 }
}
}
}
4.布局管理器
有很多附加属性。
- Layout.minimumWidth:最小宽度
- Layout.minimumHeight:最小高度
- Layout.preferredWidth:首选宽度
- Layout.preferredHeight:首选高度
- Layout.maximumWidth:最大宽度
- Layout.maximumHeight:最大高度
- Layout.fillWidth:如果为true,尽可能变宽
- Layout.fillHeight:如果为true,尽可能变高
- Layout.alignment:对齐方式
- Layout.margins:外边距
- Layout.leftMargin:左外边距
- Layout.rightMargin:右外边距
- Layout.topMargin:上外边距
- Layout.bottomMargin:下外边距
Window {
id: window
objectName: "window"
visible: true
width: 400
height: 500
title: qsTr("Hello World")
RowLayout {
id: layout
anchors.fill: parent
spacing: 6
Rectangle {
color: 'teal'
Layout.fillWidth: true
Layout.minimumWidth: 50
Layout.preferredWidth: 100
Layout.maximumWidth: 300
Layout.minimumHeight: 150
Text {
anchors.centerIn: parent
text: parent.width + 'x' + parent.height
}
}
Rectangle {
color: 'plum'
Layout.fillWidth: true
Layout.minimumWidth: 100
Layout.preferredWidth: 200
Layout.preferredHeight: 100
Text {
anchors.centerIn: parent
text: parent.width + 'x' + parent.height
}
}
}
}