QML de QT développe la disposition des lignes, la disposition des flux et la disposition des grilles

      Cette section démontrera la disposition des colonnes, la disposition des flux et la disposition de la grille de la disposition QML.

Table des matières

1. Disposition des lignes et des lignes

1.1 Une colonne et plusieurs lignes

1.2 Une ligne et plusieurs colonnes

2. Disposition du flux

2.1 De gauche à droite (par défaut)

Modifier

2.2 De haut en bas

3. Disposition en grille

---

1. Disposition des lignes et des lignes

1.1 Une colonne et plusieurs lignes

// 行列布局
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 Une ligne et plusieurs colonnes

// 行列布局
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. Disposition du flux

2.1 De gauche à droite (par défaut)

// 流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 De haut en bas

// 流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. Disposition en grille

Démo de mise en page à 3 lignes et 2 colonnes

// 网格布局
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 }
        }
    }

}