引入 Jetpack Compose 示例工程

去GitHub上找到Compose的示例工程 https://github.com/android/compose-samples ，clone到本地

网络不好的同学也可以去gitee上面搜索「compose-samples」，也能找到这个示例工程。

我的AndroidStudio（后文简称“as”）是4.1.1。示例工程要求Android Studio Arctic Fox。升级一下as。

版本说明

在以前的编号系统中，此版本应为 Android Studio 4.3 或 4.3.0.1。采用全新的编号系统后，现在版本为 Android Studio - Arctic Fox | 2020.3.1 或 2020.3.1。

升级到 Arctic Fox

用4.1.1打开会报错

This version of the Android Support plugin for IntelliJ IDEA (or Android Studio) cannot open this project, please retry with version 2020.3.1 or newer.

示例工程效果图

仓库里有多个示例工程，下面我们先看JetNews示例。

JetNews

as打开JetNews目录，可能会下载gradle-7.1.1-bin.zip或gradle-7.1.1-all.zip，会耗费一些时间。
gradle下载完毕后，还会下载很多库，也需要时间。

gradle跑完后，运行一下报错Android Gradle plugin requires Java 11 to run

Build file '/Users/rustfisher/Desktop/ws/androidProjects/compose-samples/JetNews/app/build.gradle' line: 18

An exception occurred applying plugin request [id: 'com.android.application']
> Failed to apply plugin 'com.android.internal.application'.
> Android Gradle plugin requires Java 11 to run. You are currently using Java 1.8.
    You can try some of the following options:
    - changing the IDE settings.
    - changing the JAVA_HOME environment variable.
    - changing `org.gradle.java.home` in `gradle.properties`.

更改as的设置 Preferences > Build, Execution, Deployment > Build Tools > Gradle > Gradle JDK。
Gradle JDK选择使用as带的 Java 11

修改成as自带的11，重启一次as。再尝试运行工程。

运行效果

注意

修改这个地方有可能造成其他旧工程编译出错

gradle

观察一下gradle。

项目的gradle

buildscript {
    ext.kotlin_version = '1.5.31'
    ext.compose_version = '1.1.0-beta01'
    ext.coroutines_version = '1.5.2'
    ext.accompanist_version = '0.21.0-beta'
}

定义了多种库的版本

模块gradle

plugins {
    id 'com.android.application'
    id 'kotlin-android'
}

plugins之前写成apply plugin: 'com.android.application'

dependencies里也引用了多个androidx.compose的依赖

activity

manifest中仅仅注册了一个MainActivity

class MainActivity : AppCompatActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        WindowCompat.setDecorFitsSystemWindows(window, false)

        val appContainer = (application as JetnewsApplication).container
        setContent {
            val windowSizeClass = rememberWindowSizeClass()
            JetnewsApp(appContainer, windowSizeClass)
        }
    }
}

这里使用到JetnewsApplication与JetnewsApp

AppContainer

从设计上来说，AppContainer给应用提供数据仓库，统一了数据来源。

// AppContainerImpl.kt
interface AppContainer {
    val postsRepository: PostsRepository
    val interestsRepository: InterestsRepository
}

AppContainerImpl是数据实现类，提供了具体的数据仓库

class AppContainerImpl(private val applicationContext: Context) : AppContainer {

    override val postsRepository: PostsRepository by lazy {
        FakePostsRepository() // 模拟数据
    }

    override val interestsRepository: InterestsRepository by lazy {
        FakeInterestsRepository() // 模拟数据
    }
}

JetnewsApp

JetnewsApp是一个方法，定义在JetnewsApp.kt里。它需要2个参数。

@Composable
fun JetnewsApp(
    appContainer: AppContainer, // 数据仓库
    windowSize: WindowSize // 屏幕尺寸类型
)   {
    JetnewsTheme {
        ProvideWindowInsets { }
    }
}

方法中调用JetnewsTheme方法，其中使用了MaterialTheme

在ProvideWindowInsets中，使用了各UI组件，把主界面定义好了，其中包括侧滑抽屉

如此一层套一层，构成了app的入口界面。

代码风格上，compose，flutter，swift UI 这三者非常接近。

ui

对于ui组件，可以在as中使用预览功能

右边能预览亮和暗两种风格

注意左边代码中的@Preview注解，控制着右边的预览画面

@Preview("Post content")
@Preview("Post content (dark)", uiMode = UI_MODE_NIGHT_YES)
@Composable
fun PreviewPost() {
    JetnewsTheme {
        Surface {
            PostContent(post = post3)
        }
    }
}

• @Preview("Post content")里的字符串是预览的名字，显示在相应的预览上方
• uiMode设定模式，默认是UI_MODE_TYPE_UNDEFINED，这里是明亮
  • 设置为UI_MODE_NIGHT_YES 即暗色风格
  • 风格定义在UiMode中
• PostContent是实际工作的代码，传入的post3是本地预置的测试内容
  • post3在PostsData.kt中，里面还有更多的模拟内容

我们可以注意到很多@Composable注解。

调用 Jetpack Compose 函数来声明想要的元素，Compose 编译器即会完成后面的所有工作。

参考

android-studio-2020.3.1.24-mac.dmg 链接: https://pan.baidu.com/s/1yGfUjSn6LcUyJiBb2cEfRQ 提取码: hcbp

• 将 Android Studio 与 Jetpack Compose 配合使用
• Android Studio 版本说明