一、创建一个模块熟悉QML开发流程
这一个示例不需要太过深入了解每个控件的作用以及相应的方法,主要是以熟悉整个开发过程为主。
本次示例使用的控件有:ApplicationWindow、Rectangle、Text 、TextField 、Button
界面布局如下:
下面以控件的角度,一步步介绍每个步骤。
脚本和开发环境与最简单的QML保持一致。
二、ApplicationWindow
1.主窗口
代码如下(示例):
ApplicationWindow
{
}
调用脚本你会发现程序正在执行中,但是没有任何界面弹出。现象如下:
是不是挺奇怪,ApplicationWindow默认是没有可见的属性,如果需要弹出界面需要加入visible:true
代码以及现象如下:
心心念念的界面就可以看出来了,心情美美哒!
但是界面似乎有点小,那加点属性描述界面吧!
width: 1280
height: 800
好的,界面尺寸描述也满足了,标题不是我想要的,那么换掉
width: 1280
height: 800
title:"Login In"
现在最大的窗口似乎除了颜色之外都已经调整好了,但是在程序中2我并不知道这个ApplicationWindow它的身份,现在继续给它一个身份。
width: 1280
height: 800
title:"Login In"
id: root
这个没有啥现象,就不放截图了哈
现在ApplicationWindow就基本OK了
2.Rectangle
在ApplicationWindow中放置一块矩形,方便布色。
Rectangle
{
width: 500
height: 500
color:"red"
}
现在就需要把大小颜色改变一下:
width: root.width
height: root.height
//渐变色处理
gradient: Gradient
{
GradientStop
{
position: 0
color: "#4158d0"
}
GradientStop
{
position: 1
color: "#c850c0"
}
orientation: Gradient.Horizontal
}
现象:
现在继续做一个Rectangle当作登录的白框
现在就需要把大小颜色改变一下:
Rectangle
{
width: 700
height : 400
}
效果:
继续调整居中
Rectangle
{
width: 700
height : 400
anchors.centerIn:parent
}
这个界面似乎和原始界面一样,但是还有个细微的差别:圆角的处理
Rectangle
{
width: 700
height : 400
anchors.centerIn:parent
radius:10
}
ok 舒服了
3.Text
将Text放在中间白色矩形内,代码如下
Rectangle
{
width: 700
height : 400
anchors.centerIn: parent
Text
{
text: qsTr("登录系统")//文本内容
width : 120
height : 30 //文本框大小
font.pixelSize : 20 //字体大小,单位:像素
x : 400 //偏移位置,坐标原点所属矩形左上角
y : 100
}
}
4.TextField
下面需要两个输入框:用户名和密码
效果:输入框提示,圆角处理,插入图标,鼠标选择图标变化
TextField
{
id : username
x : 400
y : 150
width : 250
height : 40
font.pixelSize : 18
placeholderText: qsTr("用户名或邮箱")
placeholderTextColor: "#999999"//提示词背景颜色
background: Rectangle
{
radius: 24
color : "#e6e6e6"
}
leftPadding: 60//输入内容往左偏移
}
插入图片
TextField
{
id : username
x : 400
y : 150
width : 250
height : 40
font.pixelSize : 18
placeholderText: qsTr("用户名或邮箱")
placeholderTextColor: "#999999"//提示词背景颜色
background: Rectangle
{
radius: 24//圆角处理
color : "#e6e6e6"
}
leftPadding: 60//输入内容往左偏移
//动态图标插入
Image
{
width : 30
height : 30
x :15
y : 4
//类似与三目运算符
//"login_icons/assign_user_line_g"图片路径,需要放在跟qml文件同一级目录
source: parent.activeFocus ? "login_icons/assign_user_line_g" : "login_icons/assign_user_line"
}
}
效果:
密码同理
如果需要不显示输入密码需要加入:echoMode : TextInput.Password
5 Button
Button
{
text: qsTr("登录")
id : login_btn
x : username.x
y : password.y + password.height + 10
width : password.width
height : password.height
font.pixelSize : username.font.pixelSize
//相当于点击事件处理,在控制台打印
onClicked:{
print("用户名:" + username.text + "密码:" + password.text)
}
background: Rectangle
{
radius: 24
color :
{
//背景色处理
if(login_btn.down)
return "#00b846"
if(login_btn.hovered)
return "#333333"
return "#57b846"
}
}
}
效果
未点击
悬停
忘记一点图标的插入
Image
{
x: 100
y: 100
width: 200
height: 200
source: "login_icons/ima"
}
总结
这次就暂且介绍到这里