QML设计登陆界面

QML设计登陆界面

本文博客链接:http://blog.youkuaiyun.com/jdh99,作者:jdh,转载请注明.

环境：

主机:WIN7

开发环境:Qt5.2

说明:

用QML设计一个应用的登陆界面

效果图:

源代码:

main.qml

import QtQuick 2.0

Rectangle
{
    id: login_gui

    width: 320; height: 480

    SystemPalette { id: activePalette }

    //背景图片
    Image
    {
        id: background
        anchors { top: parent.top; bottom: parent.bottom }
        anchors.fill: parent
        source: "pics/pic1.png"
        fillMode: Image.PreserveAspectCrop
    }

    //顶烂
    Item
    {
        id: top_bar
        width: login_gui.width; height: login_gui.height * 0.05
        anchors.top: login_gui.top

        Text
        {
            id: title
            anchors { top: parent.top; horizontalCenter: parent.horizontalCenter }
            text: "登陆"
            font.bold: true
            font.pointSize: login_gui.height * 0.05 * 0.7
            color: "dark red"
        }
    }

    //空白栏
    Item
    {
        id: space1
        width: login_gui.width; height: login_gui.height * 0.1
        anchors.top: top_bar.bottom
    }

    //登陆框
    Rectangle
    {
        id: rect1
        width: login_gui.width * 0.8; height: login_gui.height * 0.3
        anchors { top: space1.bottom; horizontalCenter: parent.horizontalCenter }
        border.color: "#707070"
        color: "transparent"

        LineInput
        {
            width: rect1.width * 0.8; height: rect1.height * 0.2
            font_size:height * 0.7
            anchors {horizontalCenter: rect1.horizontalCenter; top: rect1.top; topMargin: 8}
            hint: "请输入用户号"
        }

        LineInput
        {
            width: rect1.width * 0.8; height: rect1.height * 0.2
            font_size:height * 0.7
            anchors {horizontalCenter: rect1.horizontalCenter; bottom: btn_login.top;  bottomMargin: rect1.height * 0.1}
            hint: "请输入密码"
        }

        Button
        {
            id: btn_login
            width: rect1.width * 0.35; height: rect1.height * 0.2
            anchors { left: rect1.left; leftMargin: 28; bottom: rect1.bottom; bottomMargin: 8 }
            text: "登陆"
            //onClicked: SameGame.startNewGame()
        }

        Button
        {
            id: btn_quit
            width: rect1.width * 0.35; height: rect1.height * 0.2
            anchors { right: rect1.right; rightMargin: 28; bottom: rect1.bottom; bottomMargin: 8 }
            text: "退出"
            //onClicked: SameGame.startNewGame()
        }
    }
}

Button.qml

import QtQuick 2.0

Rectangle {
    id: container

    property string text: "Button"

    signal clicked

    width: buttonLabel.width + 20; height: buttonLabel.height + 5
    border { width: 1; color: Qt.darker(activePalette.button) }
    antialiasing: true
    radius: 8

    // color the button with a gradient
    gradient: Gradient {
        GradientStop {
            position: 0.0
            color: {
                if (mouseArea.pressed)
                    return activePalette.dark
                else
                    return activePalette.light
            }
        }
        GradientStop { position: 1.0; color: activePalette.button }
    }

    MouseArea {
        id: mouseArea
        anchors.fill: parent
        onClicked: container.clicked();
    }

    Text {
        id: buttonLabel
        anchors.centerIn: container
        color: activePalette.buttonText
        text: container.text
    }
}

LineInput.qml

import QtQuick 2.0

FocusScope {
    id: wrapper

    property alias text: input.text
    property alias hint: hint.text
    property alias prefix: prefix.text
    property int font_size: 18

    signal accepted

    Rectangle {
        anchors.fill: parent
        border.color: "#707070"
        color: "#c1c1c1"
        radius: 4

        Text {
            id: hint
            anchors { fill: parent; leftMargin: 14 }
            verticalAlignment: Text.AlignVCenter
            text: "Enter word"
            font.pixelSize: font_size
            color: "#707070"
            opacity: input.length ? 0 : 1
        }

        Text {
            id: prefix
            anchors { left: parent.left; leftMargin: 14; verticalCenter: parent.verticalCenter }
            verticalAlignment: Text.AlignVCenter
            font.pixelSize: font_size
            color: "#707070"
            opacity: !hint.opacity
        }

        TextInput {
            id: input
            focus: true
            anchors { left: prefix.right; right: parent.right; top: parent.top; bottom: parent.bottom }
            verticalAlignment: Text.AlignVCenter
            font.pixelSize: font_size
            //color: "#707070"
            color: "black"
            onAccepted: wrapper.accepted()
        }
    }
}