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 anahtar kullanarak kullanıcının aşağıdakilerden birini yapmasına izin verebilirsiniz:
- 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, anahtarın sürüklenebilir parçası, parça ise arka plandır. Kullanıcı, anahtarın durumunu değiştirmek için baş parmağını sola veya sağa sürükleyebilir. Kontrol edip temizlemek için anahtara da dokunabilirler.
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 başlangıç durumu.onCheckedChange
: Anahtarın durumu değiştiğinde çağrılan bir geri çağırma.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 anahtar uygularken kullanmak isteyebileceğiniz birincil parametreler şunlardır:
thumbContent
: İşaretlendiğinde başparmağın görünüşü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 bir küçük resim oluşturmak üzere thumbContent
parametresi için herhangi bir composable'ı iletebilirsiniz. Aşağıda, baş parmağı için özel simge kullanan bir anahtara örnek 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ümdeki örnekle aynıdır. Ancak işaretlendiğinde bu uygulama aşağıdaki gibi görünür:
Özel renkler
Aşağıdaki örnek, anahtarın işaretli olup olmadığını göz önünde bulundurarak bir anahtarın başparmak ve izlemesinin rengini değiştirmek için renkler parametresini nasıl kullanabileceğinizi gösterir.
@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: