Qt5 学习之路及嵌入式开发教程22:QML自定义元素与布局

一、启动Qt5.12

1、新建项目文件,进入界面

Qt5 学习之路及嵌入式开发教程22:QML自定义元素与布局

2、选择后

Qt5 学习之路及嵌入式开发教程22:QML自定义元素与布局

3、几个下一步后,点击完成:

Qt5 学习之路及嵌入式开发教程22:QML自定义元素与布局

4、运行,查看结果

Qt5 学习之路及嵌入式开发教程22:QML自定义元素与布局

二、自定义三个组件:长方形,正方形,圆形

1、自定义过程:

Qt5 学习之路及嵌入式开发教程22:QML自定义元素与布局

在①处右键、找到“Add New”,出现如下对话框

Qt5 学习之路及嵌入式开发教程22:QML自定义元素与布局

选择后,出现对话框

Qt5 学习之路及嵌入式开发教程22:QML自定义元素与布局

下一步后,点击完成,出现如下

Qt5 学习之路及嵌入式开发教程22:QML自定义元素与布局

2、定义矩形性质

Qt5 学习之路及嵌入式开发教程22:QML自定义元素与布局

3、调用:双击main.qml文件

Qt5 学习之路及嵌入式开发教程22:QML自定义元素与布局

运行,查看结果

Qt5 学习之路及嵌入式开发教程22:QML自定义元素与布局

4、用同样方法,定义正方形及圆形

调用代码

Qt5 学习之路及嵌入式开发教程22:QML自定义元素与布局

运行结果

Qt5 学习之路及嵌入式开发教程22:QML自定义元素与布局

三、行列定位、流定位(做例子时,把前面的例子先注释)

1、行列定位、重复器(Repeater):例子中的位置、颜色、间距、大小参数,同学们可以修改,查看运行结果。

Qt5 学习之路及嵌入式开发教程22:QML自定义元素与布局

运行结果:

Qt5 学习之路及嵌入式开发教程22:QML自定义元素与布局

列定位器:

Qt5 学习之路及嵌入式开发教程22:QML自定义元素与布局

运行结果:

Qt5 学习之路及嵌入式开发教程22:QML自定义元素与布局

2、Grid定位器

Qt5 学习之路及嵌入式开发教程22:QML自定义元素与布局

运行结果:

Qt5 学习之路及嵌入式开发教程22:QML自定义元素与布局

3、流定位(Flow)

Qt5 学习之路及嵌入式开发教程22:QML自定义元素与布局

运行结果:

Qt5 学习之路及嵌入式开发教程22:QML自定义元素与布局

上一篇:CMake 管理 Qt 工程 (Linux)


下一篇:Qt工作笔记-Qt5中中文编码方面的笔记