Jetpack Compose开篇之 HelloWorld

2021-10-31 00:35:31

前言

此前我更新了Jetpack Architecture系列的文章，如果你还不了解Jetpack，可以移步至 Android JetPack系列文章，持续更新中

从即日起，我将开始持续更新Jetpack Compose系列的文章，Compose将会是原生开发的下一个重大改变！

Jetpack Compose是什么

Jetpack Compose 是用于构建原生 Android 界面的新工具包。它基于声明性编程模型，因此您只需描述界面的外观，Compose 会负责完成其余工作，界面会随着应用状态的变化而自动更新。

上述是官方的描述，简单的说，在此之前，我们如何实现一个功能？我们是在Activity中编写Java/Kotlin的代码，在xml中编写布局代码，这种方式是我们已经使用了很久的方式，而Jetpack Compose完全抛弃了之前的方式，新创造了一种“使用代码”编写页面的方式，而这种方式，有一个好听的名字，叫做声明式UI。

Flutter VS Jetpack Compose

说到声明式UI，你肯定想到了最近“热火朝天”的 Flutter技术，号称跨各种平台，和Android比优势****，很多人不仅喜欢将Flutter和Jetpack Compose相比，更喜欢和Android相比，并得出了一些结论，那些结论我不去评判对错，我也没有资格去评判，但是如果你问我，一个Android开发者 Flutter、Jetpack Compose或者Android 我该怎么选，我觉得这两种东西根本没有任何可比较性，因为根本就不是一个东西，对于个人选择可以分下面两种情况考虑：

1、公司无跨平台业务需求

如果你的公司无跨平台业务需求，除了跳槽到有Flutter需求的公司，学习Flutter的意义并不大，你可能会反驳说，技多不压身，我不赞同但我也不反驳，但你要知道的是公司是以业务为导向的，你会的再多，所谓一身才华无处施展便也无济于事。

2、公司新增跨平台业务需求

如果你的公司新增了跨平台的业务需求，需要你不得不去学习Flutter，这个时候你要知道的是，从Android转到了Flutter相当于转行，如果你看好公司的发展并打算长久战斗，你就可以去学习并且用在公司业务中，如果你不看好公司的发展或者不想转行，那么只有删库跑路了~

而Compose是Google近两年的大动作之一，如果你想坚持在Android开发的道路上，那么学习或了解Compose定是必不可少的，只是或早或晚的问题。

Jetpack Compose HelloWorld

新建项目

使用Compose我们需要下载Android studio4.2的最新预览版本，我们可以直接新建一个Compose项目，也可以在已有项目中添加配置，这里我们来直接新建一个项目

我们选择新建一个空的Compose Activity项目，依次输入项目位置、填写包名即可。

我们先来运行一下生成项目的默认效果，效果如下图所示：

项目配置

新建成功后，我们首先来看一下build.gradle中几个比较特殊的配置，这也是我们在已经项目中添加Compose所需要配置的

defaultConfig {
        minSdkVersion 21
    }
    buildFeatures {
        // 开启compose
        compose true
    }
    
   //设置编译版本为1.8
   compileOptions {
        sourceCompatibility JavaVersion.VERSION_1_8
        targetCompatibility JavaVersion.VERSION_1_8
    }
    kotlinOptions {
        jvmTarget = "1.8"
        useIR = true
    }
    composeOptions {
        kotlinCompilerVersion '1.4.0'
        kotlinCompilerExtensionVersion '1.0.0-alpha05'
    }
}
//compose 工具包
dependencies {
    implementation 'androidx.compose.ui:ui:1.0.0-alpha05'
    implementation 'androidx.ui:ui-tooling:1.0.0-alpha05'
    implementation 'androidx.compose.foundation:foundation:1.0.0-alpha05'
    implementation 'androidx.compose.material:material:1.0.0-alpha05'
    implementation 'androidx.compose.material:material-icons-core:1.0.0-alpha05'
    implementation 'androidx.compose.material:material-icons-extended:1.0.0-alpha05'
    implementation 'androidx.compose.runtime:runtime-livedata:1.0.0-alpha05'
    implementation 'androidx.compose.runtime:runtime-rxjava2:1.0.0-alpha05'
    androidTestImplementation 'androidx.ui:ui-test:1.0.0-alpha05'
}

这里我们使用的compose版本为05版本，compose支持的最低版本是Api 21，所以我们设置最低版本为21.

MainActivity代码

接下来我们来看MainActivity默认生成的代码

class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            ConposeSimpleTheme {
                // A surface container using the 'background' color from the theme
                Surface(color = MaterialTheme.colors.background) {
                    Greeting("Android")
                }
            }
        }
    }
}
@Composable
fun Greeting(name: String) {
    Text(text = "Hello $name!")
}
@Preview(showBackground = true)
@Composable
fun DefaultPreview() {
    ConposeSimpleTheme {
        Greeting("Android")
    }
}

在compose中，所有的组合函数都要使用@Composable注解，conposable注释可告知 Compose 编译器，此函数需要转化为页面显示，并且和协程中suspend函数一样，只能在compose注解函数中调用另外一个compose注解函数，@Preview注解是方便开发者在不运行的前提下可预览效果，也就是说DefaultPreview这个函数是开发者自己用的，onCreate中setContent包含的是页面的内容，主题这里我们先忽略，后面再讲解。

Greeting这个函数中，接收一个string类型的name参数，并显示在Text上，这里要注意的是这里的Text组件和原生的TextView并没有关系，同样的方法我们自定来定义一个HelloWorld，代码如下所示：

setContent {
    Greeting("Android")
    HelloWorld()
}

@Composable
fun HelloWorld() {
    Text(text = "Hello World!")
}

运行结果如下所示：

这里两个Text重叠了，显然不是我们想要的结果，那么如果我们想让文字垂直或者水平排列改如何去做呢。

垂直或水平布局

垂直排列我们可以使用Column布局将组合函数包裹起来，修改setContent的代码如下所示：

setContent {
    Column {
        Greeting("Android")
        HelloWorld()
    }
}

运行结果如下图所示：

水平排列，我们只需要将Column修改为Row即可，代码如下所示：

setContent {
    Row {
        Greeting("Android")
        HelloWorld()
    }
}