【保姆級教學】Jetpack Compose 開篇 之 HelloWorld（現在還有不懂Jetpack的移動開發嗎？） 進階學習 Jetpack Compose從入門到精通 最後

Jetpack 是一套庫、工具和指南，可幫助開發者更輕鬆地編寫優質應用，接下來我將持續分享 Jetpack 系列文章。和大家一起共同探討Jetpack的學習。
原文地址：https://blog.csdn.net/huangliniqng/article/details/109959466

前言

現在無論走到哪兒，如果Android開發者說自己不瞭解Jetpack，怕是會被人”鄙視“的看一眼。此前我更新過Jetpack Architecture系列的文章，如果你還不瞭解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()
    }
}

運行結果如下所示：

由此我們的Compose HelloWorld就完成了~

進階學習

Jetpack Compose從入門到精通

接下來，我將會給大家介紹一份2021年最新整理出來的《Jetpack Compose 完全開發手冊》，手把手教大家Jetpack Compose從入門到精通。

這份資料旨在給希望瞭解、學習、應用Android Jetpack Compose的小夥伴一個參考資料。

有需要的朋友可以看下方代碼塊，找我免費領取。

//wechat number:
study5233

資料詳情

第一章 初識 Jetpack Compose
1.1 爲什麼我們需要一個新的UI 工具？
1.2 Jetpack Compose的着重點
1.3 API 設計
1.4 Compose API 的原則
1.5 深入瞭解Compose
1.6 插槽API

第二章 Jetpack Compose構建Android UI
2.1Android Jetpack Compose 最全上手指南
2.2 深入詳解 Jetpack Compose | 優化 UI 構建
2.3 深入詳解 Jetpack Compose | 實現原理

第三章 Jetpack Compose 項目實戰演練（附Demo）
3.1 Jetpack Compose應用1
3.2 Jetpack Compose應用2
3.3 Jetpack Compose應用做一個倒計時器
3.4 用Jetpack Compose寫一個玩安卓App
3.5 用Compose Android 寫一個天氣應用
3.6 用Compose快速打造一個“電影App”

有需要的朋友可以【點擊此處】或者通過下方代碼塊找我免費領取。

//wechat number:
study5233

最後

希望這份資料給想要了解、學習、應用Android Jetpack Compose的小夥伴一個參考資料。