使用Compose Multiplatform开发跨平台的Android调试工具

背景

最近对CMP跨平台很感兴趣，为了练手，在移动端做了一个Android和IOS共享UI和逻辑代码的天气软件，简单适配了一下双端的深浅主题切换，网络状态监测，刷新调用振动器接口。

做了两年多车机Android开发，偶尔玩下手机端跨平台也蛮有意思。

然后又了解到CMP不仅仅是移动端的，还可以做web和desktop端。

在我们日常的开发过程中，对于车机设备的adb调试操作很多，一大半全是固定的流程。使用bat脚本的话又不那么灵活，体验也不好。所以我很早就想要做一个带界面的Android设备调试工具。在移动端上写纯原生的Compose界面比较熟悉了，想着这个估计也差不多的，就开启了为期一个多月的Compose for Desktop开发。开发体验可以算中上，很多的问题在stackoverflow和官网上都能找到方案。软件命名为DebugManager。

架构设计

我没有开发Desktop端的经验，不知道最优的架构设计是什么样的。使用CMP的话Google推崇的MVI模式依然可以通用，所以最初制定的技术路线就是使用响应式的架构。

由于功能单一，几乎所有操作都是执行一些命令行，获取反馈结果，所以没有抽象的很厉害，数据层直接使用单例类，使用adb工具获取数据透传到StateHolder。StateHolder为界面的状态State管理层，在Composable方法初入时，触发StateHolder的数据获取逻辑，数据拿取到之后，更新State状态，通过界面监听的stateflow通知composable方法刷新UI。

事件从上到下，数据状态从下到上，确保唯一可信数据流。

gradle配置

这一步决定DebugManager项目面向的各个平台的配置，软件版本，安装包。

由于这个软件面向不同岗位，不同操作系统，目标是一套代码适配Windows，Linux，MacOS，达到多端通用。而且目前没有交叉编译，只能在各自的系统上打包，windows打exe，ubuntu上打deb，macos上打dmg，所以我现在给使用不同系统的同事发布软件时，都是三端各打一遍。

Windows端有配置是否显示在开始菜单，桌面快捷方式，uuid用于更新识别，自行选择安装目录。

menu = true
shortcut = true
// 可自行选择安装目录
dirChooser = true
// 可单独为当前用户安装，不需要管理员权限
perUserInstall = true
// 设置图标
iconFile.set(project.file("launcher/icon.ico"))
upgradeUuid = "xxxx-xxxxxxx-xxxxx"

1. 更详细的Gradle属性配置参考可以看官方github仓库的教程文档：

compose-multiplatform/tutorials/Native_distributions_and_local_execution/README.md at master · JetBrains/compose-multiplatform · GitHub

2. 关于三个平台应用图标的设置，是参考C上一位大佬的，制作三端的图标文件，大家可以自行搜索配置

目前还发现一个奇怪的bug，就是当我首次配置完，然后过一段时间想再换个应用图标的时候，打包后的安装包大小直接从80M到了2个G，不确定什么原因导致的。

Multiplatform适配

属性配置

Desktop跨平台的第一个难点就是不同平台的路径连接符不一致：

在Windows上是两个反斜杠  \\

在unix like的系统上是一个正斜杠  /

这一点Java给我们提供的 System.getProperty可以用来区分平台类型。

首先，定义一个枚举类来设定平台类型：

enum class PlatformType {UNKNOWN,WINDOWS,MAC,LINUX,
}

在应用初始化时，通过接口获取平台名称，解析出哪一个平台：

 /*** 获取当前平台类型*/private fun getPlatformType(): PlatformType {val osName = System.getProperty("os.name").lowercase(Locale.getDefault())return when {osName.contains("win") -> PlatformType.WINDOWSosName.contains("mac") -> PlatformType.MACosName.contains("nix") || osName.contains("nux") || osName.contains("aix") -> PlatformType.LINUXelse -> PlatformType.UNKNOWN}}

后面在涉及平台差分化的时候，可以使用此方法来获取，执行不同操作。

比如路径拼接时的符号：

    // 路径分隔符val dp =when (getPlatformType()) {PlatformType.WINDOWS, PlatformType.UNKNOWN -> "\\"PlatformType.MAC, PlatformType.LINUX -> "/"}

打开不同平台上的文件管理器：

    fun openFolder(path: String) {when (getPlatformType()) {PlatformType.WINDOWS, PlatformType.UNKNOWN -> {executeTerminalCommand("explorer.exe $path")}PlatformType.MAC -> {executeTerminalCommand("open $path")}PlatformType.LINUX -> {executeTerminalCommand("xdg-open $path")}}}

对于各个平台上执行终端命令，使用的两个方法是相同的，无需结果就直接exec()，需要执行结果就是用ProcessBuilder来执行，等待结果。

    /*** 执行终端命令*/fun executeTerminalCommand(command: String) {runCatching {Runtime.getRuntime().exec(command)}.onFailure { e ->LogUtils.printLog("执行出错：${e.message}", LogUtils.LogLevel.ERROR)}}/*** 执行命令，获取输出*/suspend fun executeCommandWithResult(command: String) = withContext(Dispatchers.IO) {val processBuilder = ProcessBuilder(*command.split(" ").toTypedArray())val process = processBuilder.start()val reader = BufferedReader(InputStreamReader(process.inputStream))val output = StringBuilder()var line: String?while (reader.readLine().also { line = it } != null) {output.append(line).append("\n")}// 等待进程结束process.waitFor()// 关闭输入流reader.close()output.toString()}

窗口框架

新项目的应用入口如下：

fun main() = application {Window(onCloseRequest = {},title = "DebugManager",undecorated = true,state = windowState,icon = painterResource("image/icon.png"),) {....}
}

我们主要的内容区就在Window这个Composable方法里。

通过windowState，我们可以设置窗口初始大小，窗口最大最小化。

undecorated参数，这个可以配置软件界面是否选择系统默认的标题栏。我希望在三端上都使用我自定义的标题栏，所以设置false。

有意思的一点是，上面这个参数如果设置true就是系统默认的标题栏，我们可以使用鼠标拖动标题栏来移动窗口。最开始设为false后，我发现自定义的标题栏无法使用鼠标拖动了，一度试了很多方案都不行，最后还是 GeminiAI 展示了一个Composable方法，居然直接套用即可，里面的区域就是支持拖动移动的。把标题栏的Composable方法放在这个WindowDraggableArea里面，就可以鼠标拖动标题栏来移动窗口了。

源码的方法声明如下：

@androidx.compose.runtime.Composable
@androidx.compose.runtime.ComposableInferredTarget
public fun androidx.compose.ui.window.WindowScope.WindowDraggableArea(modifier: androidx.compose.ui.Modifier = COMPILED_CODE,content: @androidx.compose.runtime.Composable () -> kotlin.Unit = COMPILED_CODE
): kotlin.Unit { /* compiled code */
}

由于各个页面之间的关联不大，无需导航传参，所以我没有用官方的navigation组件，直接在切换tab时切换对应区域的Composable函数。

功能划分

下面简单介绍下各个页面的调试功能，一般的开发流程里有产品设计，有交互设计，UI设计，给我传达需求，输出资源。

1. 功能设计上，这个软件自己心血来潮要做，只能自己设计了，中间结合日常工作中的调试痛点，还参考了adb的命令介绍，选取了一些组合功能和单次功能，分类添加到了界面内。

2. 在界面UI设计风格上，我是直接参考了每天打开的AndroidStudio里的主题插件，Atom One Dark的颜色风格。

设备信息展示

首页当然是所连接设备的基本信息展示。

定义UiState

data class DeviceState(val name: String? = null,val manufacturer: String? = null,val sdkVersion: String? = null,val systemVersion: String? = null,val buildType: String? = null,val innerName: String? = null,val resolution: String? = null,val density: String? = null,val cpuArch: String? = null,val serial:String? = null,val isConnected: Boolean = false
) {fun toUiState() =DeviceState(name = name,systemVersion = systemVersion,manufacturer = manufacturer,sdkVersion = sdkVersion,buildType = buildType,innerName = innerName,resolution = resolution,cpuArch = cpuArch,density = density,serial = serial,isConnected = isConnected)
}

定义好界面所需要展示的字段，再在StateHolder里维护一个StateFlow，同时对界面层暴露一个只读的字段，用于刷新界面数据。

 // 单个设备信息private val _deviceState = MutableStateFlow(DeviceState())val deviceStateStateFlow = _deviceState.asStateFlow()

进来界面后，在协程中获取数据，界面拿到update后的数据之后自动更新信息：

   CoroutineScope(Dispatchers.IO).launch {prepareEnv()val deviceName = ....._deviceState.update {it.copy(name = deviceName,manufacturer = manufacturer,sdkVersion = sdkVersion,systemVersion = systemVersion,buildType = buildType,density = displayDensity,innerName = innerName,resolution = displayResolution,cpuArch = architecture,serial = serialNum)}_deviceState.value = _deviceState.value.toUiState()// 初始化获取文件列表getFileList()}

右侧的一堆按钮，是一些高频使用的功能。

简单的像reboot，root等，还有使用am打开隐藏app的界面，使用perfetto抓取trace，自动拉取到电脑端。

其中执行qnx命令为车机特有，现在市面上车机Android大多是运行在QNX系统上的子系统，DebugManager还可以直接桥接到QNX系统，执行更底层更精准的命令，比如执行reset重启整个IVI系统，而不只是reboot重启Android子系统。

录屏，截屏很实用，不用掏出手机到处找角度。我们提前设置好时长，通过自动执行多条指令，等操作完毕，可以直接将截屏录屏文件导出到电脑进行分享，也是我认为最好用的功能之一。

最下面还有一些基础的音量加减，模拟输入法输入等。

轮询查询机制

值得一提的是，我加入了循环获取连接设备数量和当前连接状态的机制，当电脑端的adb服务一初始化成功，我就开启一个死循环的协程，里面每2s会查询两个状态。

 private fun recycleCheckConnection() {CoroutineScope(Dispatchers.IO).launch {while (true) {delay(2000L)runCatching {// 通过系统命令，检索连接设备的数量是否变化val deviceCount = ....if (deviceCount != _deviceMapState.value.deviceMap.size) {getDeviceMap()MainScope().launch {delay(800L)getCurrentDeviceInfo()}}// 检索当前设备连接状态val result = ....// 从断开到成功连接，主动刷新一次设备信息if (!isConnected) {getCurrentDeviceInfo()}isConnected = true_deviceState.update {it.copy(isConnected = true,)}_deviceState.value = _deviceState.value.toUiState()}.onFailure { error ->LogUtils.printLog("${error.message}", LogUtils.LogLevel.ERROR)isConnected = false_deviceState.update {it.copy(isConnected = false,)}_deviceState.value = _deviceState.value.toUiState()}}}}

1. 当增减设备时，刷新设备列表，左上角展开后可以选择不同的设备进行调试。

2. 当现在操作的设备断开连接时，会自动切换成其他设备，如果没有其他设备，就弹出警告弹窗，不允许继续操作页面了。

这两个都是轮询的。所以在重新连接设备后，会将当前状态通过state发送到界面，警告弹窗会自动消失。

软件安装管理

这个功能是耗时最长的板块之一，主要是Android系统里面每个包的信息如何展示，如何进一步对其进行替换，收集了很多指令。APP列表加入了全部包扫描和三方包扫描，对于公司定制的包，也添加到了单独的筛选规则，可以自由选择查看全量信息和精简信息。

最上面是安装功能，是使用adb install进行的操作，适合第三方app进行验证时，或者改bug进行非正式环境的验证时使用。下拉框展开后，可以选择覆盖安装，测试安装等，对应-r,-t等带参数的install操作。

界面展示了app的图标，版本号，包名，更新时间等。

应用图标怎么拿到的？

网上大多数的方案是说抠出apk，使用apktool解包，找到图标文件，再拿来显示。可行的确可行，但是这个速度要等到天荒地老了。

因为我之前做过一个Android端的简单的app管理应用，我选择的路线是，提前在AndroidStudio里开发一个服务app，里面设置一个Service，启动后扫描所有的已安装的app，将应用图标，应用label，包名都存到Android本地。再将这个apk内置到DebugManager安装目录的resources目录下，将其安装进系统，准备好资源后，通过adb pull拉出所需要的资源到电脑端，再读取png文件来显示到界面上。

单个app的操作

对于选中的单个app，提供了打开应用界面，卸载，提取apk，对于系统应用，还可以push替换apk等操作。我们的测试同事在做非全量的发版验证时非常有用，不用再使用一条条繁琐的命令来替换apk升级了。

文件管理器

由于我在Android端也没有写过文件管理器应用，所以在这个页面，有些操作也是一拍脑袋想出来的，可能不算规范的解法。仍然是MVI架构，界面去监听StateHolder里面的UiState的Flow，切换目录时重新获取列表数据，update到界面来刷新UI。

最开始的展示列表我是直接执行了"ls /"将列表发送到界面，显示根目录，解析出其中的文件文件夹，继续往子目录的话就把路径拼接起来，比如进入sdcard，就执行"ls /sdcard"，继续深入则再次拼接。同时最上方设置了返回上级，回到根目录和priv-app快捷按钮。

展示文件列表的就是@Composable LazyComuln方法。

有意思的是，我在加入item的双击和单击的区分时，最初想给Modifier定义一个扩展方法，直接实现双击回调。但是发现必须经过clickable方法来实现，这样会把外部的单机的clickable给挤掉。所以双击判断还是写在了同一个clickable里面，通过时间间隔判断的工具类来区分，单击则选中对应的文件/文件夹，双击则进入文件夹。

modifier = Modifier.clickable {// 点击则设置即将操作的pathMainStateHolder.setSelectedFilePath(it.path)androidSelectedFile = MainStateHolder.selectedFilePath// 双击，执行操作if (DoubleClickUtils.isFastDoubleClick()) {if (it.isDirectory)destinationCall(it.path)elseprintln("点击文件：${it.path}")}
}

android内的文件操作也是使用命令行的形式，cp mv rm等。

还可以将文件pull到电脑端，将电脑端的文件推送到Android端等。

命令模式

这一页比较简单，大家看到的输入框也是Compose原生的TextField方法，还自带动画，性价比蛮高。

主要实现就是将输入框的内容，拼接后直接通过Runtime.getRuntime().exec(command)执行即可。

除了最基础的adb命令透传，配合系统厂商Android端的可执行二进制程序，可以模拟车载信号的回调操作。还有语音部门的通过广播来调试的路径，整合到了DebugManager里面，一键发送广播，模拟可见扫描的点击。

关于页

最后就是关于页了，显示软件版本，缓存文件目录等。通过PlatformAdapter工具类获取路径，执行打开界面即可。

开源计划

这个软件最初是基于公司业务来设计开发的，有关于公司内部的信息需要抹除。

等后续有时间我会将其功能进行略微删减，改成通用性质的Android调试工具之后，会开源到Github。对CMP跨平台感兴趣的朋友，可以加关注稍作等待，后面一起进行技术交流。