如何使用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)
    }