QT designer studio 设计ROS界面【入门级】【第一部分·界面搭建】_ros系统搭建ui界面

方案来源和确定

本想只做ros的，突然要做UI就很令人头秃。调研了一些方法，以两种方案为主，一种是在rviz做界面插件的形式优化人机交互体验；另一种是基于qt creator，安装ros_qtc_plugin这个插件，插件说明参考下链接：

https://ros-qtc-plugin.readthedocs.io/en/latest/_source/How-to-Install-Users.html

前一种方案因为一些原因否了，后一种方案又遇到另一个问题。当前的开发环境是ubuntu 20.04，为aarch64架构，因为有意切换到ros2，而且相关的ros包已经开发的比较完善了。该插件仅有14.04/16.04/18.04的成熟版本，至于20.04是开发者版，需要自行根据内核调整环境进行编译，尝试了几天，无果，又碍于时间精力有限放弃了该方法，就又找了一种方案。

• 先用qt designer studio 搭建好基础界面
• 然后指定开发环境下支持的qt版本生成相应地python基础工程
• 并能用pyside库正常运行
• 然后在工作空间下新建ros包，将python工程移入
• 解决相关文件依赖性和路径问题
• 补充ros功能，建立所需各包与UI的联系

准备说明

难度是入门级难度，这里只提开发时最常用到的，掌握了就可以自己搭界面
qml的基础知识

锚定位（比较推荐）、绑定定位，还有几种方法，掌握一种够用。
语法基础,读懂代码，仿写代码就行
基本概念：ID，组件中的button、text、rectangle、positioner、label，信号和槽，定时器
一些必要的视窗（在views中勾选）:navigator、projrcts、components、2D/3D、Code、properties，state，进阶的有timeline,curves等

创建项目

第一次创建选择general，其他大同小异，样式风格看喜好。

基础视窗

左上角是navigator 是一个组件树，显示了组件间的亲子关系（鼠标悬停有少量说明文本）
左边侧中部是组件和资源视窗，将组件框中的组件可以直接拖拽至中部2D视窗进行添加，也可以将其拖入组件树确定亲子关系同时会自动添加至中部视窗
中偏下部是status视窗，有一个base状态，同时可以有多个子状态。选中base状态，在此状态在组件树中添加任意组件后并进行属性更改时，初始时会将更改应用于所有子状态。若在子状态对相应地组件相应属性更改后，该组件在该子状态下以子状态设定的属性为准，此时更改基状态下组件属性不再对子状态下的该组件属性进行更改。打个通俗比方，基状态就像买车时的旗舰车的基础配置，子状态就是该车型的私人定制，可以加配置或者减配置或者更改配置。车刚设计出来时，所有的配置都相同，客户下了订单付钱之后，配置就以该订单为准也就是子状态的设置。
通过子状态的何时响应，可以确定状态间的切换逻辑。点击子状态窗口的最下方的修改，会弹出小窗口，通过简单的逻辑表达式可以设置，例如，**!button1.checked && button2.checked ** 表明当button1没用按下，且button2按下时，会切换至该状态。同时可以在不同的子状态设置所需的可见属性，这样可以在不同的状态显示想要的不同的界面效果。
右侧有两个页面，Code和properties。Code就是代码界面，properties是属性界面。属性界面相当于是模块化编程，勾选好对应的选项后会自动于Code界面按一定顺序生成对应代码，一些常见的功能也可以自己直接在代码列表敲，这样能省下切换properties找属性栏修改属性的时间。建议初学者多对比Code中的代码和组件及属性之间的关系可以加深理解。
了解完以上就可以自己实战一个最质朴的界面了，但是各种特效动画都是没有添加的，如需增加就需要了解更多了。