Jetpack Wear Compose实现Card四边不同颜色无渐变边框

一、实现四边不同颜色的Wear Compose Card #

直接用Modifier.drawBehind自定义绘制四条边框，避开默认border只能单颜色的限制，代码示例如下：

import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.padding
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.graphics.drawscope.Stroke
import androidx.compose.ui.unit.dp
import androidx.wear.compose.material.Card

@Composable
fun MultiBorderCard(
    topBorderColor: Color = Color.Red,
    rightBorderColor: Color = Color.Blue,
    bottomBorderColor: Color = Color.Green,
    leftBorderColor: Color = Color.Yellow,
    borderWidth: Float = 2.dp.toPx(),
    content: @Composable () -> Unit
) {
    Card(
        modifier = Modifier
            .fillMaxWidth()
            .drawBehind {
                // 顶部边框
                drawLine(
                    color = topBorderColor,
                    start = androidx.compose.ui.geometry.Offset(0f, 0f),
                    end = androidx.compose.ui.geometry.Offset(size.width, 0f),
                    strokeWidth = borderWidth
                )
                // 右侧边框
                drawLine(
                    color = rightBorderColor,
                    start = androidx.compose.ui.geometry.Offset(size.width, 0f),
                    end = androidx.compose.ui.geometry.Offset(size.width, size.height),
                    strokeWidth = borderWidth
                )
                // 底部边框
                drawLine(
                    color = bottomBorderColor,
                    start = androidx.compose.ui.geometry.Offset(size.width, size.height),
                    end = androidx.compose.ui.geometry.Offset(0f, size.height),
                    strokeWidth = borderWidth
                )
                // 左侧边框
                drawLine(
                    color = leftBorderColor,
                    start = androidx.compose.ui.geometry.Offset(0f, size.height),
                    end = androidx.compose.ui.geometry.Offset(0f, 0f),
                    strokeWidth = borderWidth
                )
            },
        backgroundColor = Color.White
    ) {
        Box(modifier = Modifier.padding(16.dp)) {
            content()
        }
    }
}

// 使用示例
@Composable
fun MultiBorderCardDemo() {
    MultiBorderCard {
        androidx.wear.compose.material.Text(text = "四边异色边框Card示例")
    }
}

说明：

• 借助drawBehind在Card的背景层上方绘制四条独立线条，每条可单独指定颜色
• 支持通过参数调整边框颜色、宽度，适配不同需求
• 保留Wear Card原有的交互特性（如点击反馈），仅额外添加自定义边框

二、无法上传图片的替代说明方案 #

如果没法上传示例图，可通过以下方式清晰传递效果：

• 精准文字描述：比如“Card顶部边框为红色、右侧为蓝色、底部为绿色、左侧为黄色，边框宽度2dp，Card背景白色，内部包含一行黑色文字”
• ASCII示意图：用简单字符模拟边框效果：

┌─────────────────────┐
│                     │
│  内部内容示例        │
│                     │
└─────────────────────┘
注：上边框红、右边框蓝、下边框绿、左边框黄

• 代码注释补充：在提供的代码里添加明确注释，对应每条边框的颜色和位置，让看代码的人能直接关联视觉效果

内容的提问来源于stack exchange，提问作者Zsolti