从零开始学习qml(二)
美好的事情即将发生
前言
我们继续开始今天的学习。今天实现最基础的画矩形功能。
从零开始学习qml(一)的连接:https://blog.csdn.net/weixin_37997214/article/details/109752388
版权所有,转载请注明出处。本文链接:https://blog.csdn.net/weixin_37997214/article/details/109754591
目录
目录
一、今天学什么
废话不多说,第二章就是在咱们的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的两个基本控件矩形和文本框。