如何修復在 jetpack compose 中包含 Balloon（給出奇怪結果）的 ConstraintLayout？

Question

我正在嘗試在我的第一個應用程序中彈出幫助。 彈出工作后出現的問題是我正在使用的圖標變成了占據整個屏幕高度的按鈕。 我正在使用我在 jetpack compose 中為氣球彈出窗口找到的唯一代碼。 在我添加 BalloonAnchor 之前，布局很好。 這是代碼：

@Composable
fun GiveHelp(helpText: String) {
Surface{
    val context = LocalContext.current
    val lifecycleOwner = LocalLifecycleOwner.current

    ConstraintLayout {
        val (icon, text) = createRefs()
        Icon(
            modifier = Modifier
                .constrainAs(icon) {
                    top.linkTo(parent.top)
                    start.linkTo(parent.start)
                },
            painter = painterResource(id = R.drawable.ic_help),
            contentDescription = "help Icon"
        )
        Text(
            modifier = Modifier
                .constrainAs(text) {
                    top.linkTo(icon.top)
                    start.linkTo(icon.end)
                    bottom.linkTo(icon.bottom)
                }
                .padding(horizontal = 10.dp),
            text = "Is your task:"
        )
        BalloonAnchor(
            reference = icon,
            modifier = Modifier
                .aspectRatio(0.1f),
            balloon = BalloonUtils.getTitleBalloon(
                context = context,
                title = helpText,
                lifecycle = lifecycleOwner
            ),
            onAnchorClick = { balloon, anchor -> balloon.showAlignTop(anchor) }
        )
    }
}
} 

Answer 1

這里的問題是您在BalloonAnchor的 Modifier 中使用的aspectRatio 。 嘗試類似Modifier.aspectRatio(0.99f) 。 使用它，您的圖標將不會占據整個屏幕高度。
或者，您可以使用類似下面的代碼來獲得理想的外觀。

BalloonAnchor(
    reference = icon,
    modifier = Modifier
        .height(40.dp),
    balloon = BalloonUtils.getTitleBalloon(
        context = context,
        title = helpText,
        lifecycle = lifecycleOwner
    ),
    onAnchorClick = { balloon, anchor -> balloon.showAlignTop(anchor) }
)