O QML do QT desenvolve layout de linha, layout de fluxo, layout de grade

      Esta seção demonstrará o layout de coluna, layout de fluxo e layout de grade do layout QML.

Índice

1. Layout de linha e linha

1.1 Uma coluna e várias linhas

1.2 Uma linha e múltiplas colunas

2. Layout de fluxo

2.1 Da esquerda para a direita (padrão)

Editar

2.2 De cima para baixo

3. Layout de grade

---

1. Layout de linha e linha

1.1 Uma coluna e várias linhas

// 行列布局
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 Uma linha e múltiplas colunas

// 行列布局
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. Layout de fluxo

2.1 Da esquerda para a direita (padrão)

// 流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 cima para baixo

// 流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. Layout de grade

Demonstração de layout de 3 linhas e 2 colunas

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

}