#Compose 的程式設計概念

Jetpack Compose 是適用於 Android 的新型宣告式 UI 工具包。Compose 提供「宣告式 API」，允許算繪應用程式 UI，而不需要強制變更前端檢視區塊，讓您輕鬆撰寫及維護應用程式 UI。

1. 宣告式程式設計範例 The declarative programming paradigm
2. 簡易的可組合函式 A simple composable function
3. 重組程序 Recomposition
4. 可組合函式能以任何順序執行 Composable functions can execute in any order

宣告式程式設計範例 The declarative programming paradigm

在指令式编程（Imperative）更新 UI大都使用 findViewById()的函式來找查結構的元件，在呼叫text.setText(String) 、 Image.setImageResource(xxx)和view.addview(view)等方式來變化UI,但也就是繁雜的控制下也常常顯示出錯。
那在宣告式程式設計（Declarative），就只要宣告 UI元件和變數，畫面就會依變數的變動自動更新。

**舉個打籃球的例子:
教練只有告訴球員打23聯防，叫我去防守curry，當curry投球，我一定會上前跳起來蓋火鍋。
不可能教練一直在下命令 curry要投球了，快蓋火鍋，不下指令，就呆呆站著吧。 **

簡易的可組合函式 A simple composable function

• 加上@Composable 註解，宣告這個是一個可組合函式(composable function)
• 可組合函式的變數名稱是name，型態是String
• 使用一個Text() 可組合函式，來顯示文字
• Compose 函式不必傳回任何內容，修改顯示也只要修改可組合函式的變數name，就會改變

@Composable
fun Greeting(name: String) {
    Text(text = "Hello $name!")
}

重組程序 Recomposition

在Compose 中，有新的資料或事件再次呼叫可組合函式，就叫作「重組」。

@Composable
fun Greeting(msg: Message) {
    ...
        var isExpanded by remember { mutableStateOf(false) }

        // surfaceColor will be updated gradually from one color to the other
        val surfaceColor by animateColorAsState(
            if (isExpanded) MaterialTheme.colors.primary else MaterialTheme.colors.surface,
        )

        //新增 Column 列
        // We toggle the isExpanded variable when we click on this Column
        //click事件
        Column(modifier = Modifier.clickable { isExpanded = !isExpanded }) {
            Text(
                text = "Hello $msg.author!",
                color = MaterialTheme.colors.secondaryVariant,
                style = MaterialTheme.typography.subtitle2
            )
      ...
}

可組合函式能以任何順序執行 Composable functions can execute in any order

大家看到程式可能會以為是按順序的執行的，但實際上並不是，Composable函式是可任意順序執行的，所以要確保每個函式都可以獨立運行不要相依。

@Composable
fun ButtonRow() {
    MyFancyNavigation {
        FristScreen()
        SecondScreen()
        ThirdScreen()
    }
}

先簡單建立一些概念，等後面實作多一點再來補充，不然現在講一堆沒有感覺呀!!

參考:

https://developer.android.com/jetpack/compose/mental-model