布局分析
====

开发者可以使用ArkUI Inspector，在DevEco Studio上查看应用在真机上的UI显示效果，并通过查看多次操作后的界面状态，快速分析定位UI界面存在的问题。

ArkUI Inspector支持的功能包括：

*   [查看设备上应用的UI显示效果](#section1645813371383)。
*   [导出及导入应用UI界面快照](#section0442629153111)，脱离设备查看UI显示效果。
*   在组件树上选择组件，UI界面自动框选对应组件，属性列表显示当前组件的属性信息。
*   在UI界面点击选择组件，组件树对应组件变化为选中状态，属性列表显示当前组件的属性信息。
*   [UI组件源码跳转](#section1226015494335)，选中UI组件后点击源码跳转按钮即可跳转至源码位置。
*   在UI界面上选择Show Component Border，可[查看当前页面上所有组件显示区域](#section1137025915336)。
*   在组件树上选择自定义组件，属性列表显示当前组件配置的[状态变量信息以及影响组件](#section19923158103412)。
*   [查看窗口交互事件](#section516993011576)，包括触屏、鼠标、按键、滚轮、窗口焦点变化事件。
*   按照组件粒度[3D展开应用](#section138812162416)，方便查看组件之间的嵌套、遮挡关系。

#### 使用场景

针对界面较复杂的应用：

*   通过组件树查看组件的父子关系，检查是否存在冗余组件。
*   针对应用在真机或模拟器上运行出现UI界面显示异常，尤其经过多次界面复杂操作后产生的界面错误以及后台逻辑错误，进行问题分析定位。

#### 使用约束

*   仅运行在前台的应用支持通过Inspector查看。
*   已通过USB或WLAN连接设备。
*   仅支持Stage工程。
*   仅支持全屏应用或者焦点在前台的窗口。
*   不支持应用市场上架的商用签名应用。

#### 操作步骤

1.  在DevEco Studio下方点击**ArkUI Inspector**，打开ArkUI Inspector。
    
    ![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/a6/v3/VZxJJHg_Rl67PAhhAl62ZA/zh-cn_image_0000002594474332.png?HW-CC-KV=V1&HW-CC-Date=20260612T073900Z&HW-CC-Expire=86400&HW-CC-Sign=040D408DF32D32103B1447300ED96EB91563C04EC6F14B6273914CC6C8CDD53F)
    
2.  点击RUN![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/f5/v3/FyPaPaKAR1axlfZe67BiJQ/zh-cn_image_0000002594634278.png?HW-CC-KV=V1&HW-CC-Date=20260612T073900Z&HW-CC-Expire=86400&HW-CC-Sign=319E0E938840CE7A2597321888391FB80AE32FFC2B95B6BF24E708AE1F134F00)或者DEBUG![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/19/v3/Jv-aMLn_R1usa8XeoXxXrQ/zh-cn_image_0000002624993731.png?HW-CC-KV=V1&HW-CC-Date=20260612T073900Z&HW-CC-Expire=86400&HW-CC-Sign=C4D1B0B48BDC600462F9DC26A49140AD8CC71BB49F6C4A3984D9408004233C90)按钮，将应用推送安装到设备上，在设备的应用列表中选择当前显示在前台的UI进程。
    
    ![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/9a/v3/-EVxbCFGTg2XzZ6q_BW-0A/zh-cn_image_0000002594634242.png?HW-CC-KV=V1&HW-CC-Date=20260612T073900Z&HW-CC-Expire=86400&HW-CC-Sign=AC669D2F14EE25ED81A5FC155CC75907BC195E5AD70EBFA80BA6A707CAAB4015)
    
3.  ArkUI Inspector左侧为当前的组件树结构，中间栏显示当前设备的UI界面，右侧在选中组件的情况下为当前组件的属性信息。可以在左侧组件树上或在中间UI界面点击选择组件。当设备上UI发生变化时，可点击中间栏右上角![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/28/v3/Qx1dXCOXR9yb3XFKwsSSSw/zh-cn_image_0000002594474366.png?HW-CC-KV=V1&HW-CC-Date=20260612T073900Z&HW-CC-Expire=86400&HW-CC-Sign=1161BFC15944FA52BF0E47786CE9F1B4AF1BD2CA142BC8ED3D86701D771313D1)按钮同步设备上的UI效果。
    
    ![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/f8/v3/fPLSRebuRCSij4aK8L5tDw/zh-cn_image_0000002594474336.png?HW-CC-KV=V1&HW-CC-Date=20260612T073900Z&HW-CC-Expire=86400&HW-CC-Sign=5F16A3A78509F42F808A2A48222AB42C5BAF8CC938B3385EEB46FAC25FC5349D)
    
4.  在设备框，点击设备列表的最后一项**Stop inspector**，可断开与设备的连接。
    
    ![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/01/v3/9WyOvhu1RG-lxvpbaHwVBw/zh-cn_image_0000002625073851.png?HW-CC-KV=V1&HW-CC-Date=20260612T073900Z&HW-CC-Expire=86400&HW-CC-Sign=9E77B38F28B7C1C677BA01CA435183D9AD9DFC37FB2D8301FE94788051118970)
    

#### 显示组件信息

*   点击![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/b8/v3/Nk3pYwMbQkWXPFu_IfkILA/zh-cn_image_0000002624993701.png?HW-CC-KV=V1&HW-CC-Date=20260612T073900Z&HW-CC-Expire=86400&HW-CC-Sign=3097EFF3106F47F4401C2D303D518AB460A8FFCF211C5E2D419FA26504C7A643 "点击放大")，勾选**Show Tree Statistics**，可显示组件树组件信息。
    
    ![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/42/v3/IXQWZRK_R56sUub4wf0HIQ/zh-cn_image_0000002594474356.png?HW-CC-KV=V1&HW-CC-Date=20260612T073900Z&HW-CC-Expire=86400&HW-CC-Sign=904A417067DA7C782F8EA2ED0098DE14F8BD11EA33B753EBA8ED643A56027EB1)
    
*   点击![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/fc/v3/oNmnaCGOTia5WC535Jle0A/zh-cn_image_0000002624993711.png?HW-CC-KV=V1&HW-CC-Date=20260612T073900Z&HW-CC-Expire=86400&HW-CC-Sign=4C9FE4E66D0D8E77F531AB122F7919DFC830313B79DB7D8DB22EC36A088FA193 "点击放大")，勾选**Show Hidden Components**，可显示隐藏的组件。
    
    ![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/7b/v3/uU3pu3k9QjWUQodqxfxbYQ/zh-cn_image_0000002624993683.png?HW-CC-KV=V1&HW-CC-Date=20260612T073900Z&HW-CC-Expire=86400&HW-CC-Sign=4055E7544ED2A54C92C600A61D0E5E896B261A382A5F9062743D7A5981FE7328)
    
*   点击![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/59/v3/Q1EQnY-AQ_yptbxPpjVNVg/zh-cn_image_0000002625073823.png?HW-CC-KV=V1&HW-CC-Date=20260612T073900Z&HW-CC-Expire=86400&HW-CC-Sign=7CA0F13147A97873BD720FEC1AC9962E078A3B533B38F7AFE0C918865362F465 "点击放大")，勾选**Show Custom Components**，可过滤自定义组件。
    
    ![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/a3/v3/1ovx_2NfQDuwskLcUbKpuw/zh-cn_image_0000002625073843.png?HW-CC-KV=V1&HW-CC-Date=20260612T073900Z&HW-CC-Expire=86400&HW-CC-Sign=D525ACD6866AAE3C6DB804D417F9C2657D1E2F6AA9E97EB76AA9C36294BC011B)
    
*   点击![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/24/v3/LavIFZhdTEWCFVrGymn1NA/zh-cn_image_0000002594474354.png?HW-CC-KV=V1&HW-CC-Date=20260612T073900Z&HW-CC-Expire=86400&HW-CC-Sign=8A047562838160A9E77CD1A22683A20B8AD8A31133966D2277922F7FB5AE1F94 "点击放大")，勾选**Show System Components**，可过滤系统组件。
    
    ![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/6f/v3/Dve29qg_REKxhi6LtRbm7w/zh-cn_image_0000002594474338.png?HW-CC-KV=V1&HW-CC-Date=20260612T073900Z&HW-CC-Expire=86400&HW-CC-Sign=47FA35EFC457824073D71AECB808EE7260A90F4B3AB65961A8DEB10EDF461353)
    

#### 导入/导出UI界面快照

ArkUI Inspector支持导出及导入应用UI界面快照，脱离设备查看应用UI界面显示效果。

*   在中间栏点击![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/3e/v3/ZmOGIXuzTJ6XVhb7RvgXvA/zh-cn_image_0000002594634238.png?HW-CC-KV=V1&HW-CC-Date=20260612T073900Z&HW-CC-Expire=86400&HW-CC-Sign=F04A1C7419C06224A75EDFBE603FF0C08D7995169B4EACACBEEEC964B969F715)可以导入本地的应用UI界面快照。导入成功后将在DevEco Studio中打开该快照。
*   在中间栏点击![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/76/v3/OFgBPeYbRDW2CKviZbiR4A/zh-cn_image_0000002625073877.png?HW-CC-KV=V1&HW-CC-Date=20260612T073900Z&HW-CC-Expire=86400&HW-CC-Sign=F5FD80AC3996E86C604B0C59F1DAF08DA966A81F664DEC62025A386D9372071B)可以将应用UI界面快照导出到本地。导出成功后将默认在DevEco Studio中打开该快照。

![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/cb/v3/2WIWJ5mMQ7-0sKUXl_oFbA/zh-cn_image_0000002594634282.png?HW-CC-KV=V1&HW-CC-Date=20260612T073900Z&HW-CC-Expire=86400&HW-CC-Sign=7358D0A18F5687013F3D74DAA5FF353ABDE49A9A67DE29B40982329FE2757D90)

#### UI组件源码跳转

1.  单击**Run > Edit Configurations**，勾选“**Enable DebugLine**”，点击**OK**保存后，重新运行工程，表示开启源码跳转功能。
    
    ![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/55/v3/KjueBp1RTjSx2YYGbMKySA/zh-cn_image_0000002594474364.png?HW-CC-KV=V1&HW-CC-Date=20260612T073900Z&HW-CC-Expire=86400&HW-CC-Sign=3FD778EE7E348E829203124D62C2B165FAF33002F09572C61ADD15EC3B7FFCBB)
    
2.  在ArkUI Inspector中，选中要进行源码跳转的UI组件，点击右侧的源码跳转，即可跳转到UI组件源码位置。
    
    ![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/7f/v3/Mdk6ZQTNRXCb2mHMyCwQNQ/zh-cn_image_0000002624993709.png?HW-CC-KV=V1&HW-CC-Date=20260612T073900Z&HW-CC-Expire=86400&HW-CC-Sign=D1846EC82C4AEFA59BE2B4032851B6496368155A4B6C9AE922EB9B765D8449EF)
    

#### 显示布局边框

在UI显示设置上，勾选“**Show Component Border**”，可显示当前页面所有组件的布局信息。

![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/17/v3/_0VEiB3jQQy6lqAMH0MqDQ/zh-cn_image_0000002624993703.png?HW-CC-KV=V1&HW-CC-Date=20260612T073900Z&HW-CC-Expire=86400&HW-CC-Sign=15FA0BC13C7EE917288C4EB5F88FF6B64209F400F36DEF163940F0721CD3DAF3)

#### 查看UI组件的状态变量

点击自定义组件，可以查看自定义组件的状态变量，以及状态变量影响的下一层组件。

![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/bc/v3/btDmIu2pTQmcppavt2ncKg/zh-cn_image_0000002594634256.png?HW-CC-KV=V1&HW-CC-Date=20260612T073900Z&HW-CC-Expire=86400&HW-CC-Sign=5F624B11E08AA52096C3AEB9983A83E3F6E88C25EC6ADF686E4564EE34678135)

#### 查看窗口交互事件

从DevEco Studio 6.1.0 Beta1版本开始，支持查看[窗口交互事件](https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/arkts-interaction-capability-overview)，包括触屏、鼠标、按键、滚轮、窗口焦点变化事件，帮助开发者定位窗口发生失焦、获焦、重绘等问题。

选择**WindowEvents**页签，点击Start按钮![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/48/v3/hpIi3i-mR9Gfc_VXCUa7yw/zh-cn_image_0000002594634248.png?HW-CC-KV=V1&HW-CC-Date=20260612T073900Z&HW-CC-Expire=86400&HW-CC-Sign=4A05DCBC269A448BABB1132D828D153D0505135F80F716B64EF58A9FF8AF223C)，开始上报事件消息，包括事件时间戳、窗口ID、事件类型、坐标等，支持按事件类型过滤。点击Stop按钮![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/d7/v3/r5WQ4FonTHqNYpL01_hv0Q/zh-cn_image_0000002625073855.png?HW-CC-KV=V1&HW-CC-Date=20260612T073900Z&HW-CC-Expire=86400&HW-CC-Sign=88DAF240257C7DC4F146C39F079F93F0B6B1E78E8B789321F717D6088421DB04)，即可停止上报事件。

![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/b6/v3/YoYJjYiDThKbrJ1tKxMNVg/zh-cn_image_0000002594474348.png?HW-CC-KV=V1&HW-CC-Date=20260612T073900Z&HW-CC-Expire=86400&HW-CC-Sign=2232D6BF86EF0AFE1EB0DDD83A14861C2052E9A4096FA823D0AA4FAEE2D94EBB)

#### 3D展开应用

ArkUI Inspector支持将应用按照组件粒度进行3D展开，即UI界面能够在Z轴展开，方便查看组件之间的嵌套、遮挡关系。

该功能从DevEco Studio 6.0.0 Beta1版本开始支持，同时设备系统版本需要升级到API 20。

#### \[h2\]使用场景

*   点击图层可以精准选中和查看被遮挡的组件，可用于定位组件是否被遮挡等问题。
*   3D视图展示的图层均是组件树上参与渲染的组件，可帮助开发者判断组件是否需要进行渲染，例如过长的列表、不可见区域是否需要渲染，帮助开发者优化渲染性能。
*   对于页面复杂、小组件较多的场景，在组件树或者2D视图中难以选中，通过3D视图增加图层之间的距离，能够有效地突出小组件，使其更易于选中。

#### \[h2\]进入3D视图

点击3D View按钮![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/ca/v3/we42-XYOS6en0SxBqRuZYw/zh-cn_image_0000002594634270.png?HW-CC-KV=V1&HW-CC-Date=20260612T073900Z&HW-CC-Expire=86400&HW-CC-Sign=A92CF8F47806B0BDFC2BD10736411EA9DDDB85CFB1929BE5625175F31D1B71AD)，进入3D视图。首次进入3D视图会加载3D数据，请等待数据加载完成。

![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/d2/v3/PMT7Z2dnSrufALUY04liAQ/zh-cn_image_0000002624993685.png?HW-CC-KV=V1&HW-CC-Date=20260612T073900Z&HW-CC-Expire=86400&HW-CC-Sign=74FF651F1D053D620F2AB9CB69719A5A06057C62133D487E5EF70538C1048A22)

#### \[h2\]基础操作

*   旋转视图：按住鼠标左键移动。
*   平移视图：按住鼠标右键移动。
*   放大/缩小视图：滚动鼠标滚轮。

#### \[h2\]隐藏前方图层

选中图层后，图层会显示蓝色边框，点击Hide Views in Front按钮![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/4a/v3/HnkhOBczTGyUNoVsMdP8PA/zh-cn_image_0000002594474320.png?HW-CC-KV=V1&HW-CC-Date=20260612T073900Z&HW-CC-Expire=86400&HW-CC-Sign=8108D79546A615E97AE636474A4F5702EA3F6272BDC24AB9E745ABA0015F6E55)，能够隐藏当前选中图层前方（朝向用户）的所有图层，避免不必要图层的干扰。

![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/fa/v3/3iAZCo9YS16TfwQFft_orQ/zh-cn_image_0000002594634266.png?HW-CC-KV=V1&HW-CC-Date=20260612T073900Z&HW-CC-Expire=86400&HW-CC-Sign=4779B482B03A3C0A004D2473276565601A48ABFDDF3EBED86A1CE35635D48962)

#### \[h2\]隐藏后方图层

和隐藏前方图层类似，选中图层后，点击Hide Views Behind按钮![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/6d/v3/2Um1xJ_mR8uo5mvvE-p3tw/zh-cn_image_0000002624993713.png?HW-CC-KV=V1&HW-CC-Date=20260612T073900Z&HW-CC-Expire=86400&HW-CC-Sign=11BFC6D1D0BA71E7F8F402A345ACC7AC80CE4B7D2D58DCD6E5ED6001A0C4E42C)，能够隐藏当前选中图层后方的所有图层。

![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/43/v3/7HuDwBz-Q_2zQ37hzRE0Ng/zh-cn_image_0000002594634260.png?HW-CC-KV=V1&HW-CC-Date=20260612T073900Z&HW-CC-Expire=86400&HW-CC-Sign=41681D9BC7BC500B21D127AAE71DD929B3ACD2E60EB175ADBE0D5752E9E35A16)

#### \[h2\]恢复隐藏图层

点击Restore Hidden Views按钮![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/25/v3/og3B2SopRSuXQadkjb7FwQ/zh-cn_image_0000002624993735.png?HW-CC-KV=V1&HW-CC-Date=20260612T073900Z&HW-CC-Expire=86400&HW-CC-Sign=FBD27A9D3B49EEF2417D17AE030B6F472E57E0717146F451ED325243D6F2A7F4)，能够恢复所有隐藏的前方图层和后方图层。

![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/18/v3/QryogBOzQ0y1tNy4fQ7g-A/zh-cn_image_0000002625073831.png?HW-CC-KV=V1&HW-CC-Date=20260612T073900Z&HW-CC-Expire=86400&HW-CC-Sign=A67716A4C98CD0853501F49F922258B442B15EDDD94C80B90DB12430CD58585C)

#### \[h2\]切换图层排列顺序

图层有两种排列顺序，id顺序和层级顺序。

*   id顺序：默认顺序，即渲染的顺序，也是组件真实显示的顺序，图层的遮挡关系和实际应用一致，每个图层显示在一个Z轴平面上，但如果图层数量较多，会导致Z轴过长，操作不方便。
*   层级顺序：组件树上同一层级的组件，在3D视图中会显示在相同Z轴平面上，能够有效减少3D视图下Z轴长度。

切换方式：点击Switch to Layer Order/Switch to Id Order按钮![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/33/v3/XPBNRI1XQc-yoXsY2WIIxw/zh-cn_image_0000002594634290.png?HW-CC-KV=V1&HW-CC-Date=20260612T073900Z&HW-CC-Expire=86400&HW-CC-Sign=3B60C2CC0C684EB472C9F252B80773C9EE49E3BE476426658A6C014AD4AD5FC0)，可以将图层的排列顺序分别切换至层级顺序/id顺序。

![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/57/v3/zDJryCMlRs-kgal7RYCb_Q/zh-cn_image_0000002594634250.png?HW-CC-KV=V1&HW-CC-Date=20260612T073900Z&HW-CC-Expire=86400&HW-CC-Sign=A03D95DA23AC306D50793D28A7CE017DE082AFA85589BDB2E361EAD74D2C8A55)

#### \[h2\]调节图层间距

鼠标悬浮在Adjust the Gap of Layers按钮![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/f3/v3/ET0IvbvpR5S3bxNuKqKR_w/zh-cn_image_0000002594474350.png?HW-CC-KV=V1&HW-CC-Date=20260612T073900Z&HW-CC-Expire=86400&HW-CC-Sign=5C2550D42DE793662643069BDF2DC2CA93AEE1E22C61BBC409D1E5F47EB21647)上，出现一个拖动条，拖动后可调节图层间的距离，范围是0~100px。

![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/c5/v3/CIkmToaTTiu0ix57OnfieQ/zh-cn_image_0000002594474324.png?HW-CC-KV=V1&HW-CC-Date=20260612T073900Z&HW-CC-Expire=86400&HW-CC-Sign=9343CA60D7347B6930E50BF871BB7DA06A79551EC8116B9A96EA758BB7921E5B)

#### \[h2\]显示/隐藏图层边框

DevEco Studio默认给图层加了边框，此边框并非应用自身边框，便于查看透明图层。点击Hide Border按钮![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/1c/v3/fSWnogA7Qoqo6A1oSTifzA/zh-cn_image_0000002594474372.png?HW-CC-KV=V1&HW-CC-Date=20260612T073900Z&HW-CC-Expire=86400&HW-CC-Sign=3E75583D8B07B48CBE3D9CF58A9C3F466596BD8C4BA231F9F8B2BA5B322F27CA)或Show Border![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/ea/v3/Li4nxlryQrKufIv4Hwk4MA/zh-cn_image_0000002594634268.png?HW-CC-KV=V1&HW-CC-Date=20260612T073900Z&HW-CC-Expire=86400&HW-CC-Sign=F949751020AF8094EA51CA2A4716A72E6EBE3590421B48080D8F4A918FA23FF7)可以隐藏或显示图层边框。

![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/bf/v3/L3KYI3iPSxKkiGmsPMuF_A/zh-cn_image_0000002594634274.png?HW-CC-KV=V1&HW-CC-Date=20260612T073900Z&HW-CC-Expire=86400&HW-CC-Sign=927340AACE87BE722383FB836811D3197B9783CC728C67B7B2F755B6DF3DEEF3)

#### \[h2\]放大/缩小视图

点击Zoom In按钮![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/8c/v3/fT4SxVjlSUeq_tVJavGMDQ/zh-cn_image_0000002594474360.png?HW-CC-KV=V1&HW-CC-Date=20260612T073900Z&HW-CC-Expire=86400&HW-CC-Sign=B3DA3F023B013866DF8135BAA3F59B643B8140FF484EF1C10305105A97DF865A)或Zoom Out按钮![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/9d/v3/bjA5QRloTMmuHfDa8XWtsw/zh-cn_image_0000002625073847.png?HW-CC-KV=V1&HW-CC-Date=20260612T073900Z&HW-CC-Expire=86400&HW-CC-Sign=8D5B7A8C6B034CCB849ACC767C5778D86B0D72B3E6D035760BD9573EA395C04A)，能够放大或缩小3D视图。

![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/9b/v3/WZey6ihGQca9CCvCBn4ZHQ/zh-cn_image_0000002624993727.png?HW-CC-KV=V1&HW-CC-Date=20260612T073900Z&HW-CC-Expire=86400&HW-CC-Sign=17BA988041047394D26EC1675F661450C9AE49CCF0F9DB289C67AB34E43289F8)

#### \[h2\]自适应窗口

点击Zoom to Fit Screen按钮![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/bc/v3/OP7xqcWATJSsQ6o8Yung2w/zh-cn_image_0000002594474330.png?HW-CC-KV=V1&HW-CC-Date=20260612T073900Z&HW-CC-Expire=86400&HW-CC-Sign=1BD51EE5FEDBBABD22361E709EB97D3AFA6B010F06E164692C167BC5E4499C19)，能够自动根据窗口大小，调整3D图层的缩放比例，并使3D视图回到区域中间。

![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/e8/v3/We4lBURDSwaiV1zr6VDU4A/zh-cn_image_0000002594474358.png?HW-CC-KV=V1&HW-CC-Date=20260612T073900Z&HW-CC-Expire=86400&HW-CC-Sign=3EB0762C716F3607D04004459979C67BB31E7778DEA11638AA184A9E3928508F)

#### \[h2\]切换正面/侧面视图

DevEco Studio默认展示侧面视图，经过复杂的旋转后，可点击Switch to Front View按钮![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/5c/v3/IKeJS6FzTraoMSCeQA4qzw/zh-cn_image_0000002594634280.png?HW-CC-KV=V1&HW-CC-Date=20260612T073900Z&HW-CC-Expire=86400&HW-CC-Sign=8469607717B4E8B2C5E0A5C702E96F03B39DAD0635BA08E777226FC3AEC491CD)或Switch to Side View按钮![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/23/v3/4lGieWJIRJmWungBQ5F_Bg/zh-cn_image_0000002594634288.png?HW-CC-KV=V1&HW-CC-Date=20260612T073900Z&HW-CC-Expire=86400&HW-CC-Sign=43D8F093B91FC3024A9F1EC625D7B633B470C0F107F4F60E1BE83AF04AF12056)，将3D视图自动调整到预设的正面或侧面视角。

![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/29/v3/MWZLMy_ITtmgme0TErkbZw/zh-cn_image_0000002625073829.png?HW-CC-KV=V1&HW-CC-Date=20260612T073900Z&HW-CC-Expire=86400&HW-CC-Sign=BA7090D9956D1ED39D507CB5FC0491771A4A5E573EA1D36C92AEC739D6645C7C)

#### \[h2\]返回2D视图

点击2D View按钮![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/74/v3/Sa6I7kYlQ96qCQ8Vqz7Rng/zh-cn_image_0000002594634252.png?HW-CC-KV=V1&HW-CC-Date=20260612T073900Z&HW-CC-Expire=86400&HW-CC-Sign=D0D6B145E75125B65BA0386D6131EAD39677234D47B8695FA68828773A2A102D)，可切换至2D视图。

![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/1d/v3/XEV85AiISu2_6sI6-3A-0g/zh-cn_image_0000002594634276.png?HW-CC-KV=V1&HW-CC-Date=20260612T073900Z&HW-CC-Expire=86400&HW-CC-Sign=F0334E38ADAAAC0244A398AB86250C61AE9D0C2C8FB9D6BE5D81D56D572CC49B)