Peter
09/14/2023, 11:48 AM@Preview
@Composable
fun Preview() {
var isBorderVisible = false
Box(modifier = Modifier
.background(Color.White)
.size(80.dp)
.let {
if (isBorderVisible) {
it.border(color = Color.Magenta, width = 20.dp)
} else {
it
}
}
)
}
jamshedalamqaderi
09/14/2023, 11:49 AMColor.Transparent
vide
09/14/2023, 11:50 AMPeter
09/14/2023, 11:51 AMPeter
09/14/2023, 11:51 AMvide
09/14/2023, 11:51 AMPeter
09/14/2023, 11:52 AMPeter
09/14/2023, 11:52 AMvide
09/14/2023, 11:52 AMvide
09/14/2023, 11:53 AMModifier.drawWithCache
to draw in arbitrary coordinates, just need to calculate them rightPeter
09/14/2023, 11:53 AMvide
09/14/2023, 11:54 AMModifier.border()
draws itPeter
09/14/2023, 11:55 AMascii
09/14/2023, 11:56 AMdrawWithContent()
drawRect(style = Stroke(width))
That's how Modifier.border also does it, except via ModifierNodeElementascii
09/14/2023, 11:58 AMvide
09/14/2023, 12:00 PMval Padding = // const
val Thickness = // const
fun Modifier.outsetBorder(shape: Shape) = drawWithCache {
val outline = shape.createOutline(size, layoutDirection, this)
val cornerRadius = when {
outline is Outline.Rounded && outline.roundRect.isSimple -> outline.roundRect.topLeftCornerRadius
else -> CornerRadius.Zero
}
val borderSize = [...]
val expandedCornerRadius = [...]
val topLeft = [...]
onDrawWithContent {
drawContent()
drawRoundRect(
color = [...],
topLeft = topLeft,
size = borderSize,
cornerRadius = expandedCornerRadius,
style = [...]
)
}
}
ephemient
09/14/2023, 12:00 PM.padding(size).border().padding(-size)
would be easier, wouldn't it?ephemient
09/14/2023, 12:01 PMvide
09/14/2023, 12:02 PMvide
09/14/2023, 12:02 PMNegative padding is not permitted — it will cause IllegalArgumentException. See Modifier.offset.
ephemient
09/14/2023, 12:02 PMephemient
09/14/2023, 12:03 PMjamshedalamqaderi
09/14/2023, 12:07 PMModifier
.background(
if (selected) White else Color.Transparent,
DefaultCornerShape
)
.then(
if (!selected) Modifier.border(
1.dp,
if (isError) MaterialTheme.colorScheme.error else White.copy(
alpha = 0.3f
),
DefaultCornerShape
) else Modifier
)
.then(modifier)
vide
09/14/2023, 12:08 PMPeter
09/14/2023, 12:14 PMdrawWithCache
will still clip composable to it's measured rect size right? So basically, if you want to have border visible, you have to always set padding to the component, right?ephemient
09/14/2023, 12:17 PMvide
09/14/2023, 12:17 PMephemient
09/14/2023, 12:18 PMvide
09/14/2023, 12:18 PMModifier.clip()
or Modifier.graphicsLayer { clip = true }
in a parent)Peter
09/14/2023, 12:25 PM@Preview
@Composable
private fun Preview() {
Column {
MyComposable()
}
}
@Composable
private fun MyComposable() {
Box(modifier = Modifier
// .padding(40.dp)
.background(Color.White)
.size(80.dp)
.drawWithCache {
val border = 20.dp.toPx()
onDrawWithContent {
drawContent()
drawRoundRect(
topLeft = Offset(-border / 2, -border / 2),
size = Size(
width = size.width + border,
height = size.height + border
),
color = Color.Magenta,
style = Stroke(width = border)
)
}
}
)
}
vide
09/14/2023, 12:26 PMvide
09/14/2023, 12:27 PMColumn(Modifier.padding(10.dp)
in the previewPeter
09/14/2023, 12:28 PMephemient
09/14/2023, 12:29 PMPeter
09/14/2023, 1:16 PM