今天學什麼？

今天閱讀「適用於 Android 開發人員的 Jetpack Compose」第一章「Compose 基礎知識」的「編寫第一個 Compose 應用程式」，今天工作忙，看 1~7 小章就好

官方範例 GitHub

學習筆記

1. 使用Surface可以讓文字有背景色，把顏色指定使用MaterialTheme.colorScheme.primary會讓 Material Design 自動調整文字顏色

   Surface(color = MaterialTheme.colorScheme.primary) {
       Text(
           text = "Hello $name!",
           modifier = modifier
       )
   }
   

2. 大部份的 Compose UI 元件，都支援modifier
3. 使用Modifier.padding()增加間距

   Surface(color = MaterialTheme.colorScheme.primary) {
       Text(
           text = "Hello $name!",
           modifier = Modifier.padding(24.dp)
       )
   }
   

4. 如同之前的筆記，Column是直向排列，寫起來像這樣

   Surface(color = MaterialTheme.colorScheme.primary) {
       Column(modifier = Modifier.padding(24.dp)){
           Text(text = "Hello $name!",)
           Text(text = name,)
       }
   }
   

5. 也可以跑迴圈產生多個文字

   @Composable
   private fun MyApp(modifier: Modifier = Modifier, names: List<String> = listOf("Hello", "World")) {
       Surface(
           modifier = modifier,
           color = MaterialTheme.colorScheme.background
       ) {
           Column(modifier) {
               for (name in names) {
                   Greeting(name = name)
               }
           }
       }
   }
   

6. @Preview預設是最小畫面，可以增加widthDp和heightDp來模擬手機畫面大小

   @Preview(showBackground = true, widthDp = 320, heightDp = 640)
   

7. 可以使用Modifier.fillMaxWidth().padding(0.dp)來放到最寬
8. 要用有文字的按鈕可以使用ElevatedButton

   ElevatedButton (
       onClick = { /*TODO*/ }
   ) {
       Text(text = "這是按鈕")
   }
   

9. State 和 MutableState 介面會保留部分的值，只要該值有所變化，就會觸發 UI 更新 (重組) 作業
   • 使用mutableStateOf重組狀態
   • 使用remember記住狀態
   • 跟 MVVM 一樣，變數要加上.value，例如isExpanded.value

   @Composable
   fun Greeting() {
       val isExpanded = remember { mutableStateOf(false) }
   }
   

10. 使用函式控制顯示文字，官方文件表示：函式在 Kotlin 裡的地位就像特等公民

    ElevatedButton(
        onClick = { isExpanded.value = !isExpanded.value }
    ) {
        Text(
            text = if (isExpanded.value) {
                "被按下"
            } else {
                "顯示更多"
            }
        )
    }