Qt Quick小项目 - 登陆界面
2024-08-31 14:01:50
开发环境：
win8 + Qt5.11.2
说明:
用 QML 设计一个应用的登陆界面。
效果图:
新建一个 "Qt Quick Application - empty" 工程，分别添加 “main.qml” 、“LineInput.qml”、“ Button.qml” 这三个 qml 文件。
main.qml
import QtQuick 2.9
Rectangle {
id: loginWin
width: 320
height: 480
SystemPalette { id: activePalette }
//背景图片
Image
{
id: background
anchors { top: parent.top; bottom: parent.bottom }
anchors.fill: parent
source: "./background.jpeg"
fillMode: Image.PreserveAspectCrop
}
//顶栏
Item
{
id: topBar
width: loginWin.width; height: loginWin.height*0.05
anchors.top: loginWin.top
anchors.topMargin: 20
Text
{
id: title
anchors { top: parent.top; horizontalCenter: parent.horizontalCenter }
text: "登陆"
font.bold: true
font.pointSize: loginWin.height * 0.05 * 0.7
color: "dark red"
}
}
//空白栏
Item
{
id: space
width: loginWin.width; height: loginWin.height * 0.1
anchors.top: topBar.bottom
}
// 登录框
Rectangle {
id: loginRect
width: loginWin.width * 0.8
height: loginWin.height * 0.3
anchors { top: space.bottom; horizontalCenter: parent.horizontalCenter }
border.color: "#707070"
color: "transparent"
LineInput
{
id: line
width: loginRect.width * 0.8; height: loginRect.height * 0.2
fontSize:height * 0.7
anchors { horizontalCenter: loginRect.horizontalCenter; top: loginRect.top; topMargin: 8 }
hint: "请输入用户号"
}
LineInput
{
width: loginRect.width * 0.8; height: loginRect.height * 0.2
fontSize:height * 0.7
anchors { horizontalCenter: loginRect.horizontalCenter; bottom: loginButton.top; bottomMargin: loginRect.height * 0.1 }
hint: "请输入密码"
}
Button
{
id: loginButton
width: loginRect.width * 0.35; height: loginRect.height * 0.2
anchors { left: loginRect.left; leftMargin: 28; bottom: loginRect.bottom; bottomMargin: 8 }
text: "登陆"
//onClicked: sameGame.startNewGame()
}
Button
{
id: quitButton
width: loginRect.width * 0.35; height: loginRect.height * 0.2
anchors { right: loginRect.right; rightMargin: 28; bottom: loginRect.bottom; bottomMargin: 8 }
text: "退出"
//onClicked: sameGame.startNewGame()
}
}
}
LineInput.qml
import QtQuick 2.0
FocusScope {
id: wrapper
// 定义可通过元对象系统访问的属性
property alias text: input.text
property alias hint: hint.text
property int fontSize: 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: fontSize
color: "#707070"
opacity: input.length ? 0 : 1
}
TextInput {
id: input
focus: true
anchors { left: parent.left; leftMargin: 14; right: parent.right; top: parent.top; bottom: parent.bottom }
verticalAlignment: Text.AlignVCenter
font.pixelSize: fontSize
color: "black"
maximumLength: 8
onAccepted: wrapper.accepted()
}
}
}
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
}
}
最新文章
- HTML学习笔记
- float:left居中对齐
- Xcode5 上使用Base SDK iOS6程序和iOS6模拟器
- 1、Zookeeper熟悉和用途综述
- java基础练习 3
- 我的项目经验总结——CDN镜像：1（初探）
- DocsBuilderGUI 工具使用介绍
- 移动端js调试工具：eruda
- 007_Mac上安装Node和NPM
- Java之@SuppressWarnings
- postman 做接口测试之学习笔记
- Oracle 当前日期如何添加指定年数、月数、天数、时数、分钟数、秒数
- angular2中如何引入scss
- 4、url控制系统
- luoguP2231 [HNOI2002]跳蚤
- HTTP协议详解之响应篇
- java中error和exception
- Vivado使用技巧：封装自己设计的IP核
- Html : 规范html代码的网站
- Ajax全解析