QML設計登陸界面

本文博客鏈接:http://blog.csdn.net/jdh99,作者:jdh,轉載請注明.

環境：

主機:WIN7

開發環境:Qt5.2

說明:

用QML設計一個應用的登陸界面

效果圖:

源代碼:

main.qml

[javascript]?view plaincopy

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

[javascript]?view plaincopy

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

[javascript]?view plaincopy

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()??

????????}??

????}??

} ?

總結

以上是生活随笔為你收集整理的QML设计登陆界面的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。