Switch
구성요소를 사용하면 사용자가 두 가지 상태(선택됨) 간에 전환할 수 있습니다.
선택 해제되어 있습니다. 앱에서는 스위치를 사용하여 사용자가
있습니다.
- 설정을 사용 또는 사용 중지로 전환합니다.
- 기능을 사용 설정 또는 사용 중지합니다.
- 옵션을 선택합니다.
이 구성요소는 thumb과 트랙의 두 부분으로 구성됩니다. thumb을 드래그할 수 있습니다. 부분이며 트랙이 배경이 됩니다. 사용자가 엄지손가락을 드래그할 수 있습니다. 를 사용하여 스위치의 상태를 변경할 수 있습니다. 또한 왼쪽 상단의 전환하여 확인하고 삭제하세요.
기본 구현
전체 API 정의는 Switch
참조를 확인하세요. 다음은
사용해야 하는 몇 가지 주요 매개변수는 다음과 같습니다.
checked
: 스위치의 초기 상태입니다.onCheckedChange
: 스위치 변경enabled
: 스위치의 사용 설정 또는 중지 여부입니다.colors
: 스위치에 사용되는 색상입니다.
다음 예는 Switch
컴포저블의 최소 구현입니다.
@Composable fun SwitchMinimalExample() { var checked by remember { mutableStateOf(true) } Switch( checked = checked, onCheckedChange = { checked = it } ) }
이 구현은 선택 해제하면 다음과 같이 표시됩니다.
선택하면 다음과 같이 표시됩니다.
고급 구현
고급 캠페인을 구현할 때 사용할 수 있는 기본 매개변수는 스위치는 다음과 같습니다.
thumbContent
: 이 옵션을 사용하면 엄지손가락을 움직일 때 엄지손가락의 모양을 맞춤설정할 수 있습니다. 선택되어 있는지 확인합니다.colors
: 트랙과 썸네일의 색상을 맞춤설정하려면 이 옵션을 사용합니다.
맞춤 엄지손가락
thumbContent
매개변수의 모든 컴포저블을 전달하여 맞춤
엄지손가락을 클릭합니다. 다음은 맞춤 아이콘을 사용하는 스위치의 예입니다.
엄지손가락:
@Composable fun SwitchWithIconExample() { var checked by remember { mutableStateOf(true) } Switch( checked = checked, onCheckedChange = { checked = it }, thumbContent = if (checked) { { Icon( imageVector = Icons.Filled.Check, contentDescription = null, modifier = Modifier.size(SwitchDefaults.IconSize), ) } } else { null } ) }
이 구현에서 선택 해제된 모양은 이전 섹션에 나와 있습니다. 하지만 확인해 보면 이 구현은 다음과 같습니다.
맞춤 색상
다음 예는 색상 매개변수를 사용하여 스위치의 엄지 손가락과 트랙의 색상을 변경할 수 있습니다. 체크합니다.
@Composable fun SwitchWithCustomColors() { var checked by remember { mutableStateOf(true) } Switch( checked = checked, onCheckedChange = { checked = it }, colors = SwitchDefaults.colors( checkedThumbColor = MaterialTheme.colorScheme.primary, checkedTrackColor = MaterialTheme.colorScheme.primaryContainer, uncheckedThumbColor = MaterialTheme.colorScheme.secondary, uncheckedTrackColor = MaterialTheme.colorScheme.secondaryContainer, ) ) }
이 구현은 다음과 같이 표시됩니다.