Android JetPack Compose Preliminar 1

1. ¿Por qué utilizar JetPack Compose?

1. Problemas con la jerarquía de vistas de Android

Debido a que el estado de su aplicación cambia debido a factores como la interacción del usuario, es necesario actualizar la jerarquía de la interfaz para mostrar los datos actuales. El estado interno del widget cambia al actualizar. La manipulación manual de las vistas aumenta la probabilidad de errores. Y la complejidad del mantenimiento del software aumentará a medida que aumente el estado de los componentes actualizados de la interfaz de usuario.

2.Cómo procesar JetPack Compose

Compose es un marco de interfaz declarativo. El modelo de interfaz declarativa funciona regenerando conceptualmente toda la pantalla desde cero y luego realizando solo los cambios necesarios. Este enfoque evita la complejidad de actualizar manualmente las jerarquías de vistas con estado. Simplifica enormemente la construcción de la interfaz de usuario y la actualización de estado.

2. Redactar configuración

Configure la siguiente información en build.gradle en el proyecto de nivel superior:

buildscript { 
    text { 
        compose_version = '1.1.1' 
    } 
} 
complementos { 
    ...     
    id 'org.jetbrains.kotlin.android' versión '1.6.10' apply false 
} 

Configure la siguiente información en build.gradle de la aplicación correspondiente módulo:

android { 
    ... kotlinOptions { 
        jvmTarget = '1.8' 
    } buildFeatures { 
        componer verdadero 
    } 
    composeOptions { 
        kotlinCompilerExtensionVersion compose_version 
    } 
} 
dependencias { 
    ... 
    implementación "androidx.compose.ui:ui:$compose_version" 
    implementación "androidx.compose.material: material:$compose_version" 
    implementación "androidx.compose.ui:ui-tooling-preview:$compose_version" 
    androidTestImplementation "androidx.compose.ui:ui-test-junit4:$compose_version" 
    debugImplementation "androidx.compose.ui:ui-test -manifiesto:$compose_version" 
}
   
    
    

     
    debugImplementation "androidx.compose.ui:ui-tooling :$componer_versión"

3. Funciones componibles y funciones previsualizables

1. Funciones componibles

Agregue la función definida por la anotación @Composable antes de la función y se anidarán varias funciones componibles para crear una interfaz.

La anotación @Composable se utiliza para notificar al compilador de Compose que procese esta función componible y sus datos relacionados en una interfaz.

Las funciones componibles no tienen valor de retorno.

2. Funciones de vista previa

La función de vista previa es, en primer lugar, una función que se puede componer, pero se agrega la anotación @Preview, lo que indica que la interfaz compuesta por el código de la función de vista previa se puede mostrar en la vista Diseño de Android Studio .

Por ejemplo:

@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. Interfaz de construcción de andamios

@Composable 
fun Scaffold( 
    modificador: Modificador = Modificador, 
    scaffoldState: ScaffoldState = recordarScaffoldState(), 
    topBar: @Composable () -> Unidad = {}, 
    bottomBar: @Composable () -> Unidad = {}, 
    snackbarHost: @Composable ( SnackbarHostState) -> Unidad = { SnackbarHost(it) }, 
    flotanteActionButton: @Composable () -> Unidad = {}, 
    flotanteActionButtonPosition: FabPosition = FabPosition.End, 
    isFloatingActionButtonDocked: Boolean = false, 
    DrawerContent: @Composable (ColumnScope.() - > ¿Unidad)? = nulo, 
    DrawerGesturesEnabled: booleano = verdadero, 
    DrawerShape: Shape = MaterialTheme.shapes.large, 
    DrawerElevation: Dp = DrawerDefaults.Elevation,
    cajónBackgroundColor: Color = MaterialTheme.colors.surface, 
    cajónContentColor: Color = contentColorFor(drawerBackgroundColor), 
    cajónScrimColor: Color = DrawerDefaults.scrimColor, 
    fondoColor: Color = MaterialTheme.colors.fondo, 
    contentColor: Color = contentColorFor(fondoColor), 
    contenido: @Composable (PaddingValues) -> Unidad 
) { 
    ... 
}

5. Modificador modificador

El modificador Modificador sirve como herramienta para configurar las propiedades del componente. Modifier llama a la función configurada por la propiedad y aún devuelve el objeto Modifier , por lo que el objeto Modifier se puede llamar continuamente.

referencias

Tutorial de redacción de Android | Desarrolladores de Android | Desarrolladores de Android https://developer.android.google.cn/jetpack/compose/tutorial?hl=zh-cn