如何在Jetpack Compose中绘制渐变并自定义启动页？

修改后完整代码 #

启动页背景组件

@Composable
fun SplashBackground(
    logoPainter: Painter,
    contentDescription: String?,
    modifier: Modifier = Modifier,
    gradientBrush: Brush = Brush.verticalGradient(
        colors = listOf(
            colorResource(R.color.gradient_start), // 替换为你的渐变起始色
            colorResource(R.color.gradient_end)   // 替换为你的渐变结束色
        )
    )
) {
    Box(
        modifier = modifier
            .fillMaxSize()
            .background(brush = gradientBrush),
        contentAlignment = Alignment.Center
    ) {
        Column(
            horizontalAlignment = Alignment.CenterHorizontally,
            verticalArrangement = Arrangement.Center
        ) {
            Image(
                painter = logoPainter,
                contentDescription = contentDescription,
                modifier = Modifier.size(120.dp) // 按需调整Logo尺寸
            )
            Spacer(modifier = Modifier.height(36.dp)) // 控制Logo与文字的间距
            Text(
                text = "Hello and welcome to our app",
                color = colorResource(id = R.color.white),
                fontSize = 16.sp
            )
        }
    }
}

启动页调用代码

@Composable
fun Splash(modifier: Modifier = Modifier) {
    SplashBackground(
        logoPainter = painterResource(id = coil.base.R.drawable.notification_bg),
        contentDescription = "App Logo",
        modifier = modifier.fillMaxSize()
        // 如需自定义渐变，可传入自定义brush
        // gradientBrush = Brush.horizontalGradient(colors = listOf(...))
    )
}

关键改动说明 #

• 替换图片背景为渐变：移除原背景Image，改用Box的background(brush = gradientBrush)实现渐变背景，支持垂直、水平、径向等多种渐变类型，可根据需求调整渐变参数。
• 实现Logo与文字居中：
  1. 外层Box设置contentAlignment = Alignment.Center，确保内部内容整体居中。
  2. 用Column包裹Logo和文字，通过horizontalAlignment = Alignment.CenterHorizontally保证水平居中，verticalArrangement = Arrangement.Center保证垂直居中，同时用Spacer精准控制两者间距。
• 简化组件职责：移除冗余的背景图片参数，让组件专注于启动页的渐变背景与居中内容展示，结构更清晰。
• 优化布局层级：精简原代码中多余的Box嵌套，减少不必要的布局层级，提升渲染性能。

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