项目介绍(五)界面代码自动生成项目

Jan 1, 2018


项目背景

这是在大一的时候参考Qt的ui可以进行拖入编辑的模式,制作一个可以拖入元素、设置元素属性、生成代码的一个工具,可以让简单的界面开发变得很方便。

环境:Windows-10,Qt-5.7,Qt-Quick-2.7

主要使用编程语言:QML

源代码:https://github.com/Ecohnoch/QML-Generator

性质:全独立自主实现

时间:2016年9月

项目介绍

可拖入控件

  • 矩形
    • 普通矩形
    • 图片
    • 动态图片
  • 音乐播放器
  • 控件管理器

所有的控件初始都在右上角为100*100的矩形,鼠标移动上去边框会变红,拖拽可以使控件移动

同时右键可以对场景进行管理,增加或者删除或者重命名当前场景

矩形

普通矩形,初始位置在左上角,鼠标移动上去边框会变红,双击可以编辑属性:

image

鼠标移动上去边框会变红:

image

双击编辑属性,图片上可以显示文字,可调整颜色、大小、透明度、是否为图片:

image

将默认矩形透明度设为0并且设置路径后可变为图片,动态图片则使用aniImg控件:

image

音乐

音乐播放器为一个黑色的矩形,可调为透明,控制该场景中音乐的播放,一个场景只能有一个音乐播放器。

image

场景切换

场景中右键可以对场景进行添加、删除、重命名,新的场景以名字放置在上面的tab栏中

现在已经有三个场景:defaultItem, item1和item2,点击add后会添加item3:

image

控件管理器

设置一个控件去获取当前场景中所有的控件,可直接选取某控件进行编辑,目的是防止控件过多或者重合之后不好修改。

image

生成代码

处于某场景下,点击菜单栏的file并输出代码,可以得到该场景的QML代码,在QML的编译器中运行该代码可以直接得到相应的界面。

image

关于界面

image