ui:design/com.pico.spatial.ui.design/BasicScrollIndicator

BasicScrollIndicator

@Composable

fun BasicScrollIndicator(state: ScrollIndicatorState, modifier: Modifier = Modifier, colors: ScrollIndicatorColors = ScrollIndicatorDefaults.scrollIndicatorColors(), scrollingMarkSize: Dp = ScrollIndicatorDefaults.ScrollingMarkSize, paddingForInteraction: PaddingValues = ScrollIndicatorDefaults.ZeroPadding, contentPadding: PaddingValues = ScrollIndicatorDefaults.TrackPadding)

Basic implementation of scroll indicator. Different to ScrollIndicator with BoxScope, this implementation can be placed anywhere in the tree. And it's always visible.

Parameters

state

The state of the indicator. Use rememberScrollIndicatorState to create it.

modifier

Compose modifier applied to this indicator.

colors

The colors of the indicator.

scrollingMarkSize

The size of the scrolling mark.

paddingForInteraction

Extra hot interaction space.

contentPadding

The padding of the track.

Samples

import androidx.compose.foundation.gestures.Orientation
import androidx.compose.foundation.horizontalScroll
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.lazy.LazyColumn
import androidx.compose.foundation.lazy.LazyRow
import androidx.compose.foundation.lazy.rememberLazyListState
import androidx.compose.foundation.rememberScrollState
import androidx.compose.foundation.verticalScroll
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.ExperimentalComposeUiApi
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp
import com.pico.spatial.ui.design.BasicScrollIndicator
import com.pico.spatial.ui.design.Divider
import com.pico.spatial.ui.design.ScrollIndicator
import com.pico.spatial.ui.design.Text
import com.pico.spatial.ui.design.rememberScrollIndicatorState

fun main() { 
   //sampleStart 
   Row {
    // 1. define a scroll state
    val state = rememberScrollState()
    Column(
        modifier =
            Modifier.fillMaxSize()
                // 2. apply the scroll state to the column
                .verticalScroll(state)
    ) {
        // add your content here
    }
    // 3. add scroll indicator
    val scrollIndicatorState = rememberScrollIndicatorState(Orientation.Vertical, state)
    BasicScrollIndicator(scrollIndicatorState)
} 
   //sampleEnd
}

@Composable

fun BasicScrollIndicator(state: ScrollIndicatorState, modifier: Modifier = Modifier, colors: ScrollIndicatorColors = ScrollIndicatorDefaults.scrollIndicatorColors(), vibrants: ScrollIndicatorVibrants = ScrollIndicatorDefaults.scrollIndicatorVibrants(), scrollingMarkSize: Dp = ScrollIndicatorDefaults.ScrollingMarkSize, paddingForInteraction: PaddingValues = ScrollIndicatorDefaults.ZeroPadding, contentPadding: PaddingValues = ScrollIndicatorDefaults.TrackPadding)

Basic implementation of scroll indicator. Different to ScrollIndicator with BoxScope, this implementation can be placed anywhere in the tree. And it's always visible.

Parameters

state

The state of the indicator. Use rememberScrollIndicatorState to create it.

modifier

Compose modifier applied to this indicator.

colors

The colors of the indicator.

vibrants

The vibrants of the indicator.

scrollingMarkSize

The size of the scrolling mark.

paddingForInteraction

Extra hot interaction space.

contentPadding

The padding of the track.

Samples

import androidx.compose.foundation.gestures.Orientation
import androidx.compose.foundation.horizontalScroll
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.lazy.LazyColumn
import androidx.compose.foundation.lazy.LazyRow
import androidx.compose.foundation.lazy.rememberLazyListState
import androidx.compose.foundation.rememberScrollState
import androidx.compose.foundation.verticalScroll
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.ExperimentalComposeUiApi
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp
import com.pico.spatial.ui.design.BasicScrollIndicator
import com.pico.spatial.ui.design.Divider
import com.pico.spatial.ui.design.ScrollIndicator
import com.pico.spatial.ui.design.Text
import com.pico.spatial.ui.design.rememberScrollIndicatorState

fun main() { 
   //sampleStart 
   Row {
    // 1. define a scroll state
    val state = rememberScrollState()
    Column(
        modifier =
            Modifier.fillMaxSize()
                // 2. apply the scroll state to the column
                .verticalScroll(state)
    ) {
        // add your content here
    }
    // 3. add scroll indicator
    val scrollIndicatorState = rememberScrollIndicatorState(Orientation.Vertical, state)
    BasicScrollIndicator(scrollIndicatorState)
} 
   //sampleEnd
}