[英]Border radius is not changing based on shape when user click on it jetpack compose
Hey guys I am using RoundedCornerShape(4.dp)
to my Surface
which looks fine.大家好,我在
Surface
上使用RoundedCornerShape(4.dp)
,看起来不错。 When I tried to click on the item it not showing me 4dp
corner in Surface.当我尝试单击该项目时,它没有在 Surface 中显示
4dp
角。 I tried this stack overflow 1 and stack overflow 2 but nothing works.我尝试了这个堆栈溢出 1和堆栈溢出 2 ,但没有任何效果。
binding.itemComposable.setContent {
Column(modifier = Modifier.fillMaxSize(), verticalArrangement = Arrangement.spacedBy(12.dp)) {
val options = getOptions()
options.forEachIndexed { _, optionText ->
val interactionSource = remember { MutableInteractionSource() }
val isPressed by interactionSource.collectIsPressedAsState()
val backgroundColor = if (isPressed) DuckEggBlue else OffWhite
val textColor = if (isPressed) TealBlue else Slate
val borderWidth = if (isPressed) 1.dp else 0.dp
val borderColor = if (isPressed) Aqua else OffWhite
val clickable = Modifier.clickable(
interactionSource = interactionSource,
indication = rememberRipple(true)
) {
println("Item Click")
}
Surface(
modifier = Modifier
.then(clickable)
.border(borderWidth, borderColor),
shape = RoundedCornerShape(4.dp)
) {
Text(
modifier = Modifier
.fillMaxWidth()
.background(backgroundColor)
.padding(16.dp),
text = optionText,
style = Typography.h3,
fontWeight = FontWeight.Medium,
color = textColor
)
}
}
}
}
Without click on item corner is 4 dp没有点击项目角落是4 dp
When I click it's not changing corner当我点击它没有改变角落
Create a variable for shape
为
shape
创建变量
val shape = RoundedCornerShape(4.dp)
Use it in Modifier.clip()
and Modifier.border()
like this,像这样在
Modifier.clip()
和Modifier.border()
中使用它,
Surface(
modifier = Modifier
.clip(shape)
.border(
width = borderWidth,
color = borderColor,
shape = shape,
)
.then(clickable),
// shape = shape,
)
shape
in border()
specifies the shape of the border which by default is RectangleShape
. shape
in border()
指定边框的形状,默认为RectangleShape
。 Hence, you are seeing the rectangle border.因此,您会看到矩形边框。
shape
in clip()
changes the shape of the composable before the click action is added. clip()
中的shape
在添加单击操作之前更改可组合对象的形状。 This is to make the ripple effect appear only on the given shape.这是为了使波纹效果仅出现在给定的形状上。
Note : Order of modifiers are important.注意:修饰符的顺序很重要。
The shape
in the Surface
may not be needed after these changes.在进行这些更改后,可能不需要
Surface
中的shape
。
If youre using Surface to wrapping the content, try to add a container inside the content for example Box or Column.如果您使用 Surface 包装内容,请尝试在内容中添加一个容器,例如 Box 或 Column。 Then use your Surface only as a shape mask, the background and other content will be flexible as you want.
然后将您的 Surface 仅用作形状蒙版,背景和其他内容将根据需要灵活调整。
This is the example这是示例
Surface(
modifier = Modifier
.then(clickable)
.border(borderWidth, borderColor),
shape = RoundedCornerShape(4.dp)
) {
Box(modifier = Modifier
.fillMaxWidth()
.fillMaxHeight()
.background(Color.Green)){
Text(
modifier = Modifier
.fillMaxWidth()
.padding(16.dp),
text = optionText,
style = Typography.h3,
fontWeight = FontWeight.Medium,
color = textColor
)
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.