前言
最近在用kotlin多平台搓一些小工具，但这玩意的UI基于Jetpack Compose，很多都是安卓风格的组件，虽然能支持Windows平台，但用起来很难受，效率不高。于是想要什么效果只能自己搓。
实现效果
先看一眼效果
拖拽宽度最终效果.gif
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 }
)
}
}
}
效果如图
拖拽整体效果.gif
但这个效果还是不符合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操作习惯的可拖动组件做好了。
网友评论