Switch
コンポーネントを使用すると、ユーザーはオン / オフの 2 つの状態を切り替えることができます。アプリでは、スイッチを使用して、ユーザーが次のいずれかを行えるようにできます。
- 設定のオン / オフを切り替えます。
- 機能を有効または無効にします。
- オプションを選択します。
コンポーネントは、つまみとトラックの 2 つの部分で構成されています。つまみはスイッチのドラッグ可能な部分で、トラックは背景です。ユーザーは、つまみを左右にドラッグしてスイッチの状態を変更できます。スイッチをタップして消去することもできます
基本的な実装
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 } ) }
この実装では、チェックされていない外観は前のセクションの例と同じです。ただし、オンにすると、この実装は次のようになります。
カスタムの色
次の例では、colors パラメータを使用して、スイッチが選択されているかどうかを考慮し、スイッチのつまみとトラックの色を変更する方法を示します。
@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, ) ) }
これを実装すると次のようになります。