2. 布局树查看基础

2.1 现象识别：布局树查看异常的表现与影响

在调试 Compose UI 时，开发者最常遇到的视觉与操作障碍集中在布局树的查看环节。如果不能正确掌握布局树的基本操作，后续所有基于 Layout Inspector 的数据采集与根因分析都将失去入口。

2.2 数据采集：获取布局树查看回话

在排查布局树查看问题前，需先确保你已成功采集到一份包含布局树数据的回话。以下为标准采集流程，每一步都会影响后续是否能看到正确的树结构。

1. 在 Android Studio 中打开目标项目并运行到模拟器或真机。
2. 在模拟器/真机上操作到目标 Composable 屏幕（占位状态）。
3. 点击 View → Tool Windows → Layout Inspector 打开工具窗口。
4. 在 Layout Inspector 顶部选择已连接的设备和进程（若设备未列出，检查 USB 调试是否开启）。
5. 点击 “Layout Inspector” 图标（手机与波浪线图标）开始捕获快照。
6. 等待布局树加载完成，观察左侧 Component Tree 面板是否出现分层节点。

常见采集失败案例对比：

2.3 原因定位：布局树查看异常的根因分析

根据采集到的布局树数据，使用以下故障树方法快速定位根因。故障树的顶层是“布局树查看失败”，向下分解为三类典型根源。

2.4 修复动作：展开/折叠 + 选中组件 + 查看属性面板

一旦定位到根因，立即执行以下修复动作。注意每一步都对应前一步故障树中的具体根源。

2.4.1 展开与折叠节点的标准操作

• 鼠标单击节点左侧的 ▶ 或 ▼ 箭头，展开或折叠该子树。
• 双击节点文字可以展开该节点下的所有子节点（一次双击展开一层）。
• 若箭头不可见，先使用鼠标滚轮向下滚动 Component Tree 面板，确认窗口高度是否足以显示所有节点。
• 若仍无法展开，选中父节点后按键盘 → 键展开，← 键折叠。

2.4.2 选中组件与查看属性面板

选中组件的正确方式：在 Component Tree 中单击要查看的节点，节点变为蓝色高亮。此时右侧 Attributes 面板填充该组件的详细信息。

属性面板三要素确认清单：

2.4.3 理解布局层级的核心判断规则

布局层级是排查 UI 错位问题的关键。使用以下规则快速理解当前树结构：

规则1：树索引 = 渲染顺序
   - 左到右的兄弟节点 = 屏幕从上到下的叠加顺序
   - 兄弟节点之间的垂直偏移由 layoutDirection 和 padding 决定

规则2：父节点决定子节点的布局约束
   - Row 的子节点受到 maxWidth 限制
   - Column 的子节点受到 maxHeight 限制
   - Box 的子节点默认重叠（z-index 由子节点顺序决定）

规则3：Modifier 会生成额外的包裹节点
   - .padding() 在树中表现为 PaddingValues 装饰节点
   - .size() 在树中表现为 FixedSize 修饰节点
   - 这些节点也会出现在 Component Tree 中，不要与 UI 组件混淆

2.5 复测：布局树查看正确性验证

完成修复动作后，执行以下复测清单，确认布局树查看能力恢复到正常状态。每通过一项，在左侧方框中打勾。

2.6 预防：固化布局树查看的良好习惯

为彻底避免布局树查看问题反复出现，请在团队内推广以下预防措施：

• 捕获前检查三个状态：设备已连接、进程已选中、目标 Composable 已渲染在屏幕上。
• 捕获后立即做“三扩”：展开 Root 节点、展开 App 容器节点、展开目标 Row/Column 节点。
• 常用组件命名规范：在代码中为关键 Composable 设置 contentDescription 或 testTag，便于属性面板中快速搜索定位。
• 版本对齐检查表：