如何在Jetpack Compose中仅更改特定边框的边框宽度？

Question

我正在尝试实现以下布局

在此输入图像描述

在Jetpack Compose中没有设置单独边框宽度的方法

这是我的代码

            Row(
                modifier = Modifier
                    .border(width = 1.dp, shape = RoundedCornerShape(4.dp), color = Purple3)
                    .padding(10.dp),
                verticalAlignment = Alignment.CenterVertically
            ) {
                Image(
                    painter = painterResource(id = R.drawable.info),
                    contentDescription = stringResource(id = R.string.long_press_an_item),
                )
                Text(
                    text = stringResource(id = R.string.long_press_an_item),
                    fontFamily = FontFamily(Font(R.font.inter_medium)),
                    fontSize = 12.sp,
                    color = Gray5,
                    modifier = Modifier.padding(horizontal = 10.dp)
                )
            }

- Chup bae

Answer 1

我使用了不同的颜色，但你可以看到结果：

我看到有三种方法可以实现这个效果：

1. 您可以创建自定义的修饰符扩展方法，就像我在我的一个项目中所做的那样，使用 drawBehind 修饰符：

@Preview
@Composable
fun Preview() {
    Row(
        modifier = Modifier
            .someCustomOutline(
                outlineColor = MaterialTheme.colors.primary,
                surfaceColor = MaterialTheme.colors.surface,
                startOffset = 3.dp,
                outlineWidth = 1.dp,
                radius = 4.dp
            )
            .padding(10.dp),
        verticalAlignment = Alignment.CenterVertically
    ) {
        Image(
            imageVector = Icons.Default.Info,
            contentDescription = null,
        )
        Text(
            text = "long_press_an_item",
            fontSize = 12.sp,
            modifier = Modifier.padding(horizontal = 10.dp)
        )
    }
}

@Composable
fun Modifier.someCustomOutline(
    outlineColor: Color,
    surfaceColor: Color,
    startOffset: Dp,
    outlineWidth: Dp,
    radius: Dp = 1.dp
) = drawBehind {
    val startOffsetPx = startOffset.toPx()
    val outlineWidthPx = outlineWidth.toPx()
    val radiusPx = radius.toPx()
    drawRoundRect(
        color = outlineColor,
        topLeft = Offset(0f, 0f),
        size = size,
        cornerRadius = CornerRadius(radiusPx, radiusPx),
        style = Fill
    )
    drawRoundRect(
        color = surfaceColor,
        topLeft = Offset(startOffsetPx, outlineWidthPx),
        size = Size(size.width - startOffsetPx - outlineWidthPx, size.height - outlineWidthPx * 2),
        cornerRadius = CornerRadius(radiusPx - outlineWidthPx, radiusPx - outlineWidthPx),
        style = Fill
    )
}

使用方法：

这是一种非常糟糕的方法，但我会提到它以防万一。

2. 您可以使用Box包装您的元素并添加填充：

Box(
    modifier = Modifier
        .background(shape = RoundedCornerShape(4.dp), color = Purple3)
        .padding(start = 3.dp, top = 1.dp, end = 1.dp, bottom = 1.dp)
) {
    Row(
        modifier = Modifier
            .background(MaterialTheme.colors.surface, shape = RoundedCornerShape(3.dp))
            .padding(10.dp),
        verticalAlignment = Alignment.CenterVertically
    ) {
        Image(
            imageVector = painterResource(id = R.drawable.info),
            contentDescription = stringResource(id = R.string.long_press_an_item),
        )
        Text(
            text = stringResource(id = R.string.long_press_an_item),
            fontSize = 12.sp,
            fontFamily = FontFamily(Font(R.font.inter_medium)),
            color = Gray5,
            modifier = Modifier.padding(horizontal = 10.dp)
        )
    }
}

- Yoloroy

Answer 2

您可以使用具有背景的方框作为边框，并在起始角添加更多的填充来完成此操作。

@Preview
@Composable
private fun Test() {
    Box(modifier = Modifier.background(Color(0xffBA68C8), RoundedCornerShape(4.dp))) {
        Row(
            modifier = Modifier
                .padding(start = 4.dp, top = 1.dp, bottom = 1.dp, end = 1.dp)
                .background(Color.White, RoundedCornerShape(4.dp))
                .padding(10.dp),
            verticalAlignment = Alignment.CenterVertically
        ) {
            Image(
                imageVector = Icons.Default.Info,
                contentDescription = "Long press item to enable multi-select and bulk operations"
            )
            Text(
                text = "Long Press on Item",
                fontSize = 12.sp,
                color = Color.Gray,
                modifier = Modifier.padding(horizontal = 10.dp)
            )
        }
    }
}

- Thracian

---

你实际上可以移除那个 Box 并将其修饰符与 Row 的修饰符合并。 - Maciej Ciemięga

Answer 3

Container(
      decoration: BoxDecoration(
        gradient: LinearGradient(stops: const [
          0.014,
          0.014
        ], colors: [
          isError ? redColor : greenColor,
          Theme.of(context).colorScheme.background
        ]),
        color: Theme.of(context).colorScheme.background,
        borderRadius: BorderRadius.circular(10),
        border: Border.all(color: isError ? redColor : greenColor, width: 1),
      ),
      padding: const EdgeInsets.symmetric(
        vertical: 12,
        horizontal: 12,
      ),
      child: Row(
        children: [
          Padding(
            padding: const EdgeInsets.symmetric(horizontal: 8),
            child: Text(
              text,
              style: GoogleFonts.inter(
                fontWeight: FontWeight.w500,
                fontSize: 12,
                color: gray6Color,
              ),
            ),
          )
        ],
      )

- BraveEvidence