Slider
컴포저블을 사용하면 사용자가 다양한 값 중에서 선택할 수 있습니다. 슬라이더를 사용하여 사용자가 다음 작업을 하도록 할 수 있습니다.
- 볼륨, 밝기와 같이 다양한 값을 사용하는 설정을 조정합니다.
- 가격대를 설정할 때와 같이 그래프에서 데이터를 필터링합니다.
- 사용자 입력(예: 리뷰에서 평점 설정)
슬라이더에는 트랙, thumb, 값 라벨, 눈금 표시가 포함됩니다.
- 트랙: 트랙은 트랙의 범위를 나타내는 가로 막대입니다. 값을 지정할 수 있습니다.
- thumb: thumb은 슬라이더의 드래그 가능한 컨트롤 요소로, 를 사용하면 사용자가 있습니다.
- 눈금 표시: 눈금 표시는 선택사항으로 제공되는 시각적 마커 또는 슬라이더의 트랙을 따라 나타납니다.
기본 구현
전체 API 정의는 Slider
참조를 확인하세요. 몇 가지 핵심은
Slider
컴포저블의 매개변수는 다음과 같습니다.
value
: 슬라이더의 현재 값입니다.onValueChange
: 값이 다음과 같을 때마다 호출되는 람다입니다. 변경할 수 있습니다.enabled
: 사용자가 상호작용할 수 있는지 나타내는 불리언 값입니다. 슬라이더를 조정합니다.
다음 예는 간단한 슬라이더입니다. 이를 통해 사용자는
0.0
에서 1.0
사이의 값을 선택합니다. 사용자가
슬라이더는 연속입니다.
@Preview @Composable fun SliderMinimalExample() { var sliderPosition by remember { mutableFloatStateOf(0f) } Column { Slider( value = sliderPosition, onValueChange = { sliderPosition = it } ) Text(text = sliderPosition.toString()) } }
이 구현은 다음과 같이 표시됩니다.
고급 구현
더 복잡한 슬라이더를 구현할 때는 매개변수가 포함됩니다.
colors
:SliderColors
의 인스턴스로, 이를 통해 제어 영역 내에 있는 지정할 수 있습니다.valueRange
: 슬라이더가 취할 수 있는 값의 범위입니다.steps
: thumb이 스냅되는 슬라이더의 노치 수입니다.
다음 스니펫은 3단계로 구성된 슬라이더를 구현합니다.
0.0
에서 50.0
(으)로 변경되었습니다. 슬라이더 값이 각 단계에 맞춰 고정되므로 이 슬라이더는 불연속입니다.
@Preview @Composable fun SliderAdvancedExample() { var sliderPosition by remember { mutableFloatStateOf(0f) } Column { Slider( value = sliderPosition, onValueChange = { sliderPosition = it }, colors = SliderDefaults.colors( thumbColor = MaterialTheme.colorScheme.secondary, activeTrackColor = MaterialTheme.colorScheme.secondary, inactiveTrackColor = MaterialTheme.colorScheme.secondaryContainer, ), steps = 3, valueRange = 0f..50f ) Text(text = sliderPosition.toString()) } }
구현은 다음과 같이 표시됩니다.
범위 슬라이더
전용 RangeSlider
컴포저블을 사용할 수도 있습니다. 이를 통해 사용자는
두 개의 값을 선택합니다. 이는 사용자가 최소 및 최대 가격을 선택하려는 경우와 같이 유용할 수 있습니다.
다음 예는 연속적 신경망의 비교적 간단한 예입니다. 범위 슬라이더
@Preview @Composable fun RangeSliderExample() { var sliderPosition by remember { mutableStateOf(0f..100f) } Column { RangeSlider( value = sliderPosition, steps = 5, onValueChange = { range -> sliderPosition = range }, valueRange = 0f..100f, onValueChangeFinished = { // launch some business logic update with the state you hold // viewModel.updateSelectedSliderValue(sliderPosition) }, ) Text(text = sliderPosition.toString()) } }