Jetpack Compose開篇 之 HelloWorld

前言

此前我更新了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()
    }
}

運行結果如下所示：

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