Jetpack Compose 基础 | 混个脸熟篇

工具

由于 Jetpack Compose 目前还没有出正式版，所以要想开发体验，需要下载最新 Canary 版的 Android Studio 预览版。

创建新项目

打开最新 Canary 版的 Android studio 预览版，创建一个新项目，你会发现创建新项目模板有一个 Empty Compose Activity 的模板，选择它创建一个项目就可以体验 Jetpack Compose 了。

项目创建好了，先不着急开发，先看看配置，是如何让项目支持 Jetpack Compose 开发的，以便以后我们把 Jetpack Compose 添加到以前的项目中去。

Jetpack Compose 是基于kotlin语言开发的框架，那么你的项目至少要确保支持 kotlin，如果你的项目还不支持，请查看官网教程将 Kotlin 添加到现有应用自行配置。( 😲 啥，都2021年了项目还不支持 kotlin 😝 )。
打开项目的 app/build.gradle 文件，关于 Jetpack Compose 的相关配置如下

android {
    defaultConfig {
       // ...
        // Jetpack Compose 最小支持版本 21 
        minSdkVersion 21
    }

    buildFeatures {
        // 此 module 启动 Jetpack Compose
        compose true
    }
    //...

    //kotlin 相关参数配置
    kotlinOptions {
        jvmTarget = "1.8"
        // 0️⃣ 启用新的 jvm IR 
        useIR = true
    }

    // Jetpack compose 相关参数配置
    composeOptions {
        //kotlin 额外编译版本 和Jetpack Compose 版本一致
        kotlinCompilerExtensionVersion compose_version
        //kotlin编译版本，要1.4及以上
        kotlinCompilerVersion kotlin_version
    }
}


dependencies {
   //	...
    // Jetpack compose 相关依赖
    // 基础组件
    implementation "androidx.compose.ui:ui:$compose_version"
    // Material Design 组件相关实现
    implementation "androidx.compose.material:material:$compose_version"
    // ui相关工具，比如视图预览
    implementation "androidx.compose.ui:ui-tooling:$compose_version"
}

打开 MainActivity.kt 文件，如果编译顺利的话，你应该看到类似下面的样子

**① ** 刷新视图，当代码发生变化是，点击它可以刷新视图 **② **进行交互模式，比如视图上有个按钮，就可以不用运行直接点击并作出对应的响应。 **③ 和 ④ **可以把当前视图直接部署到设备上看效果，这个还是挺方便的。更多关于布局预览工具的使用，可以查看官网上关于此内容的介绍 https://developer.android.google.cn/jetpack/compose/preview

在 Jetpack Compose 作为构建原生界面的工具包，我们还是用 Activity/Fragment 来加载视图，在以前 XML 布局模式下，Activity 关联视图使用 setContentView() 函数。在 Jetpack Compose 中加载关联视图使用 setContent 函数，如下所示

   override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            //添加一个 Jetpack Compose 视图
             Greeting("Android")
        }
   }

在以前 View 视图模式下，我们编写视图都是在 XML 文件中去书写，在 Jetpack Compose 中我们都用被加上 @Composable 注解的 kotlin 函数来构建界面，如下代码所示

@Composable
fun Greeting(name: String) {
    Text(text = "Hello $name!")
}

上面创建的 Jetpack Compose 项目实例中就用到 Text 这个组件，在 Jetpack Compose 所有的组件都是可以组合函数，所以Text 也不例外，源码如下

@Composable
fun Text(
    text: String,//显示的内容
    modifier: Modifier = Modifier, // 关于布局的设置
    color: Color = Color.Unspecified,// 文字颜色
    fontSize: TextUnit = TextUnit.Unspecified,//文字大小
    fontStyle: FontStyle? = null, //文字风格
    fontWeight: FontWeight? = null,//文字粗细
    fontFamily: FontFamily? = null, //字体风格
    letterSpacing: TextUnit = TextUnit.Unspecified,//字间距
    textDecoration: TextDecoration? = null,//文字装饰、比如下划线
    textAlign: TextAlign? = null,//对齐方式
    lineHeight: TextUnit = TextUnit.Unspecified,//行高
    overflow: TextOverflow = TextOverflow.Clip,// 文字显示不完的处理方式
    softWrap: Boolean = true,// 文本是否应在换行符处中断,对中文没啥用
    maxLines: Int = Int.MAX_VALUE,//最大行数
    onTextLayout: (TextLayoutResult) -> Unit = {},
    style: TextStyle = AmbientTextStyle.current
) {
	......
}

我们需要设置个性化 Text 组件，只要传入对应的参数就行了，和 XML 添加对应属性差不多。

比如吧文字改成蓝色

@Composable
fun TestText(){
    Text(text = "Hello Android",color= Color.Blue)
}

想看效果就在setContent调用此函数，或者在预览函数中调用

class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            //将视图添加到Acitivity
            TestText()
        }
    }   
}


  @Preview(showBackground = true)
  @Composable
  fun DefaultPreview() {
     TestText()
  }

预览效果

@Composable
fun Button(
    onClick: () -> Unit,// 按钮的点击事件
    modifier: Modifier = Modifier,
    enabled: Boolean = true, //是否启用
    interactionState: InteractionState = remember { InteractionState() },
    elevation: ButtonElevation? = ButtonDefaults.elevation(),//海拔
    shape: Shape = MaterialTheme.shapes.small,//形状
    border: BorderStroke? = null,//边框
    colors: ButtonColors = ButtonDefaults.buttonColors(),//颜色
    contentPadding: PaddingValues = ButtonDefaults.ContentPadding,//内边距
    content: @Composable RowScope.() -> Unit //内容
) { ...... }

这个 Button 组件点击事件 onClick 和内容 content 是必填参数外，好像没有设置 Button 文字的参数。这和我们以前在 XML 构建视图不太一样。那么我们怎么让 Button 显示文字呢？我们在content 添加一个Text组件就可以了。

@Composable
fun TestButton() {
    Button(onClick = { }) {
        Text(text = "button")
    }
}

如果我们让Button显示图片，那么我们就把 Text 换成 Image 就行了。Jetpack Compose 给我提供了简单Button、Text、Image 组件(组合函数) 通过我们不同的组合方式就创造了一些新的组件。

改变Text的文本内容

@Composable
fun TestButton() {
    //声明一个可变状态值
    val  text =mutableStateOf("button")
    Button(onClick = { text.value = "我被点击了" /*改变值*/}) {
        Text(text = text.value/*使用值*/)
    }
}

Jetpack Compose 都是用 kotlin 函数，那么就可以用 kotlin 语法来构建界面了

@Composable
fun TestForView() {
    val names = listOf("knight", "Tom", "Jack","kk")
    Column {
        names.forEach { Text(text = it) }
    }
}

Column 是一种布局方式，让子级垂直顺序排列，这些子级我们现在直接用循环语法就可以了

预览效果

当然，如果条目多的话这样写就不合适了，我们可以把 Column 替换成 LazyColumn , LazyColumn 只会加载当前显示的条目和 RecyclerView 类似。它的用法也很简单，如下

    val names = listOf("knight", "Tom", "Jack", "kk")
    LazyColumn {
        items(names) { Text(text = it) }
    }

恭喜你完成本codelabs 的学习 🎉 🎉 🎉

本文叙述了如何搭建 Jetpack Compose 环境及工程，简单了解了一下 Jetpack Compose 是什么样子，学习了两个组件 Text 和 Button 。也看到了 Jetpack Compose 在 kotlin 的加持下如此的灵活。Jetpack Compose 作为 Android 新的界面工具包，功能还是挺丰富的。本文只能说和 Jetpack Compose 的初探，混个脸熟，关于什么是声明式？、布局如何构建、界面状态和数据如何处理等等，等以后我们在慢慢探讨。