Android JetPack Compose préliminaire 1

1. Pourquoi utiliser JetPack Compose ?

1. Problèmes avec la hiérarchie des vues Android

Étant donné que l'état de votre application change en raison de facteurs tels que l'interaction de l'utilisateur, la hiérarchie de l'interface doit être mise à jour pour afficher les données actuelles. L'état interne du widget est modifié lors de la mise à jour. La manipulation manuelle des vues augmente le risque d'erreurs. Et la complexité de la maintenance logicielle augmentera à mesure que l’état des composants d’interface utilisateur mis à jour augmentera.

2.Comment traiter JetPack Compose

Compose est un framework d'interface déclarative. Le modèle d'interface déclarative fonctionne en régénérant conceptuellement l'intégralité de l'écran à partir de zéro, puis en effectuant uniquement les modifications nécessaires. Cette approche évite la complexité liée à la mise à jour manuelle de la hiérarchie des vues avec état. Simplifie considérablement la construction de l'interface utilisateur et la mise à jour du statut.

2. Composer la configuration

Configurez les informations suivantes dans build.gradle dans le projet de niveau supérieur :

buildscript { 
    ext { 
        compose_version = '1.1.1' 
    } 
} 
plugins { 
    ...     
    id 'org.jetbrains.kotlin.android' version '1.6.10' apply false 
} 

Configurez les informations suivantes dans le build.gradle de l'application correspondante modules :

android { 
    ... kotlinOptions { 
        jvmTarget = '1.8' 
    } buildFeatures { 
        compose true 
    } 
    composeOptions { 
        kotlinCompilerExtensionVersion compose_version 
    } 
} 
dépendances { 
    ... 
    implémentation "androidx.compose.ui:ui:$compose_version" 
    implémentation "androidx.compose.material: matériel:$compose_version" 
    implémentation "androidx.compose.ui:ui-tooling-preview:$compose_version" 
    androidTestImplementation "androidx.compose.ui:ui-test-junit4:$compose_version" 
    debugImplementation "androidx.compose.ui:ui-test -manifeste:$compose_version" 
}
   
    
    

     
    debugImplementation "androidx.compose.ui:ui-tooling :$compose_version"

3. Fonctions composables et fonctions prévisualisables

1. Fonctions composables

Ajoutez la fonction définie par l'annotation @Composable avant la fonction, et plusieurs fonctions composables sont imbriquées pour créer une interface.

L'annotation @Composable est utilisée pour informer le compilateur Compose de traiter cette fonction composable et ses données associées dans une interface.

Les fonctions composables n'ont pas de valeur de retour.

2. Fonctions de prévisualisation

La fonction prévisualisable est avant tout une fonction composable, mais l'annotation @Preview est ajoutée, indiquant que l'interface composée du code de la fonction de prévisualisation peut être affichée dans la vue Design d' Android Studio .

Par exemple:

@Composable
fun GreetingWithBox(name:String){
    Box(modifier= Modifier.fillMaxWidth()
         .padding(5.dp)){
        Text(text= "欢迎 $name ！",
                fontSize = 24.sp, 
                textAlign = TextAlign.Center)
    }
}
@Preview(showBackground = true)
@Composable
fun DefaultPreview() {
    GreetingWithBox("Android 世界")
}

4. Interface de construction d'échafaudages

@Composable 
fun Scaffold ( 
    modificateur : Modifier = Modifier, 
    scaffoldState : ScaffoldState = RememberScaffoldState(), 
    topBar : @Composable () -> Unit = {}, 
    bottomBar : @Composable () -> Unit = {}, 
    snackbarHost : @Composable ( SnackbarHostState) -> Unit = { SnackbarHost(it) }, 
    floatActionButton : @Composable () -> Unit = {}, 
    floatActionButtonPosition : FabPosition = FabPosition.End, 
    isFloatingActionButtonDocked : Boolean = false, 
    DrawerContent : @Composable (ColumnScope.() - > Unit)? = null, 
    DrawerGesturesEnabled : Boolean = true, 
    DrawerShape : Shape = MaterialTheme.shapes.large, 
    DrawerElevation : Dp = DrawerDefaults.Elevation,
    DrawerBackgroundColor : Couleur = MaterialTheme.colors.surface, 
    DrawerContentColor : Couleur = contentColorFor (drawerBackgroundColor), 
    DrawerScrimColor : Couleur = DrawerDefaults.scrimColor, 
    backgroundColor : Couleur = MaterialTheme.colors.background, 
    contentColor : Couleur = contentColorFor (backgroundColor), 
    contenu : @Composable (PaddingValues) -> Unité 
) { 
    ... 
}

5. Modificateur modificateur

Le modificateur Modifier sert d'outil pour configurer les propriétés des composants. Modifier appelle la fonction configurée par la propriété et renvoie toujours l'objet Modifier , afin que l' objet Modifier puisse être appelé en continu.

les références

Tutoriel Android Compose | Développeurs Android | Développeurs Android https://developer.android.google.cn/jetpack/compose/tutorial?hl=zh-cn