如何修复jetpack撰写中包含Balloon(给出奇怪结果)的ConstraintLayout？

Question

我正试图在我的第一个应用程序中弹出一个帮助。弹出工作后出现的问题是，我使用的图标变成了一个按钮，占用了整个屏幕的高度。我正在使用jetpack中为气球弹出找到的唯一代码。在添加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.的修饰符中使用的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) }
)