スイッチ

Switch コンポーネントを使用すると、ユーザーはオンになっている 2 つの状態を切り替えることができます。 オフにします。アプリでスイッチを使用して、ユーザーが次のいずれかの操作を行えるようにできます。 次のとおりです。

  • 設定のオンとオフを切り替えます。
  • 機能を有効または無効にします。
  • オプションを選択します。

このコンポーネントは、つまみとトラックの 2 つの部分で構成されています。つまみはドラッグ可能な 背景がトラックになります。ユーザーはつまみをドラッグできます。 スイッチの状態を変更できます。[ チェックして消去します。

ライトモードとダークモードの Switch コンポーネントの例。
図 1. switch コンポーネント

基本的な実装

完全な API 定義については、Switch リファレンスをご覧ください。その内容は次のとおりです。 使用する必要がある主なパラメータを以下に示します。

  • checked: スイッチの初期状態。
  • onCheckedChange: アプリケーションの状態が 変更します。
  • enabled: スイッチが有効か無効か。
  • colors: スイッチに使用される色。

次の例は、Switch コンポーザブルの最小限の実装を示しています。

@Composable
fun SwitchMinimalExample() {
    var checked by remember { mutableStateOf(true) }

    Switch(
        checked = checked,
        onCheckedChange = {
            checked = it
        }
    )
}
Switch.kt

この実装は、チェックボックスをオフにすると次のように表示されます。

オフになっている基本スイッチ。
図 2. オフになっているスイッチ。

オンにした場合の外観は次のようになります。

オンになっている基本スイッチ。
図 3. オンになっているスイッチ。

高度な実装

より高度な実装で使用する主なパラメータは、 スイッチには次のものがあります。

  • 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
        }
    )
}
Switch.kt

この実装での未確認の外観は、 説明します。ただし、オンにすると、この実装は 次のようになります。

thumbContent パラメータを使用して、オンにしたときにカスタム アイコンを表示するスイッチ。
図 4. カスタム チェックのアイコン付きのスイッチ。

カスタムの色

次の例では、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,
        )
    )
}
Switch.kt

これを実装すると次のようになります。

カラー パラメータを使用して、つまみとタックの両方にカスタムカラーのスイッチを表示するスイッチ。
図 5. カスタムカラーのスイッチ。

参考情報