使用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.WINDOWS
            osName.contains("mac") -> PlatformType.MAC
            osName.contains("nix") || osName.contains("nux") || osName.contains("aix") -> PlatformType.LINUX
            else -> 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 {
    // 点击则设置即将操作的path
    MainStateHolder.setSelectedFilePath(it.path)
    androidSelectedFile = MainStateHolder.selectedFilePath
    // 双击，执行操作
    if (DoubleClickUtils.isFastDoubleClick()) {
        if (it.isDirectory)
            destinationCall(it.path)
        else
            println("点击文件：${it.path}")
    }
}

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

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