在 Jetpack Compose 中的圖標上方添加文本

Question

有什么辦法可以像這張圖片那樣在 Jetpack Compose 中的特定圖標上方顯示一些描述嗎？

Answer 1

它被稱為語音或工具提示氣泡。 您可以使用 GenericShape 或添加 RoundedRect 創建此形狀或任何形狀。

Column(
    modifier = Modifier
        .fillMaxSize()
        .padding(10.dp)
) {

    var showToolTip by remember {
        mutableStateOf(false)
    }


    Spacer(modifier = Modifier.height(100.dp))

    val triangleShape = remember {
        GenericShape { size: Size, layoutDirection: LayoutDirection ->
            val width = size.width
            val height = size.height

            lineTo(width / 2, height)
            lineTo(width, 0f)
            lineTo(0f, 0f)
        }
    }

    Box {

        if (showToolTip) {
            Column(modifier = Modifier.offset(y = (-48).dp)) {


                Box(
                    modifier = Modifier
                        .clip(RoundedCornerShape(10.dp))
                        .shadow(2.dp)
                        .background(Color(0xff26A69A))
                        .padding(8.dp),
                ) {
                    Text("Hello World", color = Color.White)
                }


                Box(
                    modifier = Modifier
                        .offset(x = 15.dp)
                        .clip(triangleShape)
                        .width(20.dp)
                        .height(16.dp)
                        .background(Color(0xff26A69A))
                )
            }
        }

        IconButton(
            onClick = { showToolTip = true }
        ) {
            Icon(
                imageVector = Icons.Default.Add,
                contentDescription = "null",
                Modifier
                    .background(Color.Red, CircleShape)
                    .padding(4.dp)
            )
        }
    }
}

如果您需要必須是單一形狀的陰影或邊框，您需要使用GenericShape構建它。 您可以查看我的答案和我構建的庫。

下面的示例是庫的簡化版本，沒有 Modifier.layout，這對於設置為箭頭保留的空間和正確設置填充而不是創建另一個帶填充的 Box 是必不可少的

結果

fun getBubbleShape(
    density: Density,
    cornerRadius: Dp,
    arrowWidth: Dp,
    arrowHeight: Dp,
    arrowOffset: Dp
): GenericShape {

    val cornerRadiusPx: Float
    val arrowWidthPx: Float
    val arrowHeightPx: Float
    val arrowOffsetPx: Float

    with(density) {
        cornerRadiusPx = cornerRadius.toPx()
        arrowWidthPx = arrowWidth.toPx()
        arrowHeightPx = arrowHeight.toPx()
        arrowOffsetPx = arrowOffset.toPx()
    }

    return GenericShape { size: Size, layoutDirection: LayoutDirection ->

        val rectBottom = size.height - arrowHeightPx
        this.addRoundRect(
            RoundRect(
                rect = Rect(
                    offset = Offset.Zero,
                    size = Size(size.width, rectBottom)
                ),
                cornerRadius = CornerRadius(cornerRadiusPx, cornerRadiusPx)
            )
        )
        moveTo(arrowOffsetPx, rectBottom)
        lineTo(arrowOffsetPx + arrowWidthPx / 2, size.height)
        lineTo(arrowOffsetPx + arrowWidthPx, rectBottom)

    }
}

然后創建一個 Bubble Composable，我設置了 static 個值，但您可以將這些設置為參數

@Composable
private fun Bubble(
    modifier: Modifier = Modifier,
    text: String
) {
    val density = LocalDensity.current
    val arrowHeight = 16.dp

    val bubbleShape = remember {
        getBubbleShape(
            density = density,
            cornerRadius = 12.dp,
            arrowWidth = 20.dp,
            arrowHeight = arrowHeight,
            arrowOffset = 30.dp
        )
    }

    Box(
        modifier = modifier
            .clip(bubbleShape)
            .shadow(2.dp)
            .background(Color(0xff26A69A))
            .padding(bottom = arrowHeight),
        contentAlignment = Alignment.Center
    ) {
        Box(modifier = Modifier.padding(8.dp)) {
            Text(
                text = text,
                color = Color.White,
                fontSize = 20.sp
            )
        }
    }
}

您可以像在本示例中那樣使用它。 您需要更改 Bubble 的偏移量以匹配 ImageButton 的 position

Column(
    modifier = Modifier
        .fillMaxSize()
        .padding(10.dp)
) {

    var showToolTip by remember {
        mutableStateOf(false)
    }


    Spacer(modifier = Modifier.height(100.dp))

    Box {

        if (showToolTip) {
            Bubble(
                modifier = Modifier.offset(x = (-15).dp, (-52).dp),
                text = "Hello World"
            )
        }

        IconButton(
            onClick = { showToolTip = true }
        ) {
            Icon(
                imageVector = Icons.Default.Add,
                contentDescription = "null",
                Modifier
                    .background(Color.Red, CircleShape)
                    .padding(4.dp)
            )
        }
    }
}

Answer 2

你可以使用一個盒子。 Box 布局的子項將相互堆疊。

Box{ 
    Text(text = "Text Above Icon", modifier = text alignment)
    Icon(... , modifier = icon alignment) 
    
}

Answer 3

通過結合使用行和列可組合項，可以在 Jetpack Compose 中的圖標上方添加文本。 Row 可組合項將其子項布置在一行中，而 Column 可組合項將其子項布置在單個列中。 要在圖標上方添加文本，應首先使用 Row 可組合項，然后使用 Column 可組合項。 這將允許將文本放置在圖標的頂部。 例如，以下代碼將在圖標上方添加文本：

Row { 
    Text(text = "Text Above Icon") 
    Column { 
        Icon(... ) 
    } 
}