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
        }
    }

    }
}

posted @ 2024-12-27 17:33 嘚惹閱讀(38) 評論(0) 收藏舉報

刷新頁面返回頂部

嘚惹

qml布局記錄

公告