Switch
bileşeni, kullanıcıların iki durum arasında geçiş yapmasına olanak tanır: işaretli ve işaretli değil. Uygulamanızda bir anahtar kullanarak kullanıcının aşağıdakilerden birini yapmasını sağlayabilirsiniz:
- Bir ayarı açın veya kapatın.
- Bir özelliği etkinleştirin veya devre dışı bırakın.
- Bir seçenek belirleyin.
Bileşenin iki bölümü vardır: baş parmak ve iz. Baş parmak, anahtarın sürüklenebilir kısmı, izi ise arka plandır. Kullanıcı, anahtarın durumunu değiştirmek için başparmağını sola veya sağa sürükleyebilir. Ayrıca anahtara dokunarak kontrol edip temizleyebilirler.
Temel uygulama
Tam API tanımı için Switch
referansına bakın. Kullanmanız gerekebilecek temel parametrelerden bazıları şunlardır:
checked
: Anahtarın ilk durumu.onCheckedChange
: Anahtarın durumu değiştiğinde çağrılan bir geri çağırma.enabled
: Anahtarın etkin mi yoksa devre dışı mı olduğunu belirtir.colors
: Anahtar için kullanılan renkler.
Aşağıdaki örnek, Switch
composable'ın minimal kullanımıdır.
@Composable fun SwitchMinimalExample() { var checked by remember { mutableStateOf(true) } Switch( checked = checked, onCheckedChange = { checked = it } ) }
Bu uygulama, işareti kaldırıldığında aşağıdaki gibi görünür:
İşaretlendiğinde şöyle görünür:
Gelişmiş uygulama
Daha gelişmiş bir anahtar uygularken kullanmak isteyebileceğiniz birincil parametreler şunlardır:
thumbContent
: İşaretlendiğinde başparmağın görünümünü özelleştirmek için bunu kullanın.colors
: Parçanın ve başparmağın rengini özelleştirmek için bunu kullanın.
Özel baş parmak
Özel küçük resim oluşturmak amacıyla thumbContent
parametresi için herhangi bir composable'ı iletebilirsiniz. Aşağıda, küçük resmi için özel simge kullanan bir anahtar örneği verilmiştir:
@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, önceki bölümde verilen örnekle aynıdır. Ancak, bu uygulama işaretlendiğinde şu şekilde görünür:
Özel renkler
Aşağıdaki örnekte, anahtarın işaretli olup olmadığını dikkate alarak bir anahtarın başparmağı ve izi rengini değiştirmek için renkler parametresini nasıl kullanabileceğiniz gösterilmektedir.
@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: