Compose Multiplatform开发记录之文件选择器封装
刚刚写完一篇TextField输入框按键监听的文章，趁热打铁，记录一下我简单封装桌面端的的文件选择器组件。依然是来自于跨平台Android设备调试软件DebugManager里的功能。这里相关的是apk文件的选取安装，电脑文件的推送，日志文件的选取自动分析等。
文件选择
文件选择为java.awt包下的FileDialog组件，初始化显示完，直接通过实例化的 `FileDialog` 对象来获取最终的文件选择路径。有directory和file两部分。
val fileChooser = FileDialog(
Frame(),
"Select a file",
FileDialog.LOAD
).apply {
file = fileType
}
fileChooser.isVisible = true
// 判断是否未选文件
if (fileChooser.file != null) {
onPathSelect(fileChooser.directory + fileChooser.file)
}文件夹选择器
文件夹这里用的是swing包下的 `JFileChooser` ，用法几乎和上面的 `FileDialog` 一样。
// 选择文件夹
val fileChooser = JFileChooser()
fileChooser.fileSelectionMode = JFileChooser.DIRECTORIES_ONLY
// 显示对话框并等待用户选择
val result = fileChooser.showOpenDialog(null);
// 如果用户选择了文件夹
if (result == JFileChooser.APPROVE_OPTION) {
// 获取用户选择的文件夹
onPathSelect(fileChooser.selectedFile.absolutePath)
}这两种选取电脑文件的方法，之前都是在一个Text组件的 `clickable` 回调里面来配置的，把结果赋值给一个String泛型的State，再执行文件的推送或者apk的安装。
拖动选择文件
之前看另一位博主也提供了个拖拽的方法 `onExternalDrag` ，可惜已经严重过期了，弃用无法使用。
@Deprecated(
level = DeprecationLevel.ERROR,
message = "Use the new drag-and-drop API: Modifier.dragAndDropTarget"
)
@Suppress("DEPRECATION_ERROR")
@ExperimentalComposeUiApi
@Composable
fun Modifier.onExternalDrag(
enabled: Boolean = true,
onDragStart: (ExternalDragValue) -> Unit = {},
onDrag: (ExternalDragValue) -> Unit = {},
onDragExit: () -> Unit = {},
onDrop: (ExternalDragValue) -> Unit = {},
)根据这里的提示“Use the new drag-and-drop API: Modifier.dragAndDropTarget”
@ExperimentalFoundationApi
fun Modifier.dragAndDropTarget(
shouldStartDragAndDrop: (startEvent: DragAndDropEvent) -> Boolean,
target: DragAndDropTarget,
): Modifier {
return this then DropTargetElement(
target = target,
shouldStartDragAndDrop = shouldStartDragAndDrop,
)
}根据官方文档和方法签名，了解到这个方法的具体用法。
> 第一个参数为一个 DragAndDropEvent 类型的参数，并返回一个布尔值。
> 作用：这个函数允许可组合项（Composable）根据启动拖放会话的 DragAndDropEvent 来决定是否要参与该拖放会话。当一个拖放操作开始时，系统会调用这个函数，传入表示拖放开始事件的 DragAndDropEvent 对象。如果该函数返回 true，则表示当前可组合项愿意参与这个拖放会话；如果返回 false，则表示不参与。
> 作用：这个对象是拖放会话的目标，它将接收与拖放会话相关的事件。当拖放操作发生在当前可组合项上时，系统会将相关的拖放事件发送给这个 DragAndDropTarget 对象，以便进行相应的处理。
可以理解为一个enable开关，一个callback回调。我们的关注度应该放到calllback回调事件上，主要目的就是需要拖动过来的文件路径。
val callback = remember {
object : DragAndDropTarget {
override fun onDrop(event: DragAndDropEvent): Boolean {
val dragData = event.dragData()
if (dragData is DragData.FilesList) {
dragData.readFiles().firstOrNull()?.let { filePath ->
val file = File(URI.create(filePath))
LogUtils.printLog("选取文件：${file.absolutePath}")
if (fileType.isNotEmpty() && fileType.split('.').last() != file.extension) {
onErrorOccur("请选择正确的文件类型")
return false
}
onPathSelect(file.absolutePath)
}
}
return true
}
}
}在 `onDrop` 即鼠标拖动松手后，解析文件路径出来，判断是否是我们需要的。
三合一封装
为了统一设计，并且使用一个组件支持以上三种文件功能，对一个Text组件进行包装。
配置的几个参数如下代码所示，一个提示语字段，一个string类型的文件路径和其更改的lambda，一个变量用来判断是需要接受文件还是文件夹，一个为需要的文件类型。最后的onError代码块为拖动来的文件不符合要求时，供调用方弹出Toast所用。
/**
* @param tintText 提示文本
* @param path 路径
* @param onPathSelect 路径选择回调
* @param isChooseFile 是否选择文件，默认为 false
* @param fileType 文件类型
* @param onErrorOccur 错误消息回调
*/
@OptIn(ExperimentalFoundationApi::class, ExperimentalComposeUiApi::class)
@Composable
fun FileChooseWidget(
tintText: String,
path: String,
modifier: Modifier = Modifier,
isChooseFile: Boolean = false,
fileType: String = "",
onErrorOccur: (String) -> Unit = {},
onPathSelect: (String) -> Unit,
) {
val callback = remember {
object : DragAndDropTarget {
override fun onDrop(event: DragAndDropEvent): Boolean {
val dragData = event.dragData()
if (dragData is DragData.FilesList) {
dragData.readFiles().firstOrNull()?.let { filePath ->
val file = File(URI.create(filePath))
LogUtils.printLog("选取文件：${file.absolutePath}")
if (fileType.isNotEmpty() && fileType.split('.').last() != file.extension) {
onErrorOccur("请选择正确的文件类型")
return false
}
onPathSelect(file.absolutePath)
}
}
return true
}
}
}
CenterText(
text = path.ifEmpty { tintText },
style = defaultText,
modifier = modifier.border(2.dp, MaterialTheme.colorScheme.onSecondary, RoundedCornerShape(10.dp))
.clip(RoundedCornerShape(10.dp))
.background(MaterialTheme.colorScheme.secondary).clickable {
// 选择文件
if (isChooseFile) {
val fileChooser = FileDialog(
Frame(),
"Select a file",
FileDialog.LOAD
).apply {
file = fileType
}
fileChooser.isVisible = true
// 判断是否未选文件
if (fileChooser.file != null) {
onPathSelect(fileChooser.directory + fileChooser.file)
}
} else {
// 选择文件夹
val fileChooser = JFileChooser()
fileChooser.fileSelectionMode = JFileChooser.DIRECTORIES_ONLY
// 显示对话框并等待用户选择
val result = fileChooser.showOpenDialog(null);
// 如果用户选择了文件夹
if (result == JFileChooser.APPROVE_OPTION) {
// 获取用户选择的文件夹
onPathSelect(fileChooser.selectedFile.absolutePath)
}
}
}.dragAndDropTarget(
shouldStartDragAndDrop = { event -> true },
target = callback
).padding(10.dp)
)
}
```实现的效果如下所示
拖动文件
点击触发选择窗
