このセクションでは、QML レイアウトの行と列のレイアウト、フロー レイアウト、グリッド レイアウトについて説明します。
目次
1. 行と列のレイアウト
1.1 1 つの列と複数の行
// 行列布局
import QtQuick 2.15
import QtQuick.Window 2.15
import QtQuick.Controls 2.15
Window {
width: 640
height: 480
visible: true
title: qsTr("Hello World")
Item {
anchors.fill: parent
// 一列
Column {
spacing: 20
// 两行
Row {
spacing: 20
RadioButton {
checked: true
text: "中国"
}
RadioButton {
text: "美国"
}
RadioButton {
text: "英国"
}
}
Row {
spacing: 20
RadioButton {
checked: true
text: "红色"
}
RadioButton {
text: "绿色"
}
RadioButton {
text: "蓝色"
}
}
}
}
}
1.2 1 行と複数列
// 行列布局
import QtQuick 2.15
import QtQuick.Window 2.15
import QtQuick.Controls 2.15
Window {
width: 640
height: 480
visible: true
title: qsTr("Hello World")
Item {
anchors.fill: parent
// 一行
Row {
spacing: 20
// 两列
Column {
spacing: 20
RadioButton {
checked: true
text: "中国"
}
RadioButton {
text: "美国"
}
RadioButton {
text: "英国"
}
}
Column {
spacing: 20
RadioButton {
checked: true
text: "红色"
}
RadioButton {
text: "绿色"
}
RadioButton {
text: "蓝色"
}
}
}
}
}
2. フローレイアウト
2.1 左から右 (デフォルト)
// 流Flow布局
import QtQuick 2.15
import QtQuick.Window 2.15
import QtQuick.Controls 2.15
Window {
width: 640
height: 480
visible: true
title: qsTr("Hello World")
Item {
id: item
anchors.fill: parent
// 流布局: 设定宽高后自动排列
Flow {
anchors.left: parent.left
anchors.right: parent.right
//flow: Flow.LeftToRight // 默认是从左向右
Rectangle {
height: 100
width: item.width / 3
color: "red"
}
Rectangle {
height: 100
width: item.width / 3
color: "green"
}
Rectangle {
height: 100
width: item.width / 3
color: "red"
}
Rectangle {
height: 100
width: item.width / 3
color: "green"
}
}
}
}
2.2 上から下へ
// 流Flow布局
import QtQuick 2.15
import QtQuick.Window 2.15
import QtQuick.Controls 2.15
Window {
width: 640
height: 480
visible: true
title: qsTr("Hello World")
Item {
id: item
anchors.fill: parent
// 流布局: 设定宽高后自动排列
Flow {
anchors.left: parent.left
anchors.right: parent.right
flow: Flow.TopToBottom
Rectangle {
height: 100
width: item.width / 3
color: "red"
}
Rectangle {
height: 100
width: item.width / 3
color: "green"
}
Rectangle {
height: 100
width: item.width / 3
color: "red"
}
Rectangle {
height: 100
width: item.width / 3
color: "green"
}
}
}
}
3. グリッドレイアウト
3行2列レイアウトのデモ
// 网格布局
import QtQuick 2.15
import QtQuick.Window 2.15
import QtQuick.Controls 2.15
import QtQuick.Layouts 1.0
Window {
width: 640
height: 480
visible: true
title: qsTr("Hello World")
Item {
id: item
anchors.fill: parent
// 网格布局
//GridLayout {
Grid {
id: grid
columns: 2
rows: 3
Text { text: "Three"; font.bold: true; }
Text { text: "words"; color: "red" }
Text { text: "in"; font.underline: true }
Text { text: "a"; font.pixelSize: 20 }
Text { text: "row"; font.strikeout: true }
}
}
}