[英]Text in Border using Jetpack Compose
我想在邊框中添加如下文本。 包含文本的邊框中有一個圖標
有人可以建議如何解決這個問題嗎?
您可以將OutlinedText
與 label 一起使用
OutlinedTextField(
value = textFieldValue,
label = { Text("AAA") },
onValueChange = { newValue ->
textFieldValue= newValue
)
解決了。
這是一個粗略的工作代碼
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)
}
您可以將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)
}
)
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.