其实我学 QML 的本质原因是因为我是个虚荣的人。所以我最近在追求精美的 UI 绘制。但是 QWidget 的 UI 绘制很复杂，不如 QML 简单快捷。我用 QML 就是为了追求页面的极致美观和特效，但是在这之前，还是得学会基础的布局等等。

这里先来简单的登陆框。其实仔细想想 QML 熟练之后再布局上确实比 QWidget 快捷方便不少。

image.png

import QtQuick
import QtQuick.Controls
import QtQuick.Layouts

Window {
    width: 640
    height: 480
    visible: true
    title: qsTr("法环登录")

    Image{
        anchors.fill: parent
        // source: ":/image/1221232.jpg"
        source: "./image/1221232.jpg"
        fillMode: Image.Stretch
    }

    Item {
        id: mainItem
        width: 100
        height: 200
        anchors.centerIn: parent

        Item {
            width: 300
            height: 90
            anchors.bottom: parent.bottom
            anchors.bottomMargin: 50
            anchors.horizontalCenter: parent.horizontalCenter

            GridLayout {
                id: grid
                rows: 2
                columns: 2
                width: 300
                height: 100
                columnSpacing: 20

                Text {
                    id: textField
                    text: qsTr("Username")
                    font.pointSize: 18
                    font.bold: true
                    color: "white"
                }
                TextField {
                    id: fieldUser
                    font.pointSize: 16
                    Layout.preferredHeight: 32
                    color: "white"
                    // border.width: 2
                    // border.color: "white"
                }
                Text {
                    text: qsTr("Password")
                    font.pointSize: textField.font.pointSize
                    font.bold: textField.font.pointSize
                    color: textField.color
                }
                TextField {
                    id: fieldPwd
                    font.pointSize: 16
                    Layout.preferredHeight: 32
                    echoMode: TextInput.Password
                    color: "white"
                    // border.width: 2
                    // border.color: "white"
                }
            }

            Rectangle {
                id: loginButton
                width: 150
                height: 30
                color: "blue"
                radius: 5
                border.width: 2
                border.color: white
                anchors.top: grid.bottom
                anchors.topMargin: 50
                anchors.horizontalCenter: grid.horizontalCenter
                
                Text {
                    anchors.centerIn: parent
                    text: qsTr("Login")
                    color: "white"
                    font.pointSize: 16
                    font.bold: true
                    font.family: "Arial"
                }

                MouseArea {
                    anchors.fill: parent
                    hoverEnabled: true

                    onEntered:
                    {
                        print("Entered")
                    }
                    onPressed:
                    {
                        print("Pressed")
                    }
                    onReleased:
                    {
                        print("Released")
                    }
                    onExited:
                    {
                        print("Exited")
                    }
                }
            }
        }

    }
}