MENU

【Jetpack Compose】Slider Composableの使い方 | スライダーを作成

記事内に商品プロモーションが含まれる場合があります

Slider コンポーザブルを使うと、ユーザーが値を選択できるスライダーを簡単に作成することができます。

目次

Sliderの基本的な使い方

Slider(
    value = 現在のスライダーの値,
    onValueChange = {
      // スライダーの値が変わった時の処理
    },
)

Slider を使用することで、 0 から 1 の範囲で値を選択できるようになります。

value パラメータは現在選択されている値を表し、onValueChange パラメータは値が変更されたときに呼び出されるコールバック関数を指定します。

以下、Sliderを使った簡単なプログラムです。

import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.padding
import androidx.compose.material.Slider
import androidx.compose.material.Text
import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
import androidx.compose.runtime.setValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp

@Composable
fun MyComposable() {
    var sliderPosition by remember { mutableStateOf(0f) }

    Column(
        modifier = Modifier
            .padding(16.dp)
            .fillMaxWidth(),
        horizontalAlignment = Alignment.CenterHorizontally
    ) {
        Text(text = "選択された値: $sliderPosition")
        Slider(
            value = sliderPosition,
            onValueChange = { sliderPosition = it},
        )
    }
}

Valueの値を0〜1から変更したい場合

Sliderの引数valueRangeを設定することで範囲を変更することができます。

以下、範囲を0〜100に変更した例です。

import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.padding
import androidx.compose.material.Slider
import androidx.compose.material.Text
import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
import androidx.compose.runtime.setValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp

@Composable
fun MyComposable() {
    var sliderPosition by remember { mutableStateOf(0f) }

    Column(
        modifier = Modifier
            .padding(16.dp)
            .fillMaxWidth(),
        horizontalAlignment = Alignment.CenterHorizontally
    ) {
        Text(text = "選択された値: $sliderPosition")
        Slider(
            value = sliderPosition,
            onValueChange = { sliderPosition = it},
            valueRange = 0f..100f
        )
    }
}
Share
  • URLをコピーしました!

Comment

コメントする

目次