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

Question

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

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

Answer 1

您可以将OutlinedText与 label 一起使用

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

Answer 2

此边框将包含的视图不是文本字段，而是根据以下设计

边框上会有一个引号图标

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)

                    }

Answer 4

您可以将OutlinedTextField与label参数一起使用，您可以在其中添加Icon而不是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))
    }
)

您还可以将OutlinedTextField用作 label 一个可与inlineContent参数组合的Text 。
通过这种方式，您可以定义标签的 map，用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)
    }
)