Android Compose中获取BasicTextField的光标位置（坐标）

要实现光标跟随的建议列表，核心是获取光标在屏幕上的实时坐标，再基于该坐标定位建议列表。以下是具体实现步骤：

1. 定义核心状态 #

需要管理文本输入状态、文本布局结果、TextField的全局位置以及光标屏幕坐标：

val textFieldState = remember { MutableTextFieldState() }
var textLayoutResult by remember { mutableStateOf<TextLayoutResult?>(null) }
var textFieldGlobalOffset by remember { mutableStateOf<Offset?>(null) }
var cursorScreenOffset by remember { mutableStateOf<Offset?>(null) }
val density = LocalDensity.current

2. 监听TextField布局与文本布局 #

通过onGloballyPositioned获取TextField在屏幕上的全局起始坐标，通过onTextLayout拿到文本布局结果，进而计算光标坐标：

BasicTextField(
    state = textFieldState,
    modifier = Modifier
        .fillMaxSize()
        .onGloballyPositioned { coordinates ->
            // 获取TextField左上角的全局屏幕坐标
            textFieldGlobalOffset = coordinates.localToGlobal(Offset.Zero)
        },
    onTextLayout = { layoutResult ->
        textLayoutResult = layoutResult
        val selection = textFieldState.selection
        // 仅处理光标未选中文本的情况
        if (selection.start == selection.end) {
            // 获取光标在TextField内部的矩形区域
            val cursorRect = layoutResult.getCursorRect(selection.end)
            textFieldGlobalOffset?.let { tfOffset ->
                // 计算光标在屏幕上的绝对坐标
                cursorScreenOffset = tfOffset + Offset(cursorRect.left, cursorRect.top)
            }
        }
    },
    // 自定义TextField的样式、占位符等配置
    textStyle = TextStyle(fontSize = 16.sp),
    decorationBox = { innerTextField ->
        Box(modifier = Modifier.padding(16.dp)) {
            innerTextField()
        }
    }
)

3. 定位并显示建议列表 #

用Box包裹TextField和建议列表，基于光标坐标绝对定位列表到光标正上方：

Box(modifier = Modifier.fillMaxSize()) {
    // 上面的BasicTextField代码放在这里

    cursorScreenOffset?.let { cursorPos ->
        // 计算建议列表的位置（在光标上方，预留间距）
        val listTopOffset = cursorPos.y - with(density) { 60.dp.toPx() }
        Column(
            modifier = Modifier
                .offset(
                    x = cursorPos.x.toDp(),
                    y = listTopOffset.toDp()
                )
                .background(Color.White)
                .shadow(elevation = 4.dp)
                .padding(8.dp)
                .width(150.dp)
        ) {
            // 示例建议项
            Text("建议内容1", modifier = Modifier.padding(4.dp))
            Text("建议内容2", modifier = Modifier.padding(4.dp))
            Text("建议内容3", modifier = Modifier.padding(4.dp))
        }
    }
}

关键注意事项 #

• 坐标转换：要区分TextField内部坐标与全局屏幕坐标，通过localToGlobal完成转换；同时注意dp与px的转换，避免位置偏移。
• 光标状态处理：仅在光标未选中文本（selection.start == selection.end）时计算坐标，避免选中文本时的异常位置。
• 滚动适配：当TextField内容滚动时，onGloballyPositioned会自动更新TextField的全局坐标，确保光标位置计算准确。
• 样式调整：可根据需求修改建议列表的背景、阴影、间距等样式，优化视觉效果。

内容的提问来源于stack exchange，提问作者Oussèma Hassine