如何更改Jetpack Compose Snackbar的背景颜色？

Question

我想要将实心或渐变颜色应用于Jetpack Compose Snackbar。请指导我如何更改颜色。

这是我的Material3 Compose Snackbar，我正在寻找更改背景颜色的解决方案。

import android.os.Bundle
import android.widget.Toast
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.*
import androidx.compose.foundation.rememberScrollState
import androidx.compose.foundation.verticalScroll
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.ArrowBack
import androidx.compose.material3.*
import androidx.compose.runtime.remember
import androidx.compose.runtime.rememberCoroutineScope
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.platform.LocalContext
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.unit.dp
import compose.material.theme.ui.theme.Material3ComposeTheme
import compose.material.theme.ui.theme.Purple40
import kotlinx.coroutines.launch


class MainActivity : ComponentActivity() {

    @OptIn(ExperimentalMaterial3Api::class)
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            Material3ComposeTheme {


                val context = LocalContext.current

                val snackState = remember { SnackbarHostState() }
                val scope = rememberCoroutineScope()

                Scaffold(
                    topBar = {
                    },
                    content = {

                        fun launchSnackbar(message: String, actionLabel : String?=null, duration: SnackbarDuration = SnackbarDuration.Short){
                            scope.launch {
                                snackState.showSnackbar(message = message,actionLabel=actionLabel, duration=duration)
                            }
                        }

                        Column(
                            modifier = Modifier
                                .padding(it)
                                .verticalScroll(rememberScrollState())
                        ) {

                            Spacer(modifier = Modifier.height(47.dp))



                            Text("Snackbar", Modifier.padding(bottom = 10.dp), style = MaterialTheme.typography.labelLarge)
                            Button(onClick = {
                                // *  Snackbar
                                launchSnackbar(message = "Hi i am snackbar message", actionLabel = "Hide", duration = SnackbarDuration.Long)
                            }) { Text("Snackbar",style = MaterialTheme.typography.labelLarge) }
                            ListDividerPadding()


                             Text("Toast", Modifier.padding(bottom = 10.dp), style = MaterialTheme.typography.labelLarge)
                             Button(onClick = {
                                 Toast.makeText(
                                     context,
                                     "Hi i am toast message",
                                     Toast.LENGTH_LONG
                                 ).show()
                             }) { Text("Toast",style = MaterialTheme.typography.labelLarge) }


                        }
                    }
                )

                Box(modifier = Modifier.fillMaxSize(), Alignment.BottomCenter){
                    SnackbarHost(hostState = snackState)
                }

            }

        }
    }
}

- Bolt UIX

Answer 1

您可以将 SnackBar 组件添加到SnackbarHost 并更改颜色，示例如下：

SnackbarHost(hostState = snackState) {
    Snackbar(
        snackbarData = it,
        containerColor = Color.Green,
        contentColor = Color.Red
    )
}

编辑

没有采用 Brush 而不是 Color 的重载函数，但您可以通过添加渐变颜色或更多自定义来添加另一个Composable，使用方式为：content: @Composable () -> Unit。

@Composable
fun Snackbar(
    modifier: Modifier = Modifier,
    action: @Composable (() -> Unit)? = null,
    dismissAction: @Composable (() -> Unit)? = null,
    actionOnNewLine: Boolean = false,
    shape: Shape = SnackbarTokens.ContainerShape.toShape(),
    containerColor: Color = SnackbarTokens.ContainerColor.toColor(),
    contentColor: Color = SnackbarTokens.SupportingTextColor.toColor(),
    actionContentColor: Color = SnackbarTokens.ActionLabelTextColor.toColor(),
    dismissActionContentColor: Color = SnackbarTokens.IconColor.toColor(),
    content: @Composable () -> Unit
) 

可用作

Snackbar {
    Row(
        modifier = Modifier.background(
            brush = Brush.horizontalGradient(
                listOf(
                    Color.Red,
                    Color.Green,
                    Color.Blue
                )
            )
        )
    ) {
        Text("Hello World")
    }
}

- Thracian

---

有没有办法将渐变颜色设置为“containerColor”，请帮忙。 - Bolt UIX

实色类似于Color.Green的工作正常。 - Bolt UIX

那个版本只能使用颜色，但是还有另一个函数可以根据您的需求更改内容或操作。 - Thracian