像寫Flutter一樣開發Android原生應用
阿新 • • 發佈：2020-07-17
要問到Flutter和Android原生App，在開發是有何區別，程式設計方式是繞不開的話題。Flutter採用宣告式程式設計，Android原生開發則採用指令式程式設計。
## 宣告式程式設計 VS. 指令式程式設計
我們首先要明確的，是何為宣告式程式設計，何為指令式程式設計。
### 何為宣告式程式設計
摘錄一段來自百度百科的定義：
> 宣告式程式設計通常被定義為除命令式以外的程式設計正規化。同時存在一些其他的定義，這些定義不是簡單的將宣告式程式設計和指令式程式設計做對比，例如：
> - 宣告式程式設計是告訴計算機需要計算“什麼”而不是“如何”去計算；
> - 任何沒有副作用的程式語言，或者更確切一點，任何引用透明的程式語言；
> - 任何有嚴格計算邏輯的程式語言。
>
> 這些定義有一些是重合的。
簡單地理解：宣告式程式設計就是告訴“機器”你想要的是什麼，讓機器想出如何去做。
### 何為指令式程式設計
依舊先看它的定義（來自百度百科）：
> 指令式程式設計（英語：Imperative programming），是一種描述計算機所需作出的行為的程式設計典範。幾乎所有計算機的硬體工作都是命令式的；幾乎所有計算機的硬體都是設計來執行機器碼，使用命令式的風格來寫的。
簡單地理解：指令式程式設計就是需要我們命令“機器”如何去做事情(how)，這樣不管你想要的是什麼(what)，它都會按照你的命令實現。
### 舉例說明
舉個例子，看下面兩種解決問題的方法：
方法一：
```
蔬菜.做成菜(蔬菜沙拉)
```
方法二：
```
洗乾淨(蔬菜)
混合(蔬菜, 沙拉)
放入盤中(混合物)
```
你能分清哪一種方法是何種程式設計方式嗎？很明顯，方法一是宣告式，方法二是命令式。
但是，儘管上面兩種方法看上去有所區別，但本質上做的事情仍然是一致的。
我們看到方法一雖然沒有像方法二那樣實實在在地“做事”，實際上是將方法二中的步驟整合在了“做成菜”的函式中。在實際編碼時，我們在開發這部分功能時，就可以完全不用關心做菜的具體過程了。這樣看上去更清晰，維護起來也更靈活。
## Jetpack Compose
我們若想使用宣告式程式設計來開發原生Android App，需要藉助Jetpack Compose元件。該元件目前在測試版的Android Studio中支援。
### 必備的開發工具
如前文所述，我們需要安裝測試版的Android Studio（Canary Build）。下載地址如下：
[https://developer.android.google.cn/studio/preview](https://developer.android.google.cn/studio/preview)
當然，測試版的Android Studio依然可以在Mac、Windows和Linux上執行，且可以和正式版本使用同一套SDK，本文采用Mac版配合模擬器進行演示。
### 建立帶有Compose支援的工程
安裝好Canary Build的測試版Android Studio後，新建一個專案，在新建專案嚮導中，選擇Empty Compose Activity。
要注意的是，要使用Compose特性，需要至少API Level 21以上的SDK支援，且只能使用Kotlin語言。
### 探索程式碼
如上方法建立好Android工程後，開啟MainActivity.kt，可以看到一個介面預覽視窗。在之前的版本中，這樣的預覽視窗好像只在xml編輯器檢視中出現過。
接下來我們閱讀預設存在的程式碼，可以發現這其實是一個Hello World專案。
下面我們來嘗試使用下面的程式碼片段修改原有程式碼：
```
class MainActivity : AppCompatActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContent {
HelloComposeTheme {
Greeting();
}
}
}
}
@Composable
fun Greeting() {
MaterialTheme() {
Column {
Image(asset = imageResource(id = R.drawable.header))
Text(text = "第一行")
Text(text = "第二行")
Text(text = "第三行")
}
}
}
```
然後重新Build，觀察右側的預覽介面（header為png或jpg格式圖片）。
如上圖所示，在下一版本的Android Studio中，結合Compose特性使用，可以實現更加便利的介面預覽。
接下來我們觀察Greeting()方法中的程式碼，是不是感覺似曾相識？
如果你有了解過Flutter，不難發現，這樣的寫法其實和Flutter中的UI程式設計方法是一致的。
## 總結
好了，乾貨部分到此結束，最後提醒大家，由於該特性目前尚未作為正式版釋出，所以不建議大家在生產環境中大量使用。
祝各位工作順利，產品沒Bug，寫程式碼一次過。