认识QML,熟悉开发步骤

---

一、创建一个模块熟悉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"
            }

---

总结

这次就暂且介绍到这里