QML first steps with QML

Creating a QML Document

     一个QML文件定义一个对象的层次结构,具有高度可读性和结构化的布局 。每个QML文件包括两部分:一个引入部分和一个对象声明部分。 用户界面中最常见的类型和功能由QtQuick引入。

Importing and Using the QtQuick Module

     为了使用QtQuick模块,一个QML文件需要将其引入,语法如下;

    import QtQuick 2.0

  Qt Quick提供的类型和功能同样可以在QML文件中使用 

Defining an Object Hierarchy (定义一个对象层次结构)

QML文件中的对象声明定义了将在可视化显示中的输出,QtQuick为所有的用户界面提供基本的构建筷

例如  显示图像,文本或者处理用户输入的对象  

  一个简单的对象声明可能是一个中间有文字的带颜色矩形


<span style="font-size:18px;">Rectangle {
    width: 200
    height: 100
    color: "red"

    Text {
        anchors.centerIn: parent
        text: "Hello, World!"
    }
}//根对象为Rectangle ,孩子对象为Text</span>
<strong><span style="font-size:24px;">Putting ir all together</span></strong>
<span style="font-size:18px;">将对象声明和引入放在一起
</span><pre name="code" class="plain"><span style="font-size:18px;">import QtQuick 2.1

Rectangle {
    width: 200
    height: 100
   

    Text {
        anchors.centerIn: parent//中间位置
        text: "Hello, World!"
     color: "red"
    }
}
将代码另存为helloworld.qml   在终端运行 qmlscene helloworld.aml
结果</span>
<img src="data:image/png;base64,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" alt="" />
<span style="font-size:18px;">可知</span><pre name="code" class="plain"><pre name="code" class="plain"><span style="font-size:18px;"> anchors.centerIn: parent为居于父类的中间位置</span>

 
Creating and running QML projects
为了将qml文件图形化显示
,需要用Qt Creator来加载。选择File->new file or project ->applications->Qt Quick UI
输入完成代码后,通过Run运行
Creating QML Applications with Controls
对于创建一个新的应用程序,插入ApplicationWindow是一个好的起始点。
Building and Running an Example
打开QT在欢迎模式中,选择Example ,选择clock项目->复制到目录打开->运行
结果如图

如果出现../../Qt5.1.0/5.1.0/gcc_64/include/QtGui/qopengl.h:110:21: fatalerror: GL/gl.h: No such file or directory
在终端中执行
sudo apt-get install mesa-common-dev
编译出现如下错误提示:
/usr/bin/ld: cannot find -lGL
执行下面命令解决:
sudo apt-get install libgl1-mesa-dev libglu1-mesa-dev

 


 


  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值