英文:
Create text inside rectangle with border and shadow in jetpack compose
问题
我刚刚开始使用Jetpack Compose，我需要在圆角矩形边框内创建文本并添加阴影。有办法做到这一点吗？我尝试将文本放入一个框中，可以添加圆角矩形形状，但不能添加边框和阴影。它应该看起来像这样：
英文:
I've just started using the Jetpack Compose and I need to create a text inside rounded rectangle border with shadow. Is there a way to do this? I tried to put the text in a box, I can add the rounded rectangle shape, but not the border and shadow.
It should look like this:
答案1
得分: 1
你可以这样做：
@Composable
fun TextInsideBoxScreen() {
Box(modifier = Modifier.fillMaxSize(), contentAlignment = Alignment.Center) {
Box(
contentAlignment = Alignment.Center,
modifier = Modifier.border(width = 2.dp, color = Color.Blue, shape = CircleShape)
) {
Text(
text = "篮球",
color = Color.LightGray,
fontWeight = FontWeight.W800,
modifier = Modifier.padding(horizontal = 30.dp, vertical = 10.dp)
)
}
}
}
英文:
You can do like this👇
@Composable
fun TextInsideBoxScreen() {
Box(modifier = Modifier.fillMaxSize(), contentAlignment = Alignment.Center) {
Box(
contentAlignment = Alignment.Center,
modifier = Modifier.border(width = 2.dp, color = Color.Blue, shape = CircleShape)
) {
Text(
text = "Basketball",
color = Color.LightGray,
fontWeight = FontWeight.W800,
modifier = Modifier.padding(horizontal = 30.dp, vertical = 10.dp)
)
}
}
}
答案2
得分: 1
@Composable
fun RoundedCornerChip(
content: String = "篮球",
contentColor: Color = Color.LightGray,
borderColor: Color = Color.Black,
) {
val shape = RoundedCornerShape(60.dp)
Card(
modifier = Modifier
.wrapContentSize().border(shape = shape, width = 2.dp, color = borderColor),
shape = shape,
elevation = 10.dp,
) {
Box(
contentAlignment = Alignment.Center,
modifier = Modifier
.wrapContentSize(),
) {
Text(
text = content,
color = contentColor,
fontWeight = FontWeight.W800,
modifier = Modifier.padding(horizontal = 30.dp, vertical = 10.dp),
)
}
}
}
英文:
@Composable
fun RoundedCornerChip(
content: String = "Basket ball",
contentColor: Color = Color.LightGray,
borderColor: Color = Color.Black,
) {
val shape = RoundedCornerShape(60)
Card(
modifier = Modifier
.wrapContentSize().border(shape = shape, width = 2.dp, color = borderColor),
shape = shape,
elevation = 10.dp,
) {
Box(
contentAlignment = Alignment.Center,
modifier = Modifier
.wrapContentSize(),
) {
Text(
text = content,
color = contentColor,
fontWeight = FontWeight.W800,
modifier = Modifier.padding(horizontal = 30.dp, vertical = 10.dp),
)
}
}
}
This will give you...
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论