原文转自 https://blog.csdn.net/rl529014/article/details/51378307

在Qt编程中,我们可以使用纯C++代码,或C++和XML结合的方式来创建GUI程序。

下面我介绍一下如何在Qt Creater中用QML创建GUI程序。

首先打开Qt Creater,选择“Qt Quick Application”:

然后选择Qt Quick Component Set的版本,注意此处的版本要和程序中导入的版本一致。

新建完成后,显示的界面如下:

与 Widgets 工程相比,Quick Control 多出了几个文件:

  • main.qml 是 QML 文件,它的后缀就是.qml。qml.qrc 是资源文件,主要包含了 QML 文件的路径,以确保 QML 引擎能够找到文件。
  • deployment.pri 是工程文件 QuickControlsDemo.pro 的辅助文件。

切换到设计模式,就可以从左侧的面板中看到 QML 的基本元素、控件、布局等,这些都可以拖拽到中间的编辑区。

main.qml 是可以编辑的,打开 main.qml,将下面的代码复制进去:

import QtQuick 2.3
import QtQuick.Controls 1.2 ApplicationWindow {
visible: true
width:
height:
color: "#ffffff"
title: qsTr("QuickControlsDemo") Text {
id: text1
x:
y:
width:
height:
text: qsTr("用户名:")
horizontalAlignment: Text.AlignRight
verticalAlignment: Text.AlignVCenter
font.pixelSize:
} TextField {
id: textField1
x:
y:
width:
height:
placeholderText: qsTr("请输入用户名")
} Text {
id: text2
x:
y:
width:
height:
text: qsTr("密 码:")
verticalAlignment: Text.AlignVCenter
font.pixelSize:
horizontalAlignment: Text.AlignRight
} TextField {
id: textField2
x:
y:
width:
height:
echoMode:
placeholderText: qsTr("请输入密码")
} Button {
id: button1
x:
y:
width:
height:
text: qsTr("登 录")
} Button {
id: button2
x:
y:
width:
height:
text: qsTr("取 消")
}
}

效果如下:

再切换到设计模式,就可以看到一个简单的登录框。运行一下就可以看到效果:

当然你也可以运行,效果如下:

读者可以好好研究一下QML文件,了解其基本语法和格式。

使用QML创建界面(转)的更多相关文章

  1. 基于qml创建最简单的图像处理程序(1)-基于qml创建界面

    <基于qml创建最简单的图像处理程序>系列课程及配套代码基于qml创建最简单的图像处理程序(1)-基于qml创建界面http://www.cnblogs.com/jsxyhelu/p/83 ...

  2. 基于qml创建最简单的图像处理程序(3)-使用opencv&qml进行图像处理

    <基于qml创建最简单的图像处理程序>系列课程及配套代码基于qml创建最简单的图像处理程序(1)-基于qml创建界面http://www.cnblogs.com/jsxyhelu/p/83 ...

  3. 基于qml创建最简单的图像处理程序(2)-使用c++&qml进行图像处理

     <基于qml创建最简单的图像处理程序>系列课程及配套代码基于qml创建最简单的图像处理程序(1)-基于qml创建界面http://www.cnblogs.com/jsxyhelu/p/8 ...

  4. 使用QML创建第一个界面(转)

    原文转自 https://blog.csdn.net/rl529014/article/details/51378307 在Qt编程中,我们可以使用纯C++代码,或C++和XML结合的方式来创建GUI ...

  5. 为QML创建C++插件(下载)

    版权声明:本文为博主原创文章,欢迎转载,转载请注明出处 https://blog.csdn.net/MatchYang/article/details/54564462 1. 为QML创建C++插件的 ...

  6. Android 通过Java代码生成创建界面。动态生成View,动态设置View属性。addRules详解

    废话不多说,本文将会层层深入给大家讲解如何动态的生成一个完整的界面. 本文内容: Java代码中动态生成View Java代码中动态设置View的位置,以及其他的属性 LayoutParams详解 一 ...

  7. iOS创建界面方法的讨论

    以前在入门的时候,找的入门书籍上编写的 demo 都是基于 Storyboards 拖界面的.后来接触公司项目,发现界面都是用纯代码去写复杂的 autoLayout 的.再然后,领导给我发了个 Mas ...

  8. 使用QML绘制界面

    1 使用QML设计登录界面 https://www.cnblogs.com/bhlsheji/p/5324871.html 2 使用QML实现下拉列表框  https://blog.csdn.net/ ...

  9. [iOS]创建界面方法的讨论

    以前在入门的时候,找的入门书籍上编写的 demo 都是基于 Storyboards 拖界面的.后来接触公司项目,发现界面都是用纯代码去写复杂的 autoLayout 的.再然后,领导给我发了个 Mas ...

随机推荐

  1. 笔记-redis深入学习-1

    笔记-redis深入学习-1 redis的基本使用已经会了,但存储和读取只是数据库系统最基础的功能: 数据库系统还得为可靠实现这两者提供一系列保证: 数据.操作备份和恢复,主要是持久化: 高可用:主要 ...

  2. python ranndom模块及生成验证码

    python的random模块用于生成随机数,下面介绍一下random模块的常用方法: 取随机小数: 数学计算 random.random() 用于生成一个0-1的随机浮点数 0<=n<1 ...

  3. 15.9,python操作redis集群

      上代码 .对redis的单实例进行连接操作 python3 >>>import redis >>>r = redis.StrictRedis(host=, db ...

  4. 2.ifconfig

    转载http://www.cnblogs.com/peida/archive/2013/02/27/2934525.html 许多windows非常熟悉ipconfig命令行工具,它被用来获取网络接口 ...

  5. 四大关键步骤掌握CloudOps模型

    [TechTarget中国原创] 要让IT运维向云演进,企业必须拥抱自动化,并且改变资源预配的思考方式. 新涌现的术语CloudOps——云运维的简写,指代企业如何运行以及管理基于云的系统.并且,随着 ...

  6. 【Remove Duplicates from Sorted List 】cpp

    题目: 第一次刷的时候漏掉了这道题. Given a sorted linked list, delete all duplicates such that each element appear o ...

  7. 【Python】重定向 Stream 到文件

    Python 系统模块 sys 中有三个变量 stdin . stdout 与 stderr ,分别对应标准输入流.输出流与错误流.stdin 默认指向键盘, stdout 与 stderr 默认指向 ...

  8. android系统联系人分组特效实现(2)---字母表快速滚动

    要实现这种功能,只需要在   android系统联系人分组特效实现(1)---分组导航和挤压动画  的基础上再加上一个自定义控件即可完成. 1.新建项目,继续新建一个java类,BladeView,用 ...

  9. kibana的查询语法

    kibana的查询语法是    字段Fields:关键词

  10. chrome浏览器console拓展用法

    chrome 浏览器console打印 使用CSS美化输出信息 console.log("%cThis will be formatted with large, blue text&quo ...