如何解决如何使用jetpack compose创建圆形轮廓按钮
我正在尝试创建一个圆形 OutlinedButton
,中间有一个图标,没有文字。
OutlinedButton(onClick = { /*Todo*/ },shape = CircleShape,border= Borderstroke(1.dp,Color.Blue)
) {
Icon(Icons.Default.Add,contentDescription = "content description")
}
最后一个按钮是椭圆形的:
使用 IconButton
:
IconButton(onClick = { },modifier = Modifier
.clip(CircleShape)
.border(1.dp,Color.Red)
) {
Icon(Icons.Default.Add,contentDescription = "content description",tint = Color.Red)
}
这是最终结果:
解决方法
通过 1.0.0
(使用 1.0.0-beta07
测试),您可以使用 OutlinedButton
。
类似的东西:
OutlinedButton(onClick = { /*TODO*/ },modifier= Modifier.size(50.dp),//avoid the oval shape
shape = CircleShape,border= BorderStroke(1.dp,Color.Blue),contentPadding = PaddingValues(0.dp),//avoid the little icon
colors = ButtonDefaults.outlinedButtonColors(contentColor = Color.Blue)
) {
Icon(Icons.Default.Add,contentDescription = "content description")
}
或 IconButton
删除 clip
修饰符并在 shape
参数中使用 border
:
IconButton(onClick = { },modifier = Modifier
.then(Modifier.size(50.dp))
.border(1.dp,Color.Red,shape = CircleShape)
) {
Icon(Icons.Default.Add,contentDescription = "content description",tint = Color.Red)
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。