本主题提供逐步说明，用于设计一个简单的UI，指示用户按钮和板上LED的状态。您需要Qt Design Studio才能开始。如果您还没有安装，请使用Qt在线安装程序或Qt维护工具进行安装。

以下说明将引导您完成完整的设计过程

1. 创建新项目
   • 打开Qt Design Studio并选择创建项目。

     

   • 在新建项目向导中，选择Qt for MCUs选项卡。
   • 将分辨率设置为480 x 272。

     

   • 命名项目并选择创建。

     

   现在您应该看到设计模式UI和带有Rectangle和Text组件的模板项目。

   

2. 在导航器 面板或表单编辑器 中选择Rectangle，以在属性 面板中更改其属性。
   • 将填充颜色属性更改为黑色，可以使用颜色选择器或手动输入Hex代码（#000000）。

     

3. 在导航器 面板或表单编辑器 中选择Text，以更改其属性。
   • 将文本颜色更改为白色，可以使用颜色选择器或手动输入Hex代码（#ffffff）。
   • 将单位更改为px，将大小更改为14。
   • 将文本更改为LED1。

     

4. 添加按钮矩形
   • 在组件 面板下找到Rectangle组件，属于基本组件。将其拖到导航器 面板中的Rectangle上。

     

   • 在导航器 面板中选择新矩形，以在属性 面板中更改一些属性。
     • 通过颜色选择器或手动输入Hex代码（#808080）将填充颜色属性更改为灰色。
     • 设置为120 W x 60 H。

       

     • 切换到布局选项卡，在属性面板中将新矩形锚定到父对象的中心。

       

     • 将现有的文本组件拖动到导航器窗格中的新矩形上。

       

5. 为每个项目分配唯一的ID
   • 将文本项目命名为buttonText。

     

   • 将内部矩形组件命名为buttonRectangle。
   • 将父矩形组件命名为backgroundRectangle。
6. 添加一个MouseArea
   • 在AllowedLOSEnter文本中找到MouseArea组件，它位于组件窗格下Billys组件。将拖动到 naveg页的内部 矩形上。

     

   • 双击mouseArea组件，命名为buttonMouseArea。
   • 转到属性选项卡中的布局选项卡。将buttonMouseArea锚定在其父代buttonRectangle上。

     

7. 将按钮的颜色属性绑定到MouseArea的pressed属性。
   • 在导航窗格中选择buttonRectangle。
   • 从视图 > 视图菜单中选择连接。

     

   • 切换到属性选项卡中的矩形选项卡。
   • 选择设置图标 以设置新的绑定。

     

     

   • 在打开的绑定编辑器中输入以下表达式，并选择确定

     buttonMouseArea.pressed ?
         UICommunicator.led1Status ? "blue" : "grey" :
         UICommunicator.led1Status ? "darkblue" : "dimgrey"

     

   注意：UICommunicator是在下一主题中添加的C++后端。

8. 为MouseArea的onClicked处理器添加连接
   • 在导航窗格中选择buttonMouseArea。
   • 在连接视图中选择连接选项卡。

     

   • 选择+以添加新连接。
   • 在对话框中，选择手工条件图标 以打开连接编辑器。

     

   • 将以下代码输入连接编辑器，并选择确定

     UICommunicator.sendFromUI(
         UICommunicator.LED1State,
         !UICommunicator.led1Status)

     

9. 保存并关闭。
   • 选择文件 > 全部保存以保存更改。
   • 选择文件 > 关闭项目 <your-project-name>以关闭项目。