Jetpack Compose：DropdownMenu内Tooltip及TextField位置偏移问题

问题场景 #

要实现右下角悬浮按钮交互：点击按钮弹出含info图标的菜单，点击图标时在其旁侧显示Tooltip，但实际Tooltip无法与图标对齐；后续在菜单中添加TextField后，聚焦时光标出现顶部偏移问题，最终通过替换DropdownMenu为PopupDialog解决。

问题根源 #

DropdownMenu内部有固定的布局偏移和测量逻辑，与TooltipBox的位置计算机制不兼容，导致Tooltip无法正确锚定到目标组件；而TextField在DropdownMenu的约束下，光标位置计算会受其内部布局规则干扰，引发偏移。

解决方案：用PopupDialog替代DropdownMenu #

Popup的布局逻辑更灵活，无DropdownMenu的内部约束，能让Tooltip和TextField正常工作。以下是修改后的完整代码：

class MainActivity : ComponentActivity() {
    @SuppressLint("UnusedMaterial3ScaffoldPaddingParameter")
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            Scaffold {
                Box(modifier = Modifier.fillMaxSize()) {
                    var isPopupVisible by remember { mutableStateOf(false) }
                    
                    // 右下角触发按钮
                    Button(
                        onClick = { isPopupVisible = !isPopupVisible },
                        modifier = Modifier.align(Alignment.BottomEnd)
                    ) {
                        Text("dropdown")
                    }

                    // 替换DropdownMenu为Popup
                    if (isPopupVisible) {
                        Popup(
                            alignment = Alignment.BottomEnd,
                            offset = IntOffset(-16, -16), // 调整偏移使弹窗贴近按钮
                            onDismissRequest = { isPopupVisible = false }
                        ) {
                            // 自定义弹窗容器，模拟DropdownMenu的样式
                            Surface(
                                shape = MaterialTheme.shapes.medium,
                                elevation = 8.dp,
                                modifier = Modifier.wrapContentSize()
                            ) {
                                Column(modifier = Modifier.padding(8.dp)) {
                                    TooltipImage()
                                    // 添加TextField，光标显示正常
                                    TextField(
                                        value = "",
                                        onValueChange = {},
                                        label = { Text("输入内容") },
                                        modifier = Modifier
                                            .padding(top = 8.dp)
                                            .widthIn(min = 200.dp)
                                    )
                                }
                            }
                        }
                    }
                }
            }
        }
    }
}

@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun TooltipImage() {
    val tooltipState = rememberTooltipState(isPersistent = true)
    val scope = rememberCoroutineScope()

    TooltipBox(
        positionProvider = TooltipDefaults.rememberRichTooltipPositionProvider(),
        tooltip = {
            RichTooltip { Text("tooltip content") }
        },
        state = tooltipState
    ) {
        Image(
            painter = painterResource(id = android.R.drawable.ic_menu_info_details),
            contentDescription = "信息图标",
            modifier = Modifier
                .size(24.dp)
                .clickable {
                    scope.launch { tooltipState.show() }
                }
        )
    }
}

方案说明 #

1. Popup布局优势：通过alignment和offset精确控制弹窗位置，无DropdownMenu的内部布局限制，TooltipBox能正确计算锚点，实现Tooltip与图标对齐。
2. TextField正常显示：Popup内的TextField不受DropdownMenu的特殊布局约束，光标位置计算恢复正常，解决偏移问题。
3. 样式模拟：用Surface组件模拟DropdownMenu的阴影和圆角样式，保持视觉一致性。

内容的提问来源于stack exchange，提问作者aj3423