Jetpack Compose如何在Android Studio Arctic Fox中查看组件树？

你提到的Android View系统的UI层级树预览示例如下：

针对你给出的如下Compose代码的组件树查看需求：

@Composable
fun TodoScreen(....) {
    Column(){
        LazyColumn{
        ...}
        Row{
            Button(){....}
            Text(){...}
        }
    }
}

结论 #

Android Studio Arctic Fox已经内置了对应的Compose组件树查看功能，和View系统的布局检查器能力一致，不需要额外配置插件。

使用步骤 #

• 先确认项目配置：项目依赖的Compose版本不低于1.0.0-beta09，且App模块的build.gradle中debuggable配置为true（默认debug包开启）
• 运行App到安卓设备或模拟器，停留在你要查看的Compose页面
• 点击顶部菜单栏 View > Tool Windows > Layout Inspector 打开布局检查器
• 在布局检查器顶部的进程选择下拉框选中你当前运行的App进程，等待几秒加载完成后，左侧面板就会显示完整的Compose组件树
• 组件树会完全对齐你代码中的声明层级，上述示例代码对应的层级为TodoScreen → Column → LazyColumn / Row → Button / Text，点击任意节点还可以在右侧属性面板查看该Composable的修饰符、入参等属性信息

内容的提问来源于stack exchange，提问作者Tonnie