qml语言基础

在这里插入图片描述

  • 如上图,新建一个空的Qt Quick Application,运行就是一个空的窗口文件
    在这里插入图片描述

  • import语句
    导入模块,类似于c++中的include
    QtQuick 2.9:此模块为创建图形用户界面提供了最基本的类型
    QtQuick.Window模块:window类型可以为Qt Quick场景创建一个顶级窗口

  • QML对象
    对象类型被实例化以后,就叫做该对象类型的对象
    如Window,在代码中现在就是一个对象,以大写字母开头,后面跟一对大括号,在括号中包含对象的属性

  • QML元素
    如以下的控件

  • Item: 基本的项元素 在QML中所有可视化的向都继承他,是所有可视元素的基类
    它本身不可见,但是我们可以使用Item来分组其他的可视图元,它定义了绘制图元所需要的大部分的通用属性

  • Rectangle: 绘制一个填充矩形,可以带边框,也可以不带,还可以填充颜色
    在这里插入图片描述

  • Text: 可以显示纯文本或者富文本,它有非常多的属性
    id并不是一个属性,设置id的作用是为了在其他的对象中来获取text属性的值。所以一般需要在开头设置一个id,id值是唯一的,而且必须使用小写字母或者下划线开头,不能使用其他字符
    在这里插入图片描述

  • Qt Quick Controls 与 Qt Quick Controls 2的区别
    直接在代码中同时调用两个模块会出错,因为qml文件只能识别到一个版本的控件。
    qt里面没有安装QtQuick.Controls 2,一般如果是通过sudo apt-get install 方式安装qt的都会遇到这个问题,在终端中输入sudo apt-get install qml-module-qtquick-controls2安装即可

  • 最终代码如下

import QtQuick 2.9
import QtQuick.Window 2.2

Window {
    visible: true
    width: 640
    height: 480
    title: qsTr("Hello World")

    Rectangle{
            width: 300
            height: 200
            anchors.centerIn: parent    //定义了矩形基于window对象居中
            color: "blue"
            border.width: 2
            border.color: "black"
            radius: 3   //定义了矩形的四周的圆滑角度,数值越大越平滑
        }
    Text {
            id: text1
            text: qsTr("Hello World!") //设置显示的文字
            anchors.centerIn: parent
            font.pixelSize: 30  //字体大小
            font.bold: true //文字是否加粗,默认false
            font.italic: true   //文字是否倾斜,默认false
            font.capitalization: Font.AllUppercase  //文字大小写
            font.family: "Corber"   //文字样式
            color: "red"    //文字颜色
        }
}



  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值