Jetpack：024-Jetpack中的滚动事件

news2024/11/19 7:27:12

文章目录

1. 概念介绍
2. 使用方法
- 2.1 高级事件
- 2.2 低级事件
3. 示例代码
4. 内容总结

我们在上一章回中介绍了Jetpack中事件相关的内容，本章回中主要 介绍事件中的滚动事件。闲话休提，让我们一起Talk Android Jetpack吧！

1. 概念介绍

我们在前面章回中介绍了Jetpack compose中的各种事件，不过这些事件主以点击事件为主，本章回中将介绍另外一种事件：滚动事件。

我们在这里介绍的滚动事件是指对某个组件的发出的滚动事件，常用的场景是通过发出滚动事件让列表中的内容发生滚动。

2. 使用方法

滚动事件也分高级和低级，高级事件使用方便，不过缺少一些细节，低级事件相对高级事件更加强大一些，接下来我们将分别介绍这两种事件的使用方法。

2.1 高级事件

高级滚动事件使用verticalScroll和horizontalScroll修饰符表示，它们分别表示垂直和水平方向的滚动事件。在使用它们发出滚动事件时需要配合ScrollState这个状态值一起使用，我们将在后面的小节中通过示例代码来演示它的使用方法。

2.2 低级事件

低级滚动事件使用scrollable修饰符表示，它提供了名叫orientation的参数，通过该参数可以设置事件类型是垂直或者水平方向的滚动事件。在使用它发出滚动事件时需要配合ScrollableState这个状态值一起使用，我们将在后面的小节中通过示例代码来演示它的使用方法。

3. 示例代码

val scrollState = rememberScrollState()
    //指定滚动到的位置，这个值与滚动区域的大小有关，也就是代码中的120dp
    LaunchedEffect(Unit) { scrollState.animateScrollTo(60)}

    Column(
        modifier = Modifier
            .height(120.dp) //限定区域大小
            .background(color = Color.LightGray)
//                .verticalScroll(rememberScrollState())
            .verticalScroll(scrollState)
    ) {
       repeat(5) {
           Text(
               modifier = Modifier.padding(8.dp),
               text = "This is No: $it")
       }
    }

    //通过ScrollableState修饰符获取滚动的偏移值
    var scrollOffset by remember { mutableStateOf(0f)}
    Box(modifier = Modifier
        .height(80.dp)
        .scrollable(
            orientation = Orientation.Vertical,
            state = rememberScrollableState { consumeScrollDelta ->
                scrollOffset += consumeScrollDelta
                consumeScrollDelta
            }
        )
    ) { //在文本上显示滚动偏移值
        Text(text = if(scrollOffset == 0f) "ScrollableState"
            else scrollOffset.toString())
    }