英文:
How to draw an inner border?
问题
我想为列绘制两个边框（一个内部边框，一个外部边框）。
期望结果：
Modifier.border(2.dp) // -> 这将创建内部边框。
英文:
I want to draw two border(1 inside - 1 outside) to Column.
Expected Result:
Modifier.border(2.dp) // -> this creates inner border.
答案1
得分: 4
以下是翻译好的代码部分：
- 你可以简单地应用
border修饰符，然后是padding。
类似这样：
val shape = RoundedCornerShape(16.dp)
Box(modifier = Modifier
.size(60.dp, 100.dp)
.border(2.dp, Blue, shape)
.padding(4.dp)
.background(Blue, shape)
){
// 内容
}
- 你可以两次应用
border修饰符：
val shape = RoundedCornerShape(16.dp)
Box(modifier = Modifier
.size(60.dp, 100.dp)
.border(2.dp, Blue, shape)
.border(4.dp, White, shape)
.background(Blue, shape)
){
// 内容
}
- 最后，你可以绘制一个内部边框。
类似这样：
fun Modifier.innerBorder(
strokeWidth: Dp,
color: Color,
cornerRadiusDp: Dp,
offset : Offset = Offset.Zero
) = composed(
factory = {
val density = LocalDensity.current
val strokeWidthPx = density.run { strokeWidth.toPx() }
val cornerRadiusPx = density.run { cornerRadiusDp.toPx() }
val halfStroke = strokeWidthPx / 2
val topLeft = Offset(halfStroke + offset.x, halfStroke + offset.y)
Modifier.drawBehind {
val width = size.width - topLeft.x*2
val height = size.height - topLeft.y*2
drawRoundRect(
color = color,
topLeft = topLeft,
size = Size(width, height),
cornerRadius = CornerRadius(cornerRadiusPx, cornerRadiusPx).shrink(halfStroke),
style = Stroke(strokeWidthPx)
)
}
}
)
private fun CornerRadius.shrink(value: Float): CornerRadius = CornerRadius(
kotlin.math.max(0f, this.x - value),
kotlin.math.max(0f, this.y - value)
)
然后只需应用它：
val shape = RoundedCornerShape(16.dp)
Column(modifier = Modifier
.size(60.dp, 100.dp)
.background(Blue, shape)
.innerBorder(
strokeWidth = 2.dp,
color = White,
cornerRadiusDp = 16.dp,
offset = Offset(4f, 4f)
)
){
//.... 内容
}
英文:
You have different options.
- You can simply apply a
bordermodifier and then apadding.
Something like:
val shape = RoundedCornerShape(16.dp)
Box(modifier = Modifier
.size(60.dp , 100.dp)
.border(2.dp, Blue, shape)
.padding(4.dp)
.background(Blue, shape)
){
//content
}
-
You can apply the
bordermodifier twice:val shape = RoundedCornerShape(16.dp) Box(modifier = Modifier .size(60.dp , 100.dp) .border(2.dp, Blue, shape) .border(4.dp, White, shape) .background(Blue, shape) ){ //content }
- Finally you can draw an inner border.
Something like:
fun Modifier.innerBorder(
strokeWidth: Dp,
color: Color,
cornerRadiusDp: Dp,
offset : Offset = Offset.Zero
) = composed(
factory = {
val density = LocalDensity.current
val strokeWidthPx = density.run { strokeWidth.toPx() }
val cornerRadiusPx = density.run { cornerRadiusDp.toPx() }
val halfStroke = strokeWidthPx / 2
val topLeft = Offset(halfStroke + offset.x, halfStroke + offset.y)
Modifier.drawBehind {
val width = size.width - topLeft.x*2
val height = size.height - topLeft.y*2
drawRoundRect(
color = color,
topLeft = topLeft,
size = Size(width, height),
cornerRadius = CornerRadius(cornerRadiusPx, cornerRadiusPx).shrink(halfStroke),
style = Stroke(strokeWidthPx)
)
}
}
)
private fun CornerRadius.shrink(value: Float): CornerRadius = CornerRadius(
kotlin.math.max(0f, this.x - value),
kotlin.math.max(0f, this.y - value)
)
and then just apply it:
val shape = RoundedCornerShape(16.dp)
Column(modifier = Modifier
.size(60.dp , 100.dp)
.background( Blue , shape)
.innerBorder(
strokeWidth = 2.dp,
color = White,
cornerRadiusDp = 16.dp,
offset = Offset(4f,4f)
)
){
//....content
}
答案2
得分: 1
@Composable
fun BorderedBox() {
val shape = RoundedCornerShape(4.dp)
Box(
modifier = Modifier
.size(120.dp)
.border(3.dp, Blue, shape)
.padding(4.dp)
.background(Blue, shape)
) {
}
}
英文:
@Composable
fun BorderedBox() {
val shape = RoundedCornerShape(4.dp)
Box(
modifier = Modifier
.size(120.dp)
.border(3.dp, Blue, shape)
.padding(4.dp)
.background(Blue, shape)
) {
}
}
答案3
得分: 1
请看以下内容：
尝试这个：
```kotlin
val shape = RoundedCornerShape(14.dp)
Column(
modifier = Modifier.width(58.dp).height(78.dp)
.clip(shape)
.border(width = 2.dp, color = Color.Blue, shape = shape)
.border(width = 4.dp, color = Color.White, shape = shape)
.background(Color.Blue)
) {}
输出：
<details>
<summary>英文:</summary>
Try this:
```kotlin
val shape = RoundedCornerShape(14.dp)
Column(
modifier = Modifier.width(58.dp).height(78.dp)
.clip(shape)
.border(width = 2.dp, color = Color.Blue, shape = shape)
.border(width = 4.dp, color = Color.White, shape = shape)
.background(Color.Blue)
) {}
Output:
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论