Jetpack Compose:使父级外部的偏移图像可见
Jetpack Compose: Make offset image outside parent visible
我在带有背景色的卡片中添加了一张图像,我希望我的图像的某些部分溢出容器并可见。我使用 offset
来偏移图像,但我找不到使它可见的方法。
这是我的代码:
Card(
shape = RoundedCornerShape(8.dp),
modifier = Modifier.padding(),
backgroundColor = Color.Cyan,
onClick = {},
) {
Box(modifier = Modifier.wrapContentHeight()) {
Image(
modifier = Modifier
.width(250.dp)
.align(alignment = Alignment.TopEnd)
.offset(y = -75.dp, x = 50.dp),
painter = painterResource(id = R.drawable.ic_pray),
contentDescription = null,
)
Column(
) {}
}
}
Card
基于 Material 表面,using Modifier.clip
会阻止显示偏移视图。
如果您需要保持 Card
高度,您可以将图像放在 Card
之外的 Box
中:
Box {
Card(...)
Image(
modifier = Modifier
.width(250.dp)
.align(alignment = Alignment.TopEnd)
.offset(y = -75.dp, x = 50.dp),
painter = painterResource(id = R.drawable.my_image),
contentDescription = null,
)
}
否则,您可以先跳过使用 Card
,然后使用 Modifier.background
:
将背景和形状设置为您的 Box
Box(
modifier = Modifier
.padding(10.dp)
.background(Color.Cyan, shape = RoundedCornerShape(8.dp))
) {
Box(modifier = Modifier.wrapContentHeight()) {
Image(
modifier = Modifier
.width(250.dp)
.align(alignment = Alignment.TopEnd)
.offset(y = -75.dp, x = 50.dp),
painter = painterResource(id = R.drawable.my_image),
contentDescription = null,
)
Column(
) {}
}
}
我在带有背景色的卡片中添加了一张图像,我希望我的图像的某些部分溢出容器并可见。我使用 offset
来偏移图像,但我找不到使它可见的方法。
这是我的代码:
Card(
shape = RoundedCornerShape(8.dp),
modifier = Modifier.padding(),
backgroundColor = Color.Cyan,
onClick = {},
) {
Box(modifier = Modifier.wrapContentHeight()) {
Image(
modifier = Modifier
.width(250.dp)
.align(alignment = Alignment.TopEnd)
.offset(y = -75.dp, x = 50.dp),
painter = painterResource(id = R.drawable.ic_pray),
contentDescription = null,
)
Column(
) {}
}
}
Card
基于 Material 表面,using Modifier.clip
会阻止显示偏移视图。
如果您需要保持 Card
高度,您可以将图像放在 Card
之外的 Box
中:
Box {
Card(...)
Image(
modifier = Modifier
.width(250.dp)
.align(alignment = Alignment.TopEnd)
.offset(y = -75.dp, x = 50.dp),
painter = painterResource(id = R.drawable.my_image),
contentDescription = null,
)
}
否则,您可以先跳过使用 Card
,然后使用 Modifier.background
:
Box
Box(
modifier = Modifier
.padding(10.dp)
.background(Color.Cyan, shape = RoundedCornerShape(8.dp))
) {
Box(modifier = Modifier.wrapContentHeight()) {
Image(
modifier = Modifier
.width(250.dp)
.align(alignment = Alignment.TopEnd)
.offset(y = -75.dp, x = 50.dp),
painter = painterResource(id = R.drawable.my_image),
contentDescription = null,
)
Column(
) {}
}
}