QML设计登陆界面

QML设计登陆界面

本文博客链接:http://blog.csdn.net/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()
         }
     }
 }