Jetpack Compose中如何为Button设置可重复平铺的drawable图案背景

解决方案 #

Jetpack Compose 的 Material Button 默认仅支持纯色作为背景，你可以通过以下两种方式实现平铺 drawable 纹理效果：

方案1：直接复用现有XML drawable（适配你已写好的平铺配置） #

只需修改两处代码：将 Button 自带的背景色设为透明，再通过 Modifier 加载你写好的 bitmap xml 作为背景即可：

Button(
    onClick = { /*TODO*/ },
    // 关闭Button自带的纯色背景
    colors = ButtonDefaults.buttonColors(
        backgroundColor = Color.Transparent
    ),
    modifier = Modifier
        .fillMaxWidth()
        .height(60.dp)
        .clip(RoundedCornerShape(0.dp))
        // 加载你定义的平铺xml drawable作为背景（替换为你自己的xml文件名）
        .background(painter = painterResource(id = R.drawable.your_bitmap_xml)),
    shape = RoundedCornerShape(0.dp)
) {
    Text(
        text = stringResource(id = R.string.login),
        color = colorResource(id = R.color.gainsboro_05),
        style = MaterialTheme.typography.body1
    )
}

方案2：Compose原生API实现平铺（兼容性更强，无需XML） #

如果低版本 Compose 对 XML bitmap 的 tileMode 支持有问题，可以直接用原生 ShaderBrush 实现重复平铺效果：

// 加载纹理图源文件
val patternBitmap = ImageBitmap.imageResource(id = R.drawable.pattern_stripe_loose_gainsboro_05)
// 生成双向重复平铺的画笔
val repeatPatternBrush = ShaderBrush(
    ImageShader(
        image = patternBitmap,
        tileModeX = TileMode.Repeat,
        tileModeY = TileMode.Repeat
    )
)

// 直接将Brush设置为背景即可
Button(
    onClick = { /*TODO*/ },
    colors = ButtonDefaults.buttonColors(backgroundColor = Color.Transparent),
    modifier = Modifier
        .fillMaxWidth()
        .height(60.dp)
        .clip(RoundedCornerShape(0.dp))
        // 如果需要加底层底色，可以先加一层background设置纯色，再叠加纹理
        .background(colorResource(id = R.color.gainsboro_00))
        .background(repeatPatternBrush),
    shape = RoundedCornerShape(0.dp)
) {
    Text(
        text = stringResource(id = R.string.login),
        color = colorResource(id = R.color.gainsboro_05),
        style = MaterialTheme.typography.body1
    )
}

注意事项 #

• 必须将 Button 自带的 backgroundColor 设为透明，否则默认纯色会覆盖自定义背景
• 如果需要保留原有的灰色底色，只需要在设置纹理背景前，先给 Modifier 加一层纯色 background 即可

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