android - 使用 Jetpack Compose 在边框中显示文本

Question

我想在边框中添加如下文本。包含文本的边框中有一个图标

有人可以建议如何解决这个问题吗？

Answer 1

您可以OutlinedText与标签一起使用

OutlinedTextField(
    value = textFieldValue,
    label = { Text("AAA") },
    onValueChange = { newValue ->
        textFieldValue= newValue
    }
)

Answer 2

您可以将 anOutlinedTextField与label参数一起使用，您可以在其中添加 anIcon而不是 a Text：

OutlinedTextField(
    value = text,
    onValueChange = {
        text = it
    },
    modifier = Modifier.width(100.dp),
    shape =  RoundedCornerShape(0.dp),
    label = {
        Icon(Icons.Filled.Add,"",tint = Color.Blue,
        modifier = Modifier.size(14.dp))
    }
)

您还可以将OutlinedTextFieldusing as 标签与参数Text组合使用。通过这种方式，您可以定义一个标签映射，用一个（或另一个 Composable） 替换某些范围的文本。inlineContent
Icon

就像是：

val myId = "inlineContent"
val textLabel = buildAnnotatedString {
    // Append a placeholder string "[icon]" and attach an annotation "inlineContent" on it.
    appendInlineContent(myId, "[icon]")
}

val inlineContent = mapOf(
    Pair(
        // This tells the [CoreText] to replace the placeholder string "[icon]" by
        // the composable given in the [InlineTextContent] object.
        myId,
        InlineTextContent(
            // Placeholder tells text layout the expected size and vertical alignment of
            // children composable.
            Placeholder(
                width = 12.sp,
                height = 12.sp,
                placeholderVerticalAlign = PlaceholderVerticalAlign.AboveBaseline
            )
        ) {
            // This Icon will fill maximum size, which is specified by the [Placeholder]
            // above. Notice the width and height in [Placeholder] are specified in TextUnit,
            // and are converted into pixel by text layout.

            Icon(Icons.Filled.Face,"",tint = Color.Red)
        }
    )
)


OutlinedTextField(
    value = text,
    onValueChange = {
        text = it
    },
    modifier = Modifier.width(100.dp),
    shape =  RoundedCornerShape(0.dp),
    label = {
        Text(text = textLabel, inlineContent = inlineContent)
    }
)

Answer 3

解决了。

这是一个粗略的工作代码

                Column(modifier = Modifier
                        .padding(16.dp)
                        .fillMaxWidth()
                        .drawWithContent {
                            drawContent()
                            clipRect { // Not needed if you do not care about painting half stroke outside
                                val strokeWidth = Stroke.DefaultMiter
                                val y = size.height // - strokeWidth
                                // if the whole line should be inside component

                                Log.i(Tag.Temp, "ClipRect ${size.width} ${size.height}")

                                drawLine(
                                    brush = SolidColor(Color.Red),
                                    strokeWidth = strokeWidth,
                                    cap = StrokeCap.Square,
                                    start = Offset(x = 0f, y = 12*density),
                                    end = Offset(x = 8*density, y = 12*density)
                                )

                                drawLine(
                                    brush = SolidColor(Color.Red),
                                    strokeWidth = strokeWidth,
                                    cap = StrokeCap.Square,
                                    start = Offset(x = 48*density, y = 12*density),
                                    end = Offset(x = size.width, y = 12*density)
                                )

                                drawLine(
                                    brush = SolidColor(Color.Red),
                                    strokeWidth = strokeWidth,
                                    cap = StrokeCap.Square,
                                    start = Offset.Zero.copy(y = 12*density),
                                    end = Offset.Zero.copy(y = size.height)
                                )

                                drawLine(
                                    brush = SolidColor(Color.Red),
                                    strokeWidth = strokeWidth,
                                    cap = StrokeCap.Square,
                                    start = Offset.Zero.copy(y = y),
                                    end = Offset(x = size.width, y = y)
                                )

                                drawLine(
                                    brush = SolidColor(Color.Red),
                                    strokeWidth = strokeWidth,
                                    cap = StrokeCap.Square,
                                    start = Offset(x = size.width, y = 12*density),
                                    end = Offset(x = size.width, y = size.height)
                                )


                            }
                        }
                    ) {

                        Row(modifier = Modifier.padding(start = 16.dp)) {
                            Icon(painter = painterResource(id = com.ap.cells.R.drawable.ic_quote),
                                contentDescription = null,
                                modifier = Modifier.size(24.dp),
                                tint = Color.Unspecified
                            )
                        }

                        Text(text= "This is a test quote", modifier = Modifier.padding(16.dp), fontSize = 48.sp)

                    }