Jetpack Compose 初體驗

1、緣起

還記得第一次據說Jetpack Compose是在今年9月初在上海舉辦的Google開發者大會上,當時還拍照想着回家以後查下這是什麼新技術，看起來感受很厲害的樣子。

由於以前我很關注Jetpack的全部組件，當時心想爲何歷來沒有聽過這個組件？

後面查閱資源也確實Google並無發佈出來，甚至那個時候官網都查不到任何資料，更別說有alpha版本了。

就在前幾天官網上線了Jetpack Compose的最新動態。沒錯，咱們終於能夠當第一批吃螃蟹的人了，衝鴨！！！

2、Jetpack Compose 介紹

在開始使用以前咱們先簡單看下官網對Jetpack Compose的簡單介紹。

Jetpack Compose是一個現代工具包，旨在簡化UI開發。它結合了響應式編程模型和Kotlin編程語言的簡潔性和易用性。它是徹底聲明性的，它容許經過調用可組合函數來描述UI。而後，框架在後臺進行UI優化，當基礎狀態發生變化時，該框架會自動爲您更新視圖層次結構。

Google推出Jetpack Compose其主要仍是爲了簡化開發者的UI開發。Jetpack Compose提供了一系列的函數能夠實現以往咱們經過layout佈局實現的頁面。簡單看下官網的代碼示例：

@Composable
fun NewsStory() {
    val image = +imageResource(R.drawable.header)

    Column(
        crossAxisSize = LayoutSize.Expand,
        modifier=Spacing(16.dp)
        ) {
        Container(expanded = true, height = 180.dp) {
            DrawImage(image)
        }

        Text("A day in Shark Fin Cove")
        Text("Davenport, California")
        Text("December 2018")
    }
}
複製代碼

運行效果：

能夠看出實現的代碼仍是挺簡潔的。並且這個寫法和函數控件名跟Flutter都及其類似，Column縱向佈局命名和屬性crossAxisSize都如出一轍，果真是一個爹生的🤣。

3、如何體驗Jetpack Compose

目前Jetpack Compose只在Android Studio 4.0預覽版提供，猜想是由於Jetpack Compose須要編譯器生成一些代碼配合使用。Android Studio 4.0預覽版能夠經過官網預覽版下載。可是有一個坑須要注意，不知道什麼緣由網站語音爲中文環境，點擊下載按鈕無響應，嘗試了不少次以後都無果。最後偶然發現經過網頁的右上角語言切換成English就能夠正常下載了，不懂Google這是什麼操做。

下載完成以後正常打開Android Studio 4.0便可，點擊Start a New Android Studio Project,到下圖這個頁面。默認是選擇Empty Activity的，咱們須要手動選擇Empty Compose Activity，而後就是無腦下一步下一步了，有一點須要注意因爲Jetpack Compose不適用於較低的SDK版本，所以請確保minimumSdkVersion至少爲21。

項目新建完成以後進入須要下載最新的gradle-wrapper,有些老哥可能經過AS下載gradle很慢，能夠經過去Gradle下載手動下載到本地，而後參考Android Studio中手動下載gradle配置下就ok了，以後就能夠愉快的體驗Jetpack Compose了。

溜了溜了，我繼續去探索Jetpack Compose了，老哥們也能夠上車了。後續會出一些Demo講解實際運用。

參考

Jetpack Compose Basics