QML设计登陆界面

QML设计登陆界面

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

环境：

主机:WIN7

开发环境:Qt5.2

说明:

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

效果图:

源代码:

main.qml

import QtQuick 2.0Rectangle{    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.0Rectangle {    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.0FocusScope {    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()        }    }}