qml布局记录

main.qml 源码

import QtQuick

Window {
    width: 640
    height: 485
    visible: true
    title: qsTr("布局学习")

    Rectangle  {
        id:leftrect
        width: 180; height: 480
        anchors.top:parent.top
        anchors.topMargin:5
        border.color: "white"
        border.width: 2
        scale: 1
        color: "#c0c0c0"
        Column {
            Text {
                anchors.horizontalCenter: parent.horizontalCenter
                text: "Column布局"
                font.pointSize: 20
            }
            anchors.horizontalCenter: parent.horizontalCenter
            spacing: 10
            Rectangle { color: "lightblue"; radius: 10.0
                        width: 150; height: 80
                        Text { anchors.centerIn: parent
                               font.pointSize: 24; text: "头像" } }
            Rectangle { color: "gold"; radius: 10.0
                        width: 150; height: 50
                        Text { anchors.centerIn: parent
                               font.pointSize: 24; text: "头条" } }
            Rectangle { color: "lightgreen"; radius: 10.0
                        width: 150; height: 50
                        Text { anchors.centerIn: parent
                               font.pointSize: 24; text: "娱乐" } }
            Rectangle { color: "lightyellow"; radius: 10.0
                        width: 150; height: 50
                        Text { anchors.centerIn: parent
                               font.pointSize: 24; text: "体育" } }
            Rectangle { color: "lightblue"; radius: 10.0
                        width: 150; height: 50
                        Text { anchors.centerIn: parent
                               font.pointSize: 24; text: "电竞" } }

        }

    }

    Rectangle {
            id:rightrect
           width: 460; height: 50
           color: "#c0c0c0"
            anchors.left:leftrect.right
            anchors.top:parent.top
            anchors.topMargin:5
            border.color: "white"
            border.width: 2
           Row {
               anchors.horizontalCenter: parent.horizontalCenter
               anchors.verticalCenter: parent.verticalCenter
               spacing: 5
               Text {
                   anchors.verticalCenter: parent.verticalCenter
                   text: "Row布局"
                   font.pointSize: 18
               }
               Rectangle { width: 80; height: 30; radius: 20.0
                           color: "#024c1c"
                           Text { anchors.centerIn: parent
                                  font.pointSize: 14; text: "图片" } }
               Rectangle { width: 80; height: 30; radius: 20.0
                           color: "#42a51c"
                           Text { anchors.centerIn: parent
                                  font.pointSize: 14; text: "语音" } }
               Rectangle { width: 80; height: 30; radius: 20.0
                           color: "pink"
                           Text { anchors.centerIn: parent
                                  font.pointSize: 14; text: "文章" } }
               Rectangle { width: 80; height: 30; radius: 20.0
                           color: "lightgreen"
                           Text { anchors.centerIn: parent
                                  font.pointSize: 14; text: "评论" } }
           }
    }
    Rectangle {
            id:gridrect
            border.color: "white"
            border.width: 2
           width: 230; height: 430
           color: "#c0c0c0"
            anchors.left:leftrect.right
            anchors.top:rightrect.bottom
            anchors.topMargin:0
            Text {
                anchors.top: parent.top
                anchors.horizontalCenter: parent.horizontalCenter
                text: "Grid布局"
                font.pointSize: 18
            }
            Grid {
                    anchors.horizontalCenter: parent.horizontalCenter
                    anchors.verticalCenter: parent.verticalCenter
                    columns: 3
                    spacing: 6

                    Rectangle { color: "#aa6666"; width: 30; height: 30 }
                    Rectangle { color: "#aaaa66"; width: 70; height: 30 }
                    Rectangle { color: "#9999aa"; width: 30; height: 70 }
                    Rectangle { color: "#6666aa"; width: 10; height: 10 }
                    Rectangle { color: "#25252e"; width: 50; height: 60 }
                    Rectangle { color: "#aa6666"; width: 30; height: 30 }
                    Rectangle { color: "#aa6666"; width: 30; height: 30 }
                }
    }

    Rectangle {
            color: "#c0c0c0"
           width: 230; height: 430
           border.color: "white"
           border.width: 2
            anchors.left:gridrect.right
            anchors.top:rightrect.bottom
            Text {
                anchors.top: parent.top
                anchors.horizontalCenter: parent.horizontalCenter
                text: "Flow布局"
                font.pointSize: 18
            }
           Flow {
               anchors.fill: parent
               anchors.topMargin:60
               anchors.margins: 4
               spacing: 10

               Rectangle { color: "#aa6666"; width: 40; height: 30 }
               Rectangle { color: "#aa6666"; width: 30; height: 30 }
               Rectangle { color: "#aa6666"; width: 50; height: 30 }
               Rectangle { color: "#aa6666"; width: 30; height: 30 }
               Rectangle { color: "#aa6666"; width: 20; height: 30 }
               Rectangle { color: "#aa6666"; width: 30; height: 30 }
               Rectangle { color: "#aa6666"; width: 10; height: 30 }
               Rectangle { color: "#aa6666"; width: 30; height: 30 }
               Rectangle { color: "#aa6666"; width: 40; height: 30 }
               Rectangle { color: "#aa6666"; width: 30; height: 30 }
               Rectangle { color: "#aa6666"; width: 50; height: 30 }
               Rectangle { color: "#aa6666"; width: 30; height: 30 }
               Rectangle { color: "#aa6666"; width: 30; height: 30 }
               Rectangle { color: "#aa6666"; width: 50; height: 30 }

               Rectangle { color: "#c0c0c0"; width: 222; height: 60 }

               Rectangle { color: "#6666aa"; width: 30; height: 30 }
               Rectangle { color: "#6666aa"; width: 30; height: 40 }
               Rectangle { color: "#6666aa"; width: 30; height: 50 }
               Rectangle { color: "#6666aa"; width: 30; height: 60 }
               Rectangle { color: "#6666aa"; width: 30; height: 40 }
               Rectangle { color: "#6666aa"; width: 30; height: 30 }
               Rectangle { color: "#6666aa"; width: 30; height: 10 }
               Rectangle { color: "#6666aa"; width: 30; height: 20 }
               Rectangle { color: "#6666aa"; width: 30; height: 30 }
           }
       }
}

Column 内容一列展示
row 内容一行展示
grid 内容承网格状，可以设置列数，取内容最大宽高值排列
flow 内容呈流式布局，取行内容最大高度排列行

使用Layouts制作登录页面

main.qml

import QtQuick 2.15
import QtQuick.Controls 2.15
import QtQuick.Layouts 1.15

ApplicationWindow {
    visible: true
    width: 640
    height:480
    title: "登录界面"
    color: "white"  // 设置窗口整体背景颜色为淡灰色
    Rectangle  {
        id:leftrect
        width: parent.width*0.5; height: parent.height*0.5
        anchors.top:parent.top
        anchors.topMargin:100
        anchors.horizontalCenter:parent.horizontalCenter
        scale: 1
        ColumnLayout{
        spacing: 5  // 适当增大ColumnLayout的整体间距
        anchors.fill:parent


        Text {
            font.family: "微软雅黑"
            font.pointSize: 20
            text: "欢迎登录"
            color: "#333"
            font.bold: true  // 设置字体加粗
            Layout.alignment:Qt.AlignHCenter
        }

        GridLayout {
            columns:2
            rowSpacing: 15  // 微调GridLayout的行间距
            columnSpacing: 15  // 微调GridLayout的列间距
            Layout.alignment: Qt.AlignHCenter

            Label{
                font.family: "微软雅黑"
                text: "用户名:"
                color: "#333"
            }
            TextField {
                placeholderText: "请输入用户名"
                Layout.minimumWidth: 180
                font.family: "微软雅黑"
                color: "#333"
            }

            Label{
                font.family: "微软雅黑"
                text: "密码:"
                color: "#333"
            }
            TextField {
                placeholderText: "请输入密码"
                echoMode: TextInput.Password
                Layout.minimumWidth: 180
                font.family: "微软雅黑"
                color: "#333"
            }
        }

        RowLayout{
            id:btns
            spacing: 20  // 适当增大RowLayout中按钮的间距
            Layout.alignment: Qt.AlignHCenter

            Button {
                text: "登录"
                Layout.preferredWidth: 120
                font.family: "微软雅黑"
                background: Rectangle {  // 定义按钮的背景矩形
                    color: "#4CAF50"  // 设置按钮默认背景颜色为绿色
                    border.width: 1
                    border.color: "#388E3C"  // 设置边框颜色
                }
                hoverEnabled: true  // 开启鼠标悬停效果检测

            }

            Button {
                text: "注册"
                Layout.preferredWidth: 120
                font.family: "微软雅黑"
                background: Rectangle {
                    color: "#2196F3"  // 设置注册按钮默认背景颜色为蓝色
                    border.width: 1
                    border.color: "#1976D2"
                }
                hoverEnabled: true

            }
        }

        Label {
            font.family: "微软雅黑"
            font.pointSize: 12
            text: "忘记密码？"
            color: 'blue'
            Layout.alignment:Qt.AlignLeft
            anchors.left:btns.left
        }
    }

    }
}