Modification de la couleur de la barre d'état dans Jetpack Compose

Chaque problème résolu est une leçon apprise. #AndroidTips #SolvedProblemToday

Changer la couleur de la barre d'état est une tâche courante lors de la conception d'applications Android. Avec Jetpack Compose, c'est un processus simple qui peut être fait en quelques lignes de code.

Pour changer la couleur de la barre d'état dans Jetpack Compose, nous pouvons utiliser le SystemUiControllerfourni par le androidx.compose.ui.platformpackage.

Tout d'abord, nous avons besoin de accompanist-systemuicontroller, ajoutez la dépendance au fichier build.gradle de votre application :

dependencies {
    implementation "com.google.accompanist:accompanist-systemuicontroller:x.y.z"
}

Nous devons créer une fonction composable qui définira la couleur de la barre d'état (créer la classe SetStatusBarColor.kt ). Voici un exemple :

@Composable
fun SetStatusBarColor(color: Color) {
    val systemUiController = rememberSystemUiController()
    SideEffect {
        systemUiController.setSystemBarsColor(color)
    }
}

Ensuite, nous pouvons appeler cette fonction dans notre @Composablefonction principale sur MainActivity , comme ceci :

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            YourAppNameTheme {
                StatusBarColor(color = MaterialTheme.colors.primary)
                // Other content here, example :
                Surface(modifier = Modifier.fillMaxSize(), color = MaterialTheme.colors.background) {
                    YourAppClass()
                }
            }
        }
    }
}

Et c'est tout! Avec seulement quelques lignes de code, nous pouvons facilement changer la couleur de la barre d'état dans notre application Android basée sur Jetpack Compose.

L'utilisation SystemUiControllern'est pas seulement limitée à la modification de la couleur de la barre d'état, elle peut également être utilisée pour d'autres configurations de l'interface utilisateur du système, telles que la barre de navigation, le mode immersif, etc.

J'ai une application échantillon utilisant jetpack compose dans mon référentiel github.com/im-o .

Fait et dépoussiéré, merci !