QML设计登陆界面

QML设计登陆界面

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

环境：

主机:WIN7

开发环境:Qt5.2

说明:

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

效果图:

源代码:

main.qml

[javascript]  view plain copy

1. import QtQuick 2.0  
2.   
3. Rectangle  
4. {  
5.     id: login_gui  
6.   
7.     width: 320; height: 480  
8.   
9.     SystemPalette { id: activePalette }  
10.   
11.     //背景图片  
12.     Image  
13.     {  
14.         id: background  
15.         anchors { top: parent.top; bottom: parent.bottom }  
16.         anchors.fill: parent  
17.         source: "pics/pic1.png"  
18.         fillMode: Image.PreserveAspectCrop  
19.     }  
20.   
21.     //顶烂  
22.     Item  
23.     {  
24.         id: top_bar  
25.         width: login_gui.width; height: login_gui.height * 0.05  
26.         anchors.top: login_gui.top  
27.   
28.         Text  
29.         {  
30.             id: title  
31.             anchors { top: parent.top; horizontalCenter: parent.horizontalCenter }  
32.             text: "登陆"  
33.             font.bold: true  
34.             font.pointSize: login_gui.height * 0.05 * 0.7  
35.             color: "dark red"  
36.         }  
37.     }  
38.   
39.     //空白栏  
40.     Item  
41.     {  
42.         id: space1  
43.         width: login_gui.width; height: login_gui.height * 0.1  
44.         anchors.top: top_bar.bottom  
45.     }  
46.   
47.     //登陆框  
48.     Rectangle  
49.     {  
50.         id: rect1  
51.         width: login_gui.width * 0.8; height: login_gui.height * 0.3  
52.         anchors { top: space1.bottom; horizontalCenter: parent.horizontalCenter }  
53.         border.color: "#707070"  
54.         color: "transparent"  
55.   
56.         LineInput  
57.         {  
58.             width: rect1.width * 0.8; height: rect1.height * 0.2  
59.             font_size:height * 0.7  
60.             anchors {horizontalCenter: rect1.horizontalCenter; top: rect1.top; topMargin: 8}  
61.             hint: "请输入用户号"  
62.         }  
63.   
64.         LineInput  
65.         {  
66.             width: rect1.width * 0.8; height: rect1.height * 0.2  
67.             font_size:height * 0.7  
68.             anchors {horizontalCenter: rect1.horizontalCenter; bottom: btn_login.top;  bottomMargin: rect1.height * 0.1}  
69.             hint: "请输入密码"  
70.         }  
71.   
72.         Button  
73.         {  
74.             id: btn_login  
75.             width: rect1.width * 0.35; height: rect1.height * 0.2  
76.             anchors { left: rect1.left; leftMargin: 28; bottom: rect1.bottom; bottomMargin: 8 }  
77.             text: "登陆"  
78.             //onClicked: SameGame.startNewGame()  
79.         }  
80.   
81.         Button  
82.         {  
83.             id: btn_quit  
84.             width: rect1.width * 0.35; height: rect1.height * 0.2  
85.             anchors { right: rect1.right; rightMargin: 28; bottom: rect1.bottom; bottomMargin: 8 }  
86.             text: "退出"  
87.             //onClicked: SameGame.startNewGame()  
88.         }  
89.     }  
90. }  

Button.qml

[javascript]  view plain copy

1. import QtQuick 2.0  
2.   
3. Rectangle {  
4.     id: container  
5.   
6.     property string text: "Button"  
7.   
8.     signal clicked  
9.   
10.     width: buttonLabel.width + 20; height: buttonLabel.height + 5  
11.     border { width: 1; color: Qt.darker(activePalette.button) }  
12.     antialiasing: true  
13.     radius: 8  
14.   
15.     // color the button with a gradient  
16.     gradient: Gradient {  
17.         GradientStop {  
18.             position: 0.0  
19.             color: {  
20.                 if (mouseArea.pressed)  
21.                     return activePalette.dark  
22.                 else  
23.                     return activePalette.light  
24.             }  
25.         }  
26.         GradientStop { position: 1.0; color: activePalette.button }  
27.     }  
28.   
29.     MouseArea {  
30.         id: mouseArea  
31.         anchors.fill: parent  
32.         onClicked: container.clicked();  
33.     }  
34.   
35.     Text {  
36.         id: buttonLabel  
37.         anchors.centerIn: container  
38.         color: activePalette.buttonText  
39.         text: container.text  
40.     }  
41. }  

LineInput.qml

[javascript]  view plain copy

1. import QtQuick 2.0  
2.   
3. FocusScope {  
4.     id: wrapper  
5.   
6.     property alias text: input.text  
7.     property alias hint: hint.text  
8.     property alias prefix: prefix.text  
9.     property int font_size: 18  
10.   
11.     signal accepted  
12.   
13.     Rectangle {  
14.         anchors.fill: parent  
15.         border.color: "#707070"  
16.         color: "#c1c1c1"  
17.         radius: 4  
18.   
19.         Text {  
20.             id: hint  
21.             anchors { fill: parent; leftMargin: 14 }  
22.             verticalAlignment: Text.AlignVCenter  
23.             text: "Enter word"  
24.             font.pixelSize: font_size  
25.             color: "#707070"  
26.             opacity: input.length ? 0 : 1  
27.         }  
28.   
29.         Text {  
30.             id: prefix  
31.             anchors { left: parent.left; leftMargin: 14; verticalCenter: parent.verticalCenter }  
32.             verticalAlignment: Text.AlignVCenter  
33.             font.pixelSize: font_size  
34.             color: "#707070"  
35.             opacity: !hint.opacity  
36.         }  
37.   
38.         TextInput {  
39.             id: input  
40.             focus: true  
41.             anchors { left: prefix.right; right: parent.right; top: parent.top; bottom: parent.bottom }  
42.             verticalAlignment: Text.AlignVCenter  
43.             font.pixelSize: font_size  
44.             //color: "#707070"  
45.             color: "black"  
46.             onAccepted: wrapper.accepted()  
47.         }  
48.     }  
49. }