一、启动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自定义元素与布局

相关文章:

  • 2022-12-23
  • 2021-06-25
  • 2022-12-23
  • 2021-09-11
  • 2022-12-23
  • 2022-12-23
  • 2021-08-08
  • 2021-08-06
猜你喜欢
  • 2021-06-25
  • 2021-05-18
  • 2021-07-04
  • 2021-11-05
  • 2021-09-12
  • 2021-10-28
  • 2022-12-23
相关资源
相似解决方案