使用轮廓 Jetpack Compose 创建芯片答案

【问题标题】：Create chip with outline Jetpack Compose使用轮廓 Jetpack Compose 创建芯片
【发布时间】：2021-05-23 21:16:22
【问题描述】：

我有以下可组合的功能来构建芯片：

@Composable
fun CategoryChip(
  category: String,
  isSelected: Boolean = false,
  onSelectedCategoryChanged: (String) -> Unit,
  onExecuteSearch: () -> Unit
) {
  Surface(
    modifier = Modifier.padding(end = 8.dp, bottom = 8.dp),
    elevation = 8.dp,
    shape = RoundedCornerShape(16.dp),
    color = when {
      isSelected -> colorResource(R.color.teal_200)
      else -> colorResource(R.color.purple_500)
    }
  ) {
    Row(modifier = Modifier
      .toggleable(
        value = isSelected,
        onValueChange = {
          onSelectedCategoryChanged(category)
          onExecuteSearch()
        }
      )) {
      Text(
        text = category,
        style = MaterialTheme.typography.body2,
        color = Color.White,
        modifier = Modifier.padding(8.dp)
      )
    }
  }
}

这将创建以下芯片：

但我想要达到的目标如下：

是否可以使用 Jetpack Compose 创建类似的形状？

【问题讨论】：

标签： android-jetpack-compose

【解决方案1】：

是的，您所要做的就是为您的表面添加一个边框。

Surface(
    modifier = Modifier.padding(end = 8.dp, bottom = 8.dp),
    elevation = 8.dp,
    shape = RoundedCornerShape(16.dp),
    border = BorderStroke(
        width = 1.dp,
        color = when {
            isSelected -> colorResource(R.color.teal_200)
            else -> colorResource(R.color.purple_500)
        }
     )
)

【讨论】：

不要忘记向你的表面添加内容 `Surface(...) { Text("Some Example") }` :-)
我也在做类似的事情。但是，当我添加边框时，角不是圆角的。我最终得到一个圆形芯片和芯片周围的矩形边框。

【解决方案2】：

基于 Code Poet 的回答，我想展示如何使用背景颜色制作 Material Chip：

@Composable
fun buildChip(label: String, icon: ImageVector? = null) {
    Box(modifier = Modifier.padding(8.dp)) {
        Surface(
            elevation = 1.dp,
            shape = MaterialTheme.shapes.small,
            color = Color.LightGray
        ) {
            Row(verticalAlignment = Alignment.CenterVertically) {
                if (icon != null) Icon(
                    icon,
                    modifier = Modifier
                        .fillMaxHeight()
                        .padding(horizontal = 4.dp)
                )
                Text(
                    label,
                    modifier = Modifier.padding(8.dp),
                    style = MaterialTheme.typography.button.copy(color = Color.DarkGray)
                )
            }
        }
    }
}

【讨论】：

【解决方案3】：

从 1.2.0-alpha02 开始，您可以使用 Chip 组合：

Chip(
    onClick = { /* Do something! */ },
    border = BorderStroke(
         ChipDefaults.OutlinedBorderSize,
         Color.Red
    ),
    colors = ChipDefaults.chipColors(
        backgroundColor = Color.White,
        contentColor = Color.Red
    ),
    leadingIcon = {
        Icon(
            Icons.Filled.Settings,
            contentDescription = "Localized description"
        )
    }
) {
    Text("Change settings")
}

【讨论】：