如何避免 BadgedBox 与 IconButton 结合使用时被剪裁

Question

IconButton(onClick = onClick) {
        BadgedBox(
            badge = {
                    Badge {
                        Text("2")
                    }
            },
        ) {
            Icon(
                imageVector = Icons.Outlined.Notifications,
            )
        }
    }

此代码导致：

Answer 1

Box {
    IconButton(onClick = onClick) {
        Icon(
            imageVector = Icons.Outlined.Notifications,
            contentDescription = "Notifications",
        )
    }
    Badge(
        modifier = Modifier
            .align(Alignment.TopEnd)
    ) {
        Text("2")
    }
}

• Box

  用作同时容纳

  IconButton

  和

  Badge

  的父容器。这允许您将

  Badge

  覆盖在

  IconButton

  上，而无需剪切。

• Modifier.align(Alignment.TopEnd)

  将

  Badge

  放置在

  Box

  的右上角，位于

  IconButton

  上方。

这样，徽章就完全可见并且不再被剪切。