tmui-cli 2.0.3 → 2.0.5

package/data/uni-app-x-docs/css/text-decoration-style.md

@@ -0,0 +1,23 @@
+## text-decoration-style
+
+
+<!-- CSSJSON.text-decoration-style.description -->
+
+<!-- CSSJSON.text-decoration-style.syntax -->
+
+<!-- CSSJSON.text-decoration-style.restrictions -->
+
+<!-- CSSJSON.text-decoration-style.values -->
+
+<!-- CSSJSON.text-decoration-style.defaultValue -->
+
+<!-- CSSJSON.text-decoration-style.unixTags -->
+
+<!-- CSSJSON.text-decoration-style.compatibility -->
+
+<!-- CSSJSON.text-decoration-style.example -->
+
+#### App平台差异
+text-decoration-style 样式不支持继承
+
+<!-- CSSJSON.text-decoration-style.reference -->

package/data/uni-app-x-docs/css/text-decoration-thickness.md

@@ -0,0 +1,23 @@
+## text-decoration-thickness
+
+
+<!-- CSSJSON.text-decoration-thickness.description -->
+
+<!-- CSSJSON.text-decoration-thickness.syntax -->
+
+<!-- CSSJSON.text-decoration-thickness.restrictions -->
+
+<!-- CSSJSON.text-decoration-thickness.values -->
+
+<!-- CSSJSON.text-decoration-thickness.defaultValue -->
+
+<!-- CSSJSON.text-decoration-thickness.unixTags -->
+
+<!-- CSSJSON.text-decoration-thickness.compatibility -->
+
+<!-- CSSJSON.text-decoration-thickness.example -->
+
+#### App平台差异
+text-decoration-thickness 样式不支持继承
+
+<!-- CSSJSON.text-decoration-thickness.reference -->

package/data/uni-app-x-docs/css/text-decoration.md

@@ -0,0 +1,24 @@
+## text-decoration
+
+
+<!-- CSSJSON.text-decoration.description -->
+
+<!-- CSSJSON.text-decoration.syntax -->
+
+<!-- CSSJSON.text-decoration.restrictions -->
+
+<!-- CSSJSON.text-decoration.values -->
+
+<!-- CSSJSON.text-decoration.defaultValue -->
+
+<!-- CSSJSON.text-decoration.unixTags -->
+
+<!-- CSSJSON.text-decoration.compatibility -->
+
+#### tips@suggestion
+- app平台暂不支持 text-decoration 简写样式，仅支持 [text-decoration-line](./text-decoration-line.md) 设置修饰线类型
+
+<!-- CSSJSON.text-decoration.example -->
+
+
+<!-- CSSJSON.text-decoration.reference -->

package/data/uni-app-x-docs/css/text-overflow.md

@@ -0,0 +1,24 @@
+## text-overflow
+
+
+<!-- CSSJSON.text-overflow.description -->
+
+<!-- CSSJSON.text-overflow.syntax -->
+
+<!-- CSSJSON.text-overflow.restrictions -->
+
+<!-- CSSJSON.text-overflow.values -->
+
+<!-- CSSJSON.text-overflow.defaultValue -->
+
+<!-- CSSJSON.text-overflow.unixTags -->
+
+<!-- CSSJSON.text-overflow.compatibility -->
+
+<!-- CSSJSON.text-overflow.example -->
+
+#### App平台差异
+- text-overflow 样式不支持继承
+- app 平台无法截断单个字符，即不会出现某个字符只显示一部分的情况
+
+<!-- CSSJSON.text-overflow.reference -->

package/data/uni-app-x-docs/css/text-shadow.md

@@ -0,0 +1,22 @@
+## text-shadow
+
+
+<!-- CSSJSON.text-shadow.description -->
+
+<!-- CSSJSON.text-shadow.compatibility -->
+
+<!-- CSSJSON.text-shadow.syntax -->
+
+<!-- CSSJSON.text-shadow.restrictions -->
+
+<!-- CSSJSON.text-shadow.values -->
+
+<!-- CSSJSON.text-shadow.defaultValue -->
+
+阴影颜色默认值为文本颜色，模糊半径默认值为0。
+
+<!-- CSSJSON.text-shadow.unixTags -->
+
+<!-- CSSJSON.text-shadow.example -->
+
+<!-- CSSJSON.text-shadow.reference -->

package/data/uni-app-x-docs/css/top.md

@@ -0,0 +1,20 @@
+## top
+
+
+<!-- CSSJSON.top.description -->
+
+<!-- CSSJSON.top.syntax -->
+
+<!-- CSSJSON.top.restrictions -->
+
+<!-- CSSJSON.top.values -->
+
+<!-- CSSJSON.top.defaultValue -->
+
+<!-- CSSJSON.top.unixTags -->
+
+<!-- CSSJSON.top.compatibility -->
+
+<!-- CSSJSON.top.example -->
+
+<!-- CSSJSON.top.reference -->

package/data/uni-app-x-docs/css/transform-origin.md

@@ -0,0 +1,20 @@
+## transform-origin
+
+
+<!-- CSSJSON.transform-origin.description -->
+
+<!-- CSSJSON.transform-origin.syntax -->
+
+<!-- CSSJSON.transform-origin.restrictions -->
+
+<!-- CSSJSON.transform-origin.values -->
+
+<!-- CSSJSON.transform-origin.defaultValue -->
+
+<!-- CSSJSON.transform-origin.unixTags -->
+
+<!-- CSSJSON.transform-origin.compatibility -->
+
+<!-- CSSJSON.transform-origin.example -->
+
+<!-- CSSJSON.transform-origin.reference -->

package/data/uni-app-x-docs/css/transform.md

@@ -0,0 +1,32 @@
+## transform
+
+
+<!-- CSSJSON.transform.description -->
+
+<!-- CSSJSON.transform.syntax -->
+
+<!-- CSSJSON.transform.restrictions -->
+
+<!-- CSSJSON.transform.values -->
+
+<!-- CSSJSON.transform.defaultValue -->
+
+<!-- CSSJSON.transform.unixTags -->
+
+
+web中经常使用scaleY缩放一个1px的线条变成0.5px的细线。这个方案在app也适用。示例如下：
+```html
+<view style="width: 750rpx; height: 1px; background-color: #000; transform: scaleY(0.5)"></view>
+```
+
+**注意事项**：
+
+- iOS 平台设置了`rotateX(<angle>)`、`rotateY(<angle>)`、`rotateZ(<angle>)`的组件视图是在三维空间中的旋转具有穿透效果，会被同一层级中其他组件视图遮盖住穿透的部分，如果不想被遮盖同层级中请不要存在其他组件。
+- Android平台使用`scale()`、`scaleX()`、`scaleY()`时，使用`getBoundingClientRect`获取的宽高不会改变，后续会兼容处理。
+
+
+<!-- CSSJSON.transform.compatibility -->
+
+<!-- CSSJSON.transform.example -->
+
+<!-- CSSJSON.transform.reference -->

package/data/uni-app-x-docs/css/transition-delay.md

@@ -0,0 +1,27 @@
+## transition-delay
+
+
+<!-- CSSJSON.transition-delay.description -->
+
+<!-- CSSJSON.transition-delay.syntax -->
+
+<!-- CSSJSON.transition-delay.restrictions -->
+
+<!-- CSSJSON.transition-delay.values -->
+
+#### App平台
+- 不支持指定多个时长
+- HBuilderX4.0以下版本，属性值可以不设置单位，不设置单位时当做 ms（毫秒） 处理。从 HBuilderX4.0 起，统一为web的策略，必须设置单位，无单位当做非法值。也就是会造成动画不生效。
+
+#### Web规范
+属性值必须设置单位，无单位时当做非法值处理
+
+<!-- CSSJSON.transition-delay.defaultValue -->
+
+<!-- CSSJSON.transition-delay.unixTags -->
+
+<!-- CSSJSON.transition-delay.compatibility -->
+
+<!-- CSSJSON.transition-delay.example -->
+
+<!-- CSSJSON.transition-delay.reference -->

package/data/uni-app-x-docs/css/transition-duration.md

@@ -0,0 +1,27 @@
+## transition-duration
+
+
+<!-- CSSJSON.transition-duration.description -->
+
+<!-- CSSJSON.transition-duration.syntax -->
+
+<!-- CSSJSON.transition-duration.restrictions -->
+
+<!-- CSSJSON.transition-duration.values -->
+
+<!-- CSSJSON.transition-duration.defaultValue -->
+
+<!-- CSSJSON.transition-duration.unixTags -->
+
+<!-- CSSJSON.transition-duration.compatibility -->
+
+<!-- CSSJSON.transition-duration.example -->
+
+#### App平台
+- 不支持指定多个时长
+- HBuilderX4.0以下版本，属性值可以不设置单位，不设置单位时当做 ms（毫秒） 处理。从 HBuilderX4.0 起，统一为web的策略，必须设置单位，无单位当做非法值。也就是会造成动画不生效。
+
+#### Web规范
+属性值必须设置单位，无单位时当做非法值处理
+
+<!-- CSSJSON.transition-duration.reference -->

package/data/uni-app-x-docs/css/transition-property.md

@@ -0,0 +1,23 @@
+## transition-property
+
+
+<!-- CSSJSON.transition-property.description -->
+
+<!-- CSSJSON.transition-property.syntax -->
+
+<!-- CSSJSON.transition-property.restrictions -->
+
+<!-- CSSJSON.transition-property.values -->
+
+#### App平台
+从 HBuilderX4.11 版起，默认值调整为`all`。HBuilderX4.11 以下版本，默认值为`none`。
+
+<!-- CSSJSON.transition-property.defaultValue -->
+
+<!-- CSSJSON.transition-property.unixTags -->
+
+<!-- CSSJSON.transition-property.compatibility -->
+
+<!-- CSSJSON.transition-property.example -->
+
+<!-- CSSJSON.transition-property.reference -->

package/data/uni-app-x-docs/css/transition-timing-function.md

@@ -0,0 +1,23 @@
+## transition-timing-function
+
+
+<!-- CSSJSON.transition-timing-function.description -->
+
+<!-- CSSJSON.transition-timing-function.syntax -->
+
+<!-- CSSJSON.transition-timing-function.restrictions -->
+
+<!-- CSSJSON.transition-timing-function.values -->
+
+#### App平台
+App平台不支持指定多个过渡效果。
+
+<!-- CSSJSON.transition-timing-function.defaultValue -->
+
+<!-- CSSJSON.transition-timing-function.unixTags -->
+
+<!-- CSSJSON.transition-timing-function.compatibility -->
+
+<!-- CSSJSON.transition-timing-function.example -->
+
+<!-- CSSJSON.transition-timing-function.reference -->

package/data/uni-app-x-docs/css/transition.md

@@ -0,0 +1,43 @@
+## transition
+
+
+<!-- CSSJSON.transition.description -->
+
+<!-- CSSJSON.transition.syntax -->
+
+<!-- CSSJSON.transition.restrictions -->
+
+<!-- CSSJSON.transition.values -->
+
+#### App平台
+从 HBuilderX4.11 版起，默认值调整为`all`。HBuilderX4.11 以下版本，默认值为`none`。
+
+transition暂不支持结束属性值为百分比。
+
+<!-- CSSJSON.transition.defaultValue -->
+
+<!-- CSSJSON.transition.unixTags -->
+
+<!-- CSSJSON.transition.compatibility -->
+
+<!-- CSSJSON.transition.example -->
+
+<!-- CSSJSON.transition.reference -->
+
+### Bug & Tips@tips
+
+- App-Harmony 平台， 更新属性值时是否有动画效果，取决于 `transition-property` 中是否包含该属性。\
+例如要对 `width` 做动画效果，初始宽度不需要动画效果，则应该在设置 `transition-property: width` 前设置初始宽度。\
+后续修改 `width` 需要有动画效果时，需要在修改前设置 `transition-property: width`。
+```css
+.box {
+	/* 初始宽度不需要动画效果, 需要设置在 transition-property: width 之前 */
+	width: 100px;
+	transition-property: width;
+	transition-duration: 1s;
+}
+/* 因为之前设置了 transition-property: width，此时修改 width 会有动画效果 */
+.box.active {
+	width: 200px;
+}
+```

package/data/uni-app-x-docs/css/visibility.md

@@ -0,0 +1,26 @@
+## visibility
+
+
+<!-- CSSJSON.visibility.description -->
+
+<!-- CSSJSON.visibility.syntax -->
+
+<!-- CSSJSON.visibility.restrictions -->
+
+<!-- CSSJSON.visibility.values -->
+
+**注意**
+设置 visibility 为 hidden，或设置 display 为 none 都可以隐藏元素。差异是通过 visibility 隐藏元素仍然占据页面位置，通过 display 隐藏元素不占据页面位置。
+
+<!-- CSSJSON.visibility.defaultValue -->
+
+<!-- CSSJSON.visibility.unixTags -->
+
+<!-- CSSJSON.visibility.compatibility -->
+
+<!-- CSSJSON.visibility.example -->
+
+#### App平台差异
+App平台设置如果元素的 visibility 设置为 hidden，其子元素将不可见，即使子元素的 visibility 设置为 visible 也不可见。
+
+<!-- CSSJSON.visibility.reference -->

package/data/uni-app-x-docs/css/white-space.md

@@ -0,0 +1,49 @@
+## white-space
+
+
+<!-- CSSJSON.white-space.description -->
+
+<!-- CSSJSON.white-space.syntax -->
+
+<!-- CSSJSON.white-space.restrictions -->
+
+<!-- CSSJSON.white-space.values -->
+
+<!-- CSSJSON.white-space.defaultValue -->
+
+<!-- CSSJSON.white-space.unixTags -->
+
+<!-- CSSJSON.white-space.compatibility -->
+
+### 注意@tips
+#### 空白字符处理不止由white-space属性决定
+对于写在模板中的text组件中的空白字符，在编译阶段，会由编译器先行处理。另外text组件的space属性也会干扰空白字符处理。规则[详见](../component/text.md#空白字符)。
+
+uni-app x中有text组件，这是一个web没有的组件。且uni-app x在非web平台，包括小程序平台，都不支持<br>换行，所以uni-app x设计为text组件中的`\n`默认不会忽略，而是换行。
+不管app平台默认值keep，还是web平台默认值pre-line，都是这个表现。
+
+#### HBuilderX5.0版本调整  
+app平台、web平台调整了 white-space 属性的实现。之前接近小程序的表现，之后按 W3C 标准规范执行。同时为了text组件性能考虑， app 平台新增支持 `keep` 属性值，且默认为 `keep`。
+
+**默认值调整**
+- app-android、app-ios平台新增支持取值 `keep`，默认值由 `normal` 调整为 `keep`  
+- app-harmony平台蒸汽模式（Vapor）支持取值 `keep`，默认值为 `keep`  
+- web平台，默认值由 `normal` 调整为 `pre-line`
+
+**调整前实现规范**  
+- normal（与调整后的pre-line效果一致）  
+  换行符（\\n）保留并换行显示，连续的多个空白字符会合并为一个空格，文本遇到边界会自动换行，行末空白字符移除。  
+- nowrap  
+  换行符（\\n）保留并换行显示，连续的多个空白字符会合并为一个空格，文本遇到边界不会自动换行，行末空白字符移除。  
+- pre  
+  换行符（\\n）保留并换行显示，连续的多个空白字符保留，文本遇到边界不会自动换行，行末空白字符保留。  
+- pre-wrap  
+  换行符（\\n）保留并换行显示，连续的多个空白字符保留，文本遇到边界会自动换行，行末空白字符保留。  
+- pre-line  
+  换行符（\\n）保留并换行显示，连续的多个空白字符会合并为一个空格，文本遇到边界会自动换行，行末空白字符移除。  
+- break-spaces  
+  换行符（\\n）保留并换行显示，连续的多个空白字符保留，文本遇到边界会自动换行，行末空白字符保留。  
+
+<!-- CSSJSON.white-space.example -->
+
+<!-- CSSJSON.white-space.reference -->

package/data/uni-app-x-docs/css/width.md

@@ -0,0 +1,23 @@
+## width
+
+
+<!-- CSSJSON.width.description -->
+
+<!-- CSSJSON.width.syntax -->
+
+<!-- CSSJSON.width.restrictions -->
+
+<!-- CSSJSON.width.values -->
+
+**注意**
+> 属性值为长度 `<length>` 时，App平台可以不设置单位，Web端必须设置单位，详情参考[长度单位](./README.md#length)。
+
+<!-- CSSJSON.width.defaultValue -->
+
+<!-- CSSJSON.width.unixTags -->
+
+<!-- CSSJSON.width.compatibility -->
+
+<!-- CSSJSON.width.example -->
+
+<!-- CSSJSON.width.reference -->

package/data/uni-app-x-docs/css/z-index.md

@@ -0,0 +1,127 @@
+## z-index
+
+z-index 属性设置元素在渲染时的z轴顺序。在同一个层叠上下文下z-index较大的元素会覆盖在z-index较小的元素上面。
+
+z-index并非一直有效果，如果加上z-index后元素仍未创建层叠上下文，则z-index属性无效。例如对于一个样式为`position: static;`（无其他会创建层叠上下文的样式）的元素设置z-index并不会改变其层级。
+
+z-index文档参考：[MDN z-index](https://developer.mozilla.org/zh-CN/docs/Web/CSS/z-index)
+
+层叠上下文文档参考：[层叠上下文](https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_positioned_layout/Understanding_z-index/Stacking_context)
+
+以如下树形dom结构为例
+
+```text
+root
+|-- view#1
+    |-- view#1-1
+    |-- view#1-2
+|-- view#2
+    |-- view#2-1
+    |-- view#2-2
+```
+
+如果`view#1`元素创建了层叠上下文，则其子元素`view#1-1`、`view#1-2`就会不在渲染时和`view#2`及其子元素进行层级比较。此时`view#1-1`与`view#2`及`view#2`子元素的层级高低取决于`view#1`和`view#2`的层级高低。
+
+如果`view#1`、`view#2`均未创建层叠上下文，则这两个元素及其子元素（`view#1-1`等）会在渲染时进行层级比较。此时如果设置`view#1-1`的样式为`position: relative; z-index: 100;`，则子元素在z轴的顺序为`view#1-2 --> view#2-1 --> view#2-2 --> view#1-1`。
+
+<!-- CSSJSON.z-index.description -->
+
+<!-- CSSJSON.z-index.syntax -->
+
+<!-- CSSJSON.z-index.restrictions -->
+
+<!-- CSSJSON.z-index.values -->
+
+<!-- CSSJSON.z-index.defaultValue -->
+
+<!-- CSSJSON.z-index.unixTags -->
+
+<!-- CSSJSON.z-index.compatibility -->
+
+<!-- CSSJSON.z-index.example -->
+
+### 平台差异
+
+1. app端z-index默认值为0，web端默认值为auto。position的默认值都是relative。
+
+> HBuilderX 4.11版本web版将内置组件的默认z-index设为了0，于4.12版本撤回此修改。因此在4.11版本web端和app端无此项差异。
+
+在app端每个元素都会创建层叠上下文，子元素不可跨父元素进行层级比较。
+
+web端在**没有其他会产生层叠上下文的属性干扰时**不会创建层叠上下文，其子元素可在最近的一个拥有层叠上下文的祖先元素内跨父元素比较层级。
+
+如下示例在app端四个方块自上而下颜色分别是`green -> blue -> aqua -> red`，web端颜色自上而下分别是`aqua -> green -> blue -> red`
+
+```vue
+<template>
+  <view style="z-index: 0;flex: 1;">
+    <view>
+      <view id="view-1-1" class="square" style="z-index: 4;background-color: aqua;"></view>
+      <view id="view-1-2" class="square" style="z-index: 1;background-color: red;margin-top: -90px;margin-left: 10px;"></view>
+    </view>
+    <view style="position: absolute; top: 20px;">
+      <view id="view-2-1" class="square" style="z-index: 3;background-color: green;margin-left: 20px;"></view>
+      <view id="view-2-2" class="square" style="z-index: 2;background-color: blue;margin-top: -90px;margin-left: 30px;"></view>
+    </view>
+  </view>
+</template>
+<style>
+  .square {
+    width: 100px;
+    height: 100px;
+  }
+</style>
+```
+
+2. app端`position: fixed;`定位的元素会移至根节点下渲染，web端`position: fixed;`无特殊处理。
+
+app端对`position: fixed;`的元素设置z-index，此元素可以与根节点（template 的一级子节点）进行层级比较。
+
+web端对`position: fixed;`的元素设置z-index，此元素仍会在所属的层叠上下文下和其他元素比较层级。
+
+在上面示例的基础上我们将`view-1-2`设为`position: fixed;`，如下示例在app端四个方块自上而下颜色分别是`red -> green -> blue -> aqua`，web端颜色自上而下分别是`aqua -> green -> blue -> red`
+
+```vue
+<template>
+  <view style="z-index: 0;flex: 1;">
+    <view>
+      <view id="view-1-1" class="square" style="z-index: 4;background-color: aqua;"></view>
+      <view id="view-1-2" class="square view-1-2" style="z-index: 1;background-color: red;"></view>
+    </view>
+    <view style="position: absolute; top: 20px;">
+      <view id="view-2-1" class="square" style="z-index: 3;background-color: green;margin-left: 20px;"></view>
+      <view id="view-2-2" class="square" style="z-index: 2;background-color: blue;margin-top: -90px;margin-left: 30px;"></view>
+    </view>
+  </view>
+</template>
+<style>
+  .square {
+    width: 100px;
+    height: 100px;
+  }
+
+  .view-1-2 {
+    position: fixed;
+    left: 10px;
+    /* #ifdef APP */
+    top: 10px;
+    /* #endif */
+    /* #ifdef WEB */
+    top: calc(var(--window-top) + 10px);
+    /* #endif */
+  }
+</style>
+```
+
+### 全局弹窗
+
+了解了z-index特性及平台差异后，可以看出如果直接对层级比较深的元素设置一个较大的z-index并不一定能将此元素覆盖在所有元素之上。如需使用fixed实现弹窗覆盖其他元素，建议将弹窗放在页面末尾。
+
+<!-- 建议使用[teleport组件](https://cn.vuejs.org/guide/built-ins/teleport.html)实现全局弹窗，teleport组件会将元素实际位置移动到指定的节点下。 -->
+
+### Bug & Tips@tips
+- App平台仅对同级的兄弟元素之间支持 z-index 来调节，同级元素中 z-index 较大的元素会覆盖较小的元素在上层进行显示，没有设置 z-index 值时，同级元素中写在后面的元素覆盖写在前面的元素。
+- App平台元素设置position为fixed时，会将元素调整到根节点，此时z-index会在根节点中比较确定覆盖关系。
+- App 平台 list-view 的子组件 list-item 有复用优化机制，list-item 组件不支持 z-index 属性。
+
+<!-- CSSJSON.z-index.reference -->

package/data/uni-app-x-docs/debug/android-inspector.md

@@ -0,0 +1,55 @@
+## Android审查界面元素
+
+HBuilderX暂时不支持 uni-app x 项目 uvue 页面的元素审查。相关需求可以利用 Android Studio 自带的 Layout Inspector 工具查看元素布局。
+
+![LayoutInspector效果](https://native-res.dcloud.net.cn/images/uni-app-x/android/inspector/inspector-sample.jpg)
+
+**准备环境**  
+- 安装 Android Studio，可到[Google Android官网下载](https://developer.android.google.cn/studio?hl=zh-cn)，更多安装细节可参考[Android官方文档](https://developer.android.google.cn/studio/install?hl=zh-cn)  
+- 开发电脑连接Android设备（推荐使用Google官方模拟器），设备需[启用开发者选项](https://developer.android.google.cn/studio/debug/dev-options?hl=zh-cn#enable)  
+
+### 运行uni-app x项目  
+
+启动HBuilderX，创建 uni-app x 项目（已创建项目忽略此步骤）。  
+
+打开项目的manifest.json文件，选择 "运行" -> "运行到手机或模拟器" -> "运行到Android App基座"：  
+![运行到Android](https://native-res.dcloud.net.cn/images/uni-app-x/android/inspector/hx-run.jpg)  
+
+在运行项目界面选择要使用的设备，点击"运行"：  
+![选择Android设备运行](https://native-res.dcloud.net.cn/images/uni-app-x/android/inspector/hx-device.jpg)  
+
+确保应用编译成功，在手机上操作安装真机运行基座App，安装成功后HBuilderX会自动启动App。
+
+
+### Layout Inspector 审查元素
+
+启动 Android Studio，首次运行需要[创建Android原生项目](https://developer.android.google.cn/studio/projects/create-project?hl=zh-cn)。  
+打开项目，选择 "Tools" -> "Layout Inspector"，启动 Layout Inspector：  
+![启动LayoutInspector](https://native-res.dcloud.net.cn/images/uni-app-x/android/inspector/inspector-start.jpg)
+
+在 Layout Inspector 界面选择要操作的设备：  
+![LayoutInspector选择设备](https://native-res.dcloud.net.cn/images/uni-app-x/android/inspector/inspector-device.jpg)
+
+连接正常将会在 Layout Inspector 界面中显示手机端应用的截屏。  
+> 注意：需要确保uni-app x项目在设备前台运行  
+
+左侧 Component Tree 中展开所有子节点，查找到 DecorView -> LinearLayout -> content -> PageFrameView -> RenderContainer，下面就是 uvue 页面 template 中元素对应的原生View：  
+![LayoutInspector查看元素](https://native-res.dcloud.net.cn/images/uni-app-x/android/inspector/inspector-detail.png)
+
+> view 组件对应原生 UniView  
+> image 组件对应原生 UniImageView  
+> text 组件对应原生 UniTextView  
+
+在左侧 Component Tree 中选择要查看的view，对应右侧 Attributes 中显示其排版计算后的原生属性，如width是原生view的宽度，height是原生view的高度。  
+
+可切换到3D模式，查看原生组件的层级关系：  
+![LayoutInspector切换2D/3D模式](https://native-res.dcloud.net.cn/images/uni-app-x/android/inspector/inspector-switchmode.png)
+
+### 注意事项  
+- uni-app x项目需使用标准基座或自定义基座运行，发布为正式包后无法使用 Layout Inspector  
+- 如果启动 Layout Inspector 报错，请更新 Android Studio 到最新版本再重试  
+- 在部分设备连接 Layout Inspector 后应用可能会导致 App 退出，这时需换其它设备，建议使用Google官方提供的模拟器  
+
+### 参考  
+- [Android Studio 使用布局检查器和布局验证工具调试布局](https://developer.android.google.cn/studio/debug/layout-inspector?hl=zh-cn)  
+- [Android检查GPU渲染速度和过渡绘制](https://developer.android.google.cn/topic/performance/rendering/inspect-gpu-rendering?hl=zh-cn)