【Jetpack Compose 筆記】Switch 開關切換器、切換深色主題

先上菜。

@Composable
fun MyApp() {

    val darkModeChecked = remember { mutableStateOf(false) }

    DarkThemeSwitchTheme(
        darkTheme = darkModeChecked.value
    ) {
        Surface(
            modifier = Modifier.fillMaxSize(),
            color = MaterialTheme.colorScheme.background
        ) {
            Column(
                modifier = Modifier
                    .fillMaxSize()
                    .padding(10.dp),
                verticalArrangement = Arrangement.Center,
                horizontalAlignment = Alignment.CenterHorizontally
            ) {
                Row(
                    modifier = Modifier.padding(8.dp),
                    verticalAlignment = Alignment.CenterVertically,
                    horizontalArrangement = Arrangement.Center
                ) {
                    Text(text = "深色模式")
                    Spacer(modifier = Modifier.width(60.dp))
                    Switch(
                        checked = darkModeChecked.value,
                        onCheckedChange = {darkModeChecked.value = it},
                        thumbContent = if (darkModeChecked.value){
                            {
                                Icon(imageVector = Icons.Default.Check,
                                    contentDescription = null,
                                    modifier = Modifier.size(SwitchDefaults.IconSize)
                                )
                            }
                        }else{
                            {
                                Icon(imageVector = Icons.Default.Clear,
                                    contentDescription = null,
                                    modifier = Modifier.size(SwitchDefaults.IconSize)
                                )
                            }

                        }
                    )
                }
            }
        }
    }
}

簡短說明：

DarkThemeSwitch 是這個 App 的名稱，而 DarkThemeSwitchTheme 是 Android Studio 自動產生的 Theme.kt 裡面的函式，剛好可以方便用來切換深色與淺色主題模式。

另有 isSystemInDarkTheme() 則是用來判斷目前的系統本身的主題是否是深色主題模式，本次示範並未使用到。

Switch 的 thumbContent 是用來顯示開與關的圖示，本參數可以整個刪除，或是不用的部分改成 null 。

以下是使用 Android Studio 內建預覽模式的互動示範畫面：

參考資料：

1. Switch : https://developer.android.com/jetpack/compose/components/switch?hl=zh-tw
2. Dark Theme : https://stackoverflow.com/questions/65192409/jetpack-compose-how-to-change-theme-from-light-to-dark-mode-programmatically-on