如何使用jetpack compose创建圆形轮廓按钮

Question

我正在尝试创建一个圆形

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)
    }

这是最终结果：

Answer 1

您可以使用

OutlinedButton

删除

contentPadding

。
比如：

    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)
    }

Answer 2

M2 包中没有轮廓图标按钮组件（

androidx.compose.material

），但在 M3 中（

androidx.compose.material3

），自 2022 年 4 月 20 日发布 v1.0.0-alpha10 以来，有一个

OutlinedIconButton

，您可以按如下方式使用它：

import androidx.compose.material3.Icon
import androidx.compose.material3.OutlinedIconButton

OutlinedIconButton(onClick = { /* doSomething() */ }) {
    Icon(Icons.Outlined.Lock, contentDescription = "Localized description")
}

类似地，其他 M3 款式也有

FilledIconButton

和

FilledTonalIconButton

。