【compose】拖拽改变控件宽度，适配Windows端

前言

最近在用kotlin多平台搓一些小工具，但这玩意的UI基于Jetpack Compose，很多都是安卓风格的组件，虽然能支持Windows平台，但用起来很难受，效率不高。于是想要什么效果只能自己搓。

实现效果

先看一眼效果

compose的实现思路比较绕，没有安卓传统XML来得直接，也没有Windows自带的控件那么省心很多功能都是自带的。所以这里稍微啰嗦一点讲讲思路。不想了解原理只想抄作业请直接跳到文末。

设计思路

compose是声明式UI，随着外部声明的改变来刷新内容。我们要改变宽度，所以要先定义一个描述宽度的量：

var directoryTreeWidth by remember { mutableStateOf(250.dp) }

使用remember修饰保持这个值持久化，加上mutableStateOf之后，每当这个数值变化，用到它的UI元素就会自动刷新。

然后我们需要一个函数来刷新这个变量的值，由于拖动发生在控件的内部，修改值也应该发生在控件内部，所以这个函数需要在控件里面定义，外部只需要一个回调来接收这个值。

于是这个控件就需要两个参数，宽度width和宽度回调onWidthChange(width:Int)

@Composable
fun DirectoryTree(
    items: List<DirectoryItem>,  //这个参数是我左侧这个目录树的内容，不用管
    width: Dp,
    onWidthChange: (Dp) -> Unit
) {

接下来我们需要监听拖拽这个事件，然后调用回调即可，使用Modifier的pointerInput可以轻松达成：

@Composable
fun DirectoryTree(
    items: List<DirectoryItem>,
    width: Dp,
    onWidthChange: (Dp) -> Unit
) {
    var dragOffset by remember { mutableStateOf(0f) } // 缓存拖动偏移量

    Box(
        Modifier
            .width(width)
            .fillMaxHeight()
            .background(Color.Gray)
            .pointerInput(Unit) {
                detectDragGestures { change, dragAmount ->
                    change.consume() //消费掉事件，避免和点击事件冲突
                    dragOffset += dragAmount.x //拖动距离，多次拖动要累加
                    val newWidth = (width + dragOffset.dp).coerceAtLeast(50.dp) //新的宽度，不能小于50
                    onWidthChange(newWidth) // 更新宽度
                }
            }
    ) {
        // 下面是界面里填的假数据，不用管
        Column(modifier = Modifier.padding(16.dp)) {
            items.forEach { item ->
                DirectoryTreeItem(item)
            }
        }

然后在外部调用它

@Composable
fun FileManagerUI() {
    var directoryTreeWidth by remember { mutableStateOf(250.dp) }  //这是可拖拽控件的宽度
    var previewWidth by remember { mutableStateOf(250.dp) }

    // 模拟的目录树数据
    val directoryTree = listOf(
        DirectoryItem("Documents", listOf(DirectoryItem("Text Files"), DirectoryItem("PDFs"))),
        DirectoryItem("Images", listOf(DirectoryItem("JPG"), DirectoryItem("PNG"))),
        DirectoryItem("Videos", listOf(DirectoryItem("Movies"), DirectoryItem("Clips"))),
    )

    Column(Modifier.fillMaxSize()) {
        // 顶部菜单栏
        TopMenuBar()

        Row(Modifier.fillMaxSize()) {
            // 左侧目录树
            DirectoryTree(
                items = directoryTree,
                width = directoryTreeWidth,
                onWidthChange = { newWidth -> directoryTreeWidth = newWidth }  //拿到回调的数据刷新宽度
            )

            // 中间文件列表
            FileList()

            // 右侧预览窗口
            PreviewWindow(
                width = previewWidth,
                onWidthChange = { newWidth -> previewWidth = newWidth }
            )
        }
    }
}

效果如图

但这个效果还是不符合Windows的使用习惯。Windows的习惯是在边缘放一个柄，鼠标放上去以后变成拉伸图标，然后长按才能拖拽改变宽度。所以接下来让我们加一个柄：

@Composable
fun DirectoryTree(
    items: List<DirectoryItem>,
    width: Dp,
    onWidthChange: (Dp) -> Unit
) {
    var dragOffset by remember { mutableStateOf(0f) } // 缓存拖动偏移量

    Box(
        Modifier
            .width(width)
            .fillMaxHeight()
            .background(Color.Gray)
    ) {
        Column(modifier = Modifier.padding(16.dp)) {
            items.forEach { item ->
                DirectoryTreeItem(item)
            }
        }

        // 右侧拖动柄，只有在这个区域可以拖动
        Box(
            modifier = Modifier
                .align(Alignment.CenterEnd) // 右对齐
                .width(4.dp) // 拖动柄的宽度
                .fillMaxHeight() // 高度占满父容器
                .pointerInput(Unit) {  //把拖动事件搬到柄上
                                detectDragGestures { change, dragAmount ->
                                    change.consume() //消费掉事件，避免和点击事件冲突
                                    dragOffset += dragAmount.x //拖动距离，多次拖动要累加
                                    val newWidth = (width + dragOffset.dp).coerceAtLeast(50.dp) //新的宽度，不能小于50
                                    onWidthChange(newWidth) // 更新宽度
                                }
                            }
                .pointerHoverIcon(PointerIcon(Cursor(Cursor.E_RESIZE_CURSOR))) // 设置鼠标样式为拉伸图标
                .background(Color.LightGray) // 给拖动柄加个背景色
        )
    }
}

大功告成！现在效果就是文章开头的样子了，一个符合Windows操作习惯的可拖动组件做好了。