Jetpack Compose之学习前的准备~_compose 郭霖，2024年最新HarmonyOS鸿蒙嵌入式开发_嵌入式

targetsdk 33 //最高版本33

buildscript {
ext {
compose_version = ‘1.4.3’ //compose版本
}
}// top-level build file where you can add configuration options common to all sub-projects/modules.
plugins {
id ‘com.android.application’ version ‘7.2.2’ apply false
id ‘com.android.library’ version ‘7.2.2’ apply false
id ‘org.jetbrains.kotlin.android’ version ‘1.8.10’ apply false //kotlin版本
}

//gradle版本(如下图)
7.3.3

为什么把这个列出来呢？因为compose、kotlin、gradle有版本对应关系（不是必须一一对应），如果碰到新工程编译报错，去网上查查它们的版本关系。

新创建的工程首先映入眼帘的就是mainactivity，它的结构跟传统项目的结构很不一样，如下：

class mainactivity : componentactivity() {
override fun oncreate(savedinstancestate: bundle?) {
super.oncreate(savedinstancestate)
setcontent {
testcomposetheme {
// a surface container using the ‘background’ color from the theme
surface(
modifier = modifier.fillmaxsize(),
color = materialtheme.colors.background
) {
greeting(“android”)
}
}
}
}
}

@composable
fun greeting(name: string) {
text(text = “hello $name!”)
}

@preview(showbackground = true)
@composable
fun defaultpreview() {
testcomposetheme {
greeting(“android”)
}
}

setcontentview(r.layout.activity_main)没有了，取而代之的是setcontent{}，直呼看不懂…

运行程序，界面显示如下，在左上角显示了hello android!：

三、compose的mainactivity里面都有什么

1、compose的ui是kotlin dsl风格的

用xml写布局，ui就是一个个view组成的，而用compose写布局，ui都是一个个kotlin dsl风格的函数组成的。这一点与之前相比完全颠覆了，需要在思维上做转变。

2、composable注解

在上面mainactivity的代码中截取一段

@composable <---------注解
fun greeting(name: string) {
text(text = “hello $name!”)
}

ui是函数，普通方法也是函数，那系统怎么知道哪些函数是要绘制到页面上的ui呢？答案就是添加了@composable注解的函数就是需要绘制到界面上的函数。

3、composable函数只能在composable函数中调用

需要注意的是composable函数只能在composable函数中调用，还是看上面那段代码

@composable
fun greeting(name: string) {
text(text = “hello $name!”) <---------这里
}

看下text函数（相当于xml中的textview）的源码

@composable
fun text(
…
) {…}

text函数确实也有@composable注解。compose ui组件都是顶级函数，可以在任意位置调用。

既然composable函数只能在composable函数中调用，那根composable在哪里呢？这个根composable实际上就是setcontent提供的，看下setcontent的源码：

public fun componentactivity.setcontent(
parent: compositioncontext? = null,
content: @composable () -> unit <---------这里
) {
…
}

根composable下面第一个composable注解函数是testcomposetheme，这个theme是android系统根据project工程名称自动生成的，我这个工程名称叫testcompose，所以theme就叫testcomposetheme，并不是android系统提供的api，它是为界面提供的默认主题，内部子组件都继承其主题样式：

class mainactivity : componentactivity() {
override fun oncreate(savedinstancestate: bundle?) {
super.oncreate(savedinstancestate)
setcontent {
testcomposetheme { <--------这里
…
}
}
}
}

@composable
fun testcomposetheme(darktheme: boolean = issystemindarktheme(), content: @composable () -> unit) {
…
}