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

以下说明将指导您完成整个设计过程

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

     

   • 在“新项目”向导中选择“Qt for MCUs”标签页。
   • 将“宽度”设置为800，将“高度”设置为600以设置屏幕分辨率。

     

   • 为您的项目命名，并选择创建。

     

   您现在应该看到设计模式UI和带有一个矩形和一个文本项的样板项目。

   

2. 在navigator面板或表单编辑器中选中矩形，在属性面板中更改其属性。
   • 将填充颜色属性更改为黑色，方法是使用颜色选择器或手动输入十六进制代码（#000000）。

     

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

     

4. 添加按钮矩形
   • 在组件面板的基本组件下找到矩形组件。将其拖动到navigator面板中的矩形上。

     

   • 在navigator面板中选择新的矩形，在属性面板中更改一些属性。
     • 使用颜色选择器或手动输入十六进制代码（#808080）将其填充颜色属性更改为灰色。
     • 将其大小设置为200 W x 100 H。

       

     • 在属性面板中切换到布局部分。将其锚定到父级的中心。

       

     • 将现有的文本组件拖到新的矩形上。

       

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

     

   • 将内部矩形项命名为statusRect。
   • 将父级矩形项命名为backgroundRect。
6. 为statusRect创建一个按下属性。
   • 在导航器 面板中选择statusRect。
   • 从视图 > 视图菜单中选择连接。

     

   • 在连接视图中切换到属性选项卡。
   • 选择+ 以添加新的属性。将类型选择为bool，在名称下输入pressed，在值下输入false。

     

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

     

     

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

     statusRect.pressed ? "#41cd52" : "#808080"

     

     

   注意：您将在下一章中添加的C++后端将修改pressed布尔属性。

7. 保存并关闭。
   • 选择文件 > 保存所有以保存您的更改。
   • 选择文件 > 关闭项目 <YourProject>以关闭项目。