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
パラメータに任意のコンポーザブルを渡して、カスタムを作成できます。
つまみ。カスタム アイコンを使用するスイッチの例を次に示します。
thumb:
@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, ) ) }
これを実装すると次のようになります。
