如何在 VerticalScroller（Android 开发者编写）中显示指示器？

Question

致力于jetpackcompose在 Android Studio 4.0 Canary 中了解 android 。

我有一个简单的jetpackcompose设置，VerticalScroller如下所示：

@Composable
fun MyScreenContent(appState: AppState = AppState())
{

    FlexColumn{


       flexible(flex = 1f){
           VerticalScroller {
             Column {
                CardDemo()
                CardDemo()
                CardDemo()
                CardDemo()
                CardDemo()
                CardDemo()
                CardDemo()
                CardDemo()
                CardDemo()
                CardDemo()
                CardDemo()
                CardDemo()
                CardDemo()
                CardDemo()
                CardDemo()
                CardDemo()
                CardDemo()
                CardDemo()
                CardDemo()
            }
        }
    }
 }
}

它完美地滚动，但我想要一个scrollindicator显示我的列表滚动了多远，我如何打开它，找不到任何ScrollIndicator（即）组件来包含。

参考 到RecyclerView在非可组合设置（XML），其中scrollindicator是可见的：

            <androidx.recyclerview.widget.RecyclerView
                android:id="@+id/station_list"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:background="@color/recyclerview_background_color"
                android:clipChildren="true"
                android:clipToPadding="false"
                android:fadeScrollbars="false"
                android:paddingLeft="0dp"
                android:paddingRight="0dp"
                android:scrollbarSize="4dp"
                android:scrollbarThumbVertical="@color/colorPrimary"   <---
                android:scrollbars="vertical"                          <---
                android:visibility="visible"
                app:isGone="@{!hasStations}"
                app:layoutManager="androidx.recyclerview.widget.LinearLayoutManager"
                app:layout_constraintStart_toStartOf="parent"
                tools:context="no.rogo.projectfk303.ui.activities.MainActivity"
                tools:listitem="@layout/list_item_station" />

Answer 1

对于 jetpack compose桌面，它将是：

@Composable
fun ScrollBox(
    modifier: Modifier = Modifier,
    columnVerticalArrangement: Arrangement.Vertical = Arrangement.Top,
    columnHorizontalAlignment: Alignment.Horizontal = Alignment.Start,
    rowHorizontalArrangement: Arrangement.Horizontal = Arrangement.Start,
    rowVerticalAlignment: Alignment.Vertical = Alignment.Top,
    content: @Composable ColumnScope.() -> Unit
) {
    val horizontalScrollState = rememberScrollState(0)
    val verticalScrollState = rememberScrollState(0)

    Box(modifier) {
        Row(Modifier.horizontalScroll(horizontalScrollState), horizontalArrangement = rowHorizontalArrangement, verticalAlignment = rowVerticalAlignment) {
            Column(Modifier.verticalScroll(verticalScrollState), columnVerticalArrangement, columnHorizontalAlignment) {
                content()
            }
        }
        HorizontalScrollbar(
            adapter = rememberScrollbarAdapter(horizontalScrollState),
            modifier = Modifier.align(Alignment.BottomEnd),
            style = LocalScrollbarStyle.current.copy(unhoverColor = LocalScrollbarStyle.current.hoverColor.copy(alpha = 0.35f))
        )
        VerticalScrollbar(
            adapter = rememberScrollbarAdapter(verticalScrollState),
            modifier = Modifier.align(Alignment.CenterEnd),
            style = LocalScrollbarStyle.current.copy(unhoverColor = LocalScrollbarStyle.current.hoverColor.copy(alpha = 0.35f))
        )
    }
}

和用法：

    BoxWithConstraints {
        val parentHeight: Dp = with(LocalDensity.current)  { constraints.maxHeight.toDp() }

        Box(
            Modifier.background(Color.Gray)
                .sizeIn(
                    minHeight = 50.dp,
                    maxHeight = parentHeight * 0.5f
                )
        ) {
            ScrollBox {
                <your large Composables here>
            }
        }
    }