Android JetPack Compose初步1

原创已于 2022-11-01 16:08:15 修改 · 330 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#android #android jetpack #Compose

于 2022-07-28 21:12:07 首次发布

Android 专栏收录该内容

12 篇文章

订阅专栏

本文探讨了为何在Android开发中选择JetPack Compose，其作为声明式界面框架的优势，如何配置项目并使用可组合函数和预览函数创建界面。重点讲解了Scaffold组件和Modifier修饰符，以及如何通过这些工具简化UI构建和状态管理。

一、为什么要使用JetPack Compose?

1.Android视图层次结构存在的问题

由于应用的状态会因用户交互等因素而发生变化，因此界面层次结构需要进行更新以显示当前数据。在更新时会改变 widget 的内部状态。手动操纵视图会提高出错的可能性。而且软件维护的复杂性会伴随更新UI组件的状态的增加而增加。

2.JetPack Compose的处理方式

Compose是一个声明性界面框架。声明性界面模型的工作原理是在概念上从头开始重新生成整个屏幕，然后仅执行必要的更改。此方法可避免手动更新有状态视图层次结构的复杂性。大大简化了UI界面的构建和状态的更新。

二、Compose的配置

在顶层项目中的build.gradle中配置如下信息：

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

在对应的应用模块的build.gradle中配置如下信息：

android {
    ...
    kotlinOptions {
        jvmTarget = '1.8'
    }
    buildFeatures {
        compose true
    }
    composeOptions {
        kotlinCompilerExtensionVersion compose_version
    }
    
}

dependencies {
    ...
    implementation "androidx.compose.ui:ui:$compose_version"
    implementation "androidx.compose.material:material:$compose_version"
    implementation "androidx.compose.ui:ui-tooling-preview:$compose_version"
    
    androidTestImplementation "androidx.compose.ui:ui-test-junit4:$compose_version"
    debugImplementation "androidx.compose.ui:ui-tooling:$compose_version"
    debugImplementation "androidx.compose.ui:ui-test-manifest:$compose_version"
}

三、可组合函数和可预览函数

1.可组合函数

在函数前增加@Composable注解定义的函数，多个可组合函数嵌套构建成一个界面。

@Composable注解的作用是通知Compose编译器将这个可组合函数及其相关的数据处理为一个界面。

可组合函数没有返回值。

2.可预览函数

可预览函数首先是可组合函数，但是增加了@Preview注解，表明可以在Android Studio的Design视图显示预览函数代码组成的界面。

例如：

@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 世界")
}

四、脚手架Scaffold构建界面

@Composable
fun Scaffold(
    modifier: Modifier = Modifier,
    scaffoldState: ScaffoldState = rememberScaffoldState(),
    topBar: @Composable () -> Unit = {},
    bottomBar: @Composable () -> Unit = {},
    snackbarHost: @Composable (SnackbarHostState) -> Unit = { SnackbarHost(it) },
    floatingActionButton: @Composable () -> Unit = {},
    floatingActionButtonPosition: FabPosition = FabPosition.End,
    isFloatingActionButtonDocked: Boolean = false,
    drawerContent: @Composable (ColumnScope.() -> Unit)? = null,
    drawerGesturesEnabled: Boolean = true,
    drawerShape: Shape = MaterialTheme.shapes.large,
    drawerElevation: Dp = DrawerDefaults.Elevation,
    drawerBackgroundColor: Color = MaterialTheme.colors.surface,
    drawerContentColor: Color = contentColorFor(drawerBackgroundColor),
    drawerScrimColor: Color = DrawerDefaults.scrimColor,
    backgroundColor: Color = MaterialTheme.colors.background,
    contentColor: Color = contentColorFor(backgroundColor),
    content: @Composable (PaddingValues) -> Unit
) {
    ...
}

五、Modifier修饰符

Modifier修饰符起到组件属性配置的工具。Modifier调用属性配置的函数，仍会返回Modifier对象，因此可以对Modifier对象进行连续调用。

参考文献

Android Compose 教程 | Android 开发者 | Android Developershttps://developer.android.google.cn/jetpack/compose/tutorial?hl=zh-cn