目录
布局管理器(GridLayout、RowLayout、ColumnLayout)
布局简述:Qt布局有可以分为
- 行、列、网格
- 水平、垂直、网格
- x、y(这里不再讨论)
- 锚
Row(行)、Column(列(不演示了))
下面我们实操一下布局1,线上代码(编码是vs创建QML)
//GreenRectangle.qml
import QtQuick 2.3 //QtQuick 版本
Rectangle {
width: 200
height: 100
color: "red"
Text {
anchors.centerIn: parent //将text放在控件正中心,这里并是程序界面正中心哦
text: "Hello, World!"
}
}
//RedRectangle.qml
import QtQuick 2.3
Rectangle {
width: 48
height: 48
color: "red"
border.color: Qt.lighter(color) //边框色,跟Qt.lighter里的颜色保持一致
}
//BlueRectangle.qml
import QtQuick 2.3
Rectangle {
width: 48
height: 48
color: "blue"
border.color: Qt.lighter(color)
}
import QtQuick 2.9
import QtQuick.Window 2.2
Window {
id: roots //程序里程序标识
visible: true //是否可见
width: 640
height: 480
title: qsTr("Hello World") //名称
Column {
id: row
anchors.centerIn: parent
spacing: 8 //间距
RedRectangle { }
GreenRectangle { width: 96 }
BlueRectangle { }
}
}
效果如下(其他的就不演示了):
Grid(网格)
Window {
id: roots
visible: true
width: 640
height: 480
title: qsTr("Hello World")
Grid{
anchors.centerIn: parent
rows:2
columns:2
layoutDirection: Qt.RightToLeft // 排序方式默认是Qt.LeftToRight
//flow: Grid.TopToBottom
rowSpacing:10
columnSpacing:10
RedRectangle {}
GreenRectangle { width: 96 }
BlueRectangle { }
}
}
锚(anchors) 布局
锚(可以认为是位置基准)可以分着下图几种方式,
以上面例子:
Window {
id: roots
visible: true
width: 640
height: 480
title: qsTr("Hello World")
RedRectangle {
anchors.right:roots.right
anchors.verticalCenter:parent.verticalCenter //这里不能是roots
}
Column {
id: row
anchors.centerIn: parent
spacing: 8
RedRectangle {
anchors.right:roots.right
}
GreenRectangle { width: 96 }
BlueRectangle { }
}
}
效果如下:
布局管理器(GridLayout、RowLayout、ColumnLayout)
属性 | 解释 |
anchors.topMargin | 元素上边距,需要先设置好anchors.top属性的值 |
anchors.bottomMargin | 元素下边距,需要先设置好anchors.bottom属性的值 |
anchors.leftMargin | 元素左边距,需要先设置好anchors.left属性的值 |
anchors.rightMargin | 元素右边距,需要先设置好anchors.right属性的值 |
anchors.margins | 元素上下左右四个边距(同等距离),需要先设置好anchors.top,anchors.bottom, anchors.left和anchors.right属性的值。如果元素只元设置了anchors.top,那只有上边距起作用。 |
anchors.horizontalCenterOffset | 相对于水平居中线位置的偏移量,需要先设置好anchors.horizontalCenter属性的值 |
anchors.vrerticalCenterOffset | 相对于垂直居中线位置的偏移量,需要先设置好anchors.vrerticalCenter属性的值 |
anchors.centerIn | 将当前元素放在其他元素的正中位置 |
anchors.fill | 让当前元素填充到其他元素中 |
RowLayout
Window {
id: roots
visible: true
width: 640
height: 480
title: qsTr("Hello World")
RowLayout{
anchors.centerIn:parent
width:roots.width
height:roots.height
RedRectangle {}
GreenRectangle { width: 96 }
BlueRectangle { }
}
}
ColumnLayout 与RowLayout差不多,这里不再概述
GridLayout
GridLayout与Grid差不多,但是会比RowLayout多几个属性
属性 | 解释 |
Layout.row | 元素所在的行索引(0表示第1行) |
Layout.column | 元素所在的列索引(0表示第1列) |
Layout.rowSpan | 元素占据的行数(默认是1) |
Layout.columnSpan | 元素占据的列数(默认是1) |
GridLayout{
anchors.centerIn: parent
rows:2
columns:2
rowSpacing:10
columnSpacing:10
layoutDirection: Qt.RightToLeft
//flow: Grid.TopToBottom
RedRectangle {
Layout.row: 0
Layout.rowSpan: 1
}
GreenRectangle { width: 96
Layout.row: 1
Layout.column: 0
}
BlueRectangle {
Layout.row: 1
Layout.column:1
}
}
VS开发QML问题
关于这里插件开发是用vs2019开的,但是编程感觉支持不太好,可能是我环境没有装javascript原因吧,这里说下怎么vs开发QML问题