从零开始学习qml（二）

从零开始学习qml（二）

美好的事情即将发生

前言

我们继续开始今天的学习。今天实现最基础的画矩形功能。

从零开始学习qml（一）的连接：https://blog.csdn.net/weixin_37997214/article/details/109752388

版权所有，转载请注明出处。本文链接：https://blog.csdn.net/weixin_37997214/article/details/109754591

目录

目录

从零开始学习qml（二）

前言

一、今天学什么

二、上图

1.实现效果

2.详细步骤

总结

---

一、今天学什么

废话不多说，第二章就是在咱们的HappyLife上改改颜色，画几个矩形，写点文字。

二、上图

1.实现效果

---

2.详细步骤

2.1打开咱们第一步弄的HappyLife工程。或者新建一个工程（可参考教程一）

2.2先介绍一下工程都有什么。

（1）左侧项目视图（什么项目树什么文件列表啥的名词咱也不会，有兄弟知道可以私信我，我改）里面是一些项目中文件列表。现阶段我们只更改main.qml文件。

（2）右侧文件编辑区就是我们选中左边的文件内容，可以在这里对软件进行修改。

 

2.3画一个矩形

（1）在main.qml中填加这几句话

import QtQuick 2.9
import QtQuick.Window 2.2

Window {
    visible: true
    width: 1000
    height: 618
    title: qsTr("Happy Life")

    /*******************新增代码******************************/
    //在该窗口中创建一个矩形
    Rectangle{
        width: 100                           //它宽100像素
        height: 100                          //他高100像素
        color: "red"                         //他颜色是“红色”
    }
    //注：这里没写这个矩形在什么位置，默认在他的上级/背景/父窗体的0，0位置。
    /*******************新增代码******************************/
}

运行结果如图，可以看到我们的HappyLife里面出现了一块红色。

（2）画带渐变色的矩形

代码添加如下：

    /*******************新增代码2.3(2)******************************/
    Rectangle{
        x:100                                //它起始位置x是100
        y:100                                //它起始位置y是100
        width: 100                           //它宽100像素
        height: 100                          //他高100像素
        color: "blue"                        //他颜色是“蓝色”
        border.color: "black"                //他边框颜色是黑色
        border.width: 5                      //他边框宽度是5
        radius: 10                           //他的圆角弧度是10 弧度：就是在四个角画一个半径是10的圆那样。如果是矩形的
                                             //一半比如弧度50那就是个圆
        //渐变色，0的位置是“lightsteelblue”，0.5的位置是“blue”,1的位置是“green”
        gradient: Gradient {
            GradientStop { position: 0.0; color: "lightsteelblue" }
            GradientStop { position: 0.5; color: "blue" }
            GradientStop { position: 1.0; color: "green" }
        }
    }
    /*******************新增代码2.3(2)******************************/

运行结果

（3）画个圆，渐变方式变为从左到右

    /*******************新增代码2.3(3)******************************/
    Rectangle{
        x:200                                //它起始位置x是100
        y:200                                //它起始位置y是100
        width: 100                           //它宽100像素
        height: 100                          //他高100像素
        color: "blue"                        //他颜色是“蓝色”
        border.color: "black"                //他边框颜色是黑色
        border.width: 5                      //他边框宽度是5
        radius: 50                           //就是个圆

        rotation: 90                         //旋转90度
        //渐变色，0的位置是“yellow”，0.5的位置是“blue”,1的位置是“green”
        gradient: Gradient {
            GradientStop { position: 0.0; color: "yellow" }
            GradientStop { position: 0.5; color: "blue" }
            GradientStop { position: 1.0; color: "green" }
        }
    }
    /*******************新增代码2.3(3)******************************/

运行效果

（4）画个小人，我们开始在HappyLife中创造人类

代码就不上了，大家可以自行创建小人儿

效果如下

2.4添加文本

（1）给小人儿起个名字就叫新一吧（侵权请联系作者删除！）

代码如下：

    //一个文本
    Text {
        x:220
        y:20
        text: qsTr("新一")                  //内容是新一
        font.family: "Helvetica"           //字体族
        font.pointSize: 24                 //字体大小
        color: "red"                       //字体颜色
        style: Text.Outline; styleColor: "black"//字体样式（外边框黑色）
    }

运行结果如下：

 

---

总结

本章带你使用了qml的两个基本控件矩形和文本框。