今天學什麼？

今天閱讀「適用於 Android 開發人員的 Jetpack Compose」第一章「Compose 基礎知識」的「編寫第一個 Compose 應用程式」，今天看 8~14 小章

官方範例 GitHub

學習筆記

1. 狀態被多個函式讀取或修改，要放入共通的祖系中，這被稱為「狀態提升」
2. 使用by代表屬性委派，這樣就不用輸入.value

   val isExpanded = remember { mutableStateOf(false) }    //加.value
   var isExpanded by remember { mutableStateOf(false) }    //不加.value
   

3. Compose 沒有 visibility 設計，取而代之的是不要顯示的話就不要呼叫函式就好
4. 向上傳遞函式

   @Composable
   fun OnboardingScreen(
       onContinueClicked: () -> Unit,    //建立自己命中的函式onContinueClicked
       modifier: Modifier = Modifier
   ) {
       Column(
           modifier = modifier.fillMaxSize(),
           verticalArrangement = Arrangement.Center,
           horizontalAlignment = Alignment.CenterHorizontally
       ) {
           Text("Welcome to the Basics Codelab!")
           Button(
               modifier = Modifier.padding(vertical = 24.dp),
               onClick = onContinueClicked    //點擊事件傳遞函式
           ) {
               Text("Continue")
           }
       }
   }
   
   @Composable
   fun OnboardingPreview() {
       BasicsCodelabTheme {
           OnboardingScreen(onContinueClicked = {})
       }
   }
   

5. 使用LazyColumn做出捲動
   • 引用androidx.compose.foundation.lazy.items

   LazyColumn(modifier = modifier.padding(vertical = 4.dp)) {
       items(items = names) { name ->
           Greeting(name = name)
       }
   }
   

6. LazyColumn 不會像 RecyclerView 一樣回收子項
7. 保留狀態使用rememberSaveable，這樣旋轉畫面、變更為深色模式、上下捲動等操作會保留
8. 不保留remember狀態，這樣旋轉畫面、變更為深色模式、上下捲動等等操作會變成初始頁面
9. 增加動畫使用animateDpAsState

   //直接放大
   val isExtraPadding = if (isExpanded) {
       48.dp
   } else {
       0.dp
   }
   
   //動畫放大
   val isExtraPadding by animateDpAsState(
       if (isExpanded) {
           48.dp
       } else {
           0.dp
       }
   )
   

10. animateDpAsState裡面有animationSpec擴展，可以增加動畫樣式

    val isExtraPadding by animateDpAsState(
        if (isExpanded) {
            48.dp
        } else {
            0.dp
        },
        //彈跳動畫
        animationSpec = spring(
            dampingRatio = Spring.DampingRatioMediumBouncy,
            stiffness = Spring.StiffnessLow
        )
    )
    

11. 建議 style 都使用 MaterialTheme，但如果想要修改某個元件，可以使用copy

    Text(
        text = name, style = MaterialTheme.typography.headlineMedium.copy(
            fontWeight = FontWeight.ExtraBold
        )
    )
    

12. 同時預覽深色和淺色模式，使用uiMode = UI_MODE_NIGHT_YES

    @Preview(
        showBackground = true,
        widthDp = 320,
        uiMode = UI_MODE_NIGHT_YES,
        name = "Dark"
    )
    @Preview(showBackground = true, widthDp = 320)
    @Composable
    private fun GreetingsPreview() {
        BasicsCodelabTheme {
            Greetings()
        }
    }
    

13. ui.theme.Color.kt 資料夾可以設定顏色，就像是 values/colors.xml 一樣

    val Navy = Color(0xFF073042)
    val Blue = Color(0xFF4285F4)
    val LightBlue = Color(0xFFD7EFFE)
    val Chartreuse = Color(0xFFEFF7CF)
    

14. 變換主題顏色在 ui.theme.Theme.kt，然後對DarkColorScheme或LightColorScheme修改

    private val DarkColorScheme = darkColorScheme(
        surface = Blue,
        onSurface = Navy,
        primary = Navy,
        onPrimary = Chartreuse
    )
    
    private val LightColorScheme = lightColorScheme(
        surface = Blue,
        onSurface = Color.White,
        primary = LightBlue,
        onPrimary = Navy
    )
    

15. 要使用資源字串的話，用stringResource

    <resources>
        <string name="is_click">被按下</string>
    </resources>
    

    stringResource(R.string.is_click)