Switch
bileşeni, kullanıcıların iki durum arasında geçiş yapmasına olanak tanır: işaretli
ve işareti kaldırıldı. Uygulamanızda, kullanıcının aşağıdakilerden birini yapmasına izin vermek için anahtar kullanabilirsiniz
takip etmek için:
- Bir ayarı açın veya kapatın.
- Bir özelliği etkinleştirin veya devre dışı bırakın.
- Bir seçenek belirleyin.
Bileşen iki parçadan oluşur: baş parmak ve kanal. Baş parmak sürüklenebilir parça, arka planın yerini alır. Kullanıcı baş parmağını sürükleyebilir dokunun. Ayrıca kontrol edip temizlemek için anahtarı kullanın.
Temel uygulama
Tam API tanımı için Switch
referansına bakın. Bu alanlar:
kullanmanız gerekebilecek temel parametrelerden bazıları şunlardır:
checked
: Anahtarın başlangıç durumu.onCheckedChange
: anahtar değişiklikleri.enabled
: Anahtarın etkin veya devre dışı olup olmadığı.colors
: Anahtar için kullanılan renkler.
Aşağıdaki örnekte, Switch
composable'ın minimal bir şekilde uygulanması gösterilmektedir.
@Composable fun SwitchMinimalExample() { var checked by remember { mutableStateOf(true) } Switch( checked = checked, onCheckedChange = { checked = it } ) }
Bu uygulama, işaretlenmediğinde aşağıdaki gibi görünür:
İşaretlendiğinde görünüm şu şekilde olur:
Gelişmiş uygulama
Daha gelişmiş bir yapılandırma uygularken kullanmak isteyebileceğiniz birincil parametreler şunlardır:
thumbContent
: Aşağıdaki durumlarda başparmağın görünümünü özelleştirmek için bu seçeneği kullanın işaretlidir.colors
: Parçanın ve başparmağın rengini özelleştirmek için bunu kullanın.
Özel baş parmak
Özel bir oluşturmak için thumbContent
parametresi için herhangi bir composable'ı iletebilirsiniz
başparmak simgesini seçin. Aşağıda,
baş parmak:
@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 } ) }
Bu uygulamada, işaretlenmemiş görünüm ele alacağız. Ancak bu uygulama işaretlendiğinde şöyle olur:
Özel renkler
Aşağıdaki örnekte, renk parametresini şu amaçlarla nasıl kullanabileceğiniz gösterilmektedir: bir anahtarın başparmak ve izin renginin rengini, anahtarı işaretli olduğundan emin olun.
@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, ) ) }
Bu uygulama aşağıdaki gibi görünür: