【Jetpack Compose 筆記】AssistChip, FilterChip, InputChip, SuggestionChip….

其實只是把 Google 給的網頁資料自己打過一次，還在學習中…..太弱了，哭哭。

@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun MyApp() {

    val scope = rememberCoroutineScope()
    val snackbarHostState = remember {SnackbarHostState()}
    val context = LocalContext.current
    val filterChipSelected = remember { mutableStateOf(false) }

    Scaffold(
        snackbarHost = { SnackbarHost(hostState = snackbarHostState)}
    ) { paddingValues ->
        Card(
            colors = CardDefaults.cardColors(
                containerColor = MaterialTheme.colorScheme.surface
            ),
            elevation = CardDefaults.cardElevation(defaultElevation = 8.dp),
            border = BorderStroke(1.dp, Color.Blue),
            modifier = Modifier
                .fillMaxSize()
                .padding(paddingValues)

        ){
            AssistChip(
                onClick = {
                          Toast.makeText(context,"齁，點我幹嘛啦",Toast.LENGTH_SHORT).show()
                          },
                label = { Text(text = "輔助小晶片") },
                leadingIcon = {
                    Icon(imageVector = Icons.Default.Settings,
                        contentDescription = null,
                        modifier = Modifier.size(AssistChipDefaults.IconSize))
                }
            )

            FilterChip(
                selected = filterChipSelected.value,
                onClick = { filterChipSelected.value = !filterChipSelected.value },
                label = { Text(text = "篩選小晶片") },
                leadingIcon = if(filterChipSelected.value){
                    { Icon(imageVector = Icons.Default.Check,
                        contentDescription = null,
                        modifier = Modifier.size(FilterChipDefaults.IconSize)
                    )
                    }
                }else{
                    { Icon(imageVector = Icons.Default.Clear,
                        contentDescription = null,
                        modifier = Modifier.size(FilterChipDefaults.IconSize)
                    )
                    }
                }
            )

            LaunchedEffect(filterChipSelected.value){
                if(filterChipSelected.value){
                    Toast.makeText(context, "篩選小晶片，關閉。", Toast.LENGTH_SHORT).show()
                }else{
                    Toast.makeText(context, "篩選小晶片，開啟，喵。", Toast.LENGTH_SHORT).show()
                }
            }


            val inputChipEnabled = remember { mutableStateOf(false) }

            Button(onClick = { inputChipEnabled.value = !inputChipEnabled.value }) {
                Text(text = "開啟 input chip 吧")
            }

            if(inputChipEnabled.value){
                InputChip(selected = inputChipEnabled.value,
                    onClick = { inputChipEnabled.value = !inputChipEnabled.value },
                    label = { Text(text = "誰找我呀!?") },
                    avatar = { Icon(imageVector = Icons.Default.Info, contentDescription = null, modifier = Modifier.size(InputChipDefaults.IconSize))},
                    trailingIcon = { Icon(imageVector = Icons.Default.Close, contentDescription = null, modifier = Modifier.size(InputChipDefaults.IconSize))}
                )
            }


            SuggestionChip(
                onClick = {
                     scope.launch {
                         snackbarHostState.showSnackbar("沒事別亂點啦")
                     }
                },
                label = { Text(text = "聽說是最基礎的建議小晶片") })

        }
    }
}

示範畫面：

參考資料：

1. https://developer.android.com/jetpack/compose/components/card?hl=zh-tw
2. https://developer.android.com/jetpack/compose/components/chip?hl=zh-tw
3. https://developer.android.com/jetpack/compose/components/snackbar?hl=zh-tw