Compose的滚动布局(五)

一、前言

首先在Compose中是没有滚动布局的，只有滚动修饰符verticalScroll和horizontalScroll。通过使用这两个修饰符来修饰布局时候，可以使布局进行滚动

二、参考示例

以下是一个垂直列表滚动的例子

@Composable
fun ScrollBoxes() {
    Column(
        modifier = Modifier
            .background(Color.LightGray)
            .size(100.dp)
            .verticalScroll(rememberScrollState())
    ) {
        repeat(10) {
            Text("Item $it", modifier = Modifier.padding(2.dp))
        }
    }
}

三、ScrollState

如果我们想要主动滚动列表或者获取一些滚动状态的话，可以使用ScrollState。将以上代码修改为以下方式

 @Composable
    private fun nestingScroll(){
        val gradient = Brush.verticalGradient(0f to Color.Gray, 1000f to Color.White)
        Box(
            modifier = Modifier
                .background(Color.LightGray)
                .verticalScroll(rememberScrollState())
                .padding(32.dp)
        ) {
            Column {
                repeat(6) {
                    Box(
                        modifier = Modifier
                            .height(128.dp)
                            .verticalScroll(rememberScrollState())
                    ) {
                        Text(
                            "Scroll here",
                            modifier = Modifier
                                .border(12.dp, Color.DarkGray)
                                .background(brush = gradient)
                                .padding(24.dp)
                                .height(150.dp)
                        )
                    }
                }
            }
        }
    }

四、滚动嵌套

Compose 支持*嵌套滚动，*其中多个元素对单个滚动手势作出反应。简单的嵌套滚动不需要您执行任何操作。嵌套滚动的典型示例是另一个列表中的列表，更复杂的情况是折叠工具栏。启动滚动操作的手势会自动从子项传播到父项，这样当子项无法进一步滚动时，手势由其父元素处理。

折叠工具栏的代码可以查看

https://developer.android.google.cn/reference/kotlin/androidx/compose/ui/input/nestedscroll/package-summary#(androidx.compose.ui.Modifier).nestedScroll(androidx.compose.ui.input.nestedscroll.NestedScrollConnection,androidx.compose.ui.input.nestedscroll.NestedScrollDispatcher)

以下示例显示verticalScroll在容器中应用了修饰符的元素，该容器也verticalScroll应用了修饰符。

val gradient = Brush.verticalGradient(0f to Color.Gray, 1000f to Color.White)
Box(
    modifier = Modifier
        .background(Color.LightGray)
        .verticalScroll(rememberScrollState())
        .padding(32.dp)
) {
    Column {
        repeat(6) {
            Box(
                modifier = Modifier
                    .height(128.dp)
                    .verticalScroll(rememberScrollState())
            ) {
                Text(
                    "Scroll here",
                    modifier = Modifier
                        .border(12.dp, Color.DarkGray)
                        .background(brush = gradient)
                        .padding(24.dp)
                        .height(150.dp)
                )
            }
        }
    }
}

五、使用nestedScroll 修饰符

如果您需要在多个元素之间创建高级协调滚动， nestedScroll 修改器通过定义嵌套滚动层次结构为您提供更大的灵活性。其相关api如下：

fun Modifier.nestedScroll(
    connection: NestedScrollConnection,
    dispatcher: NestedScrollDispatcher? = null
): Modifier

具体代码略微复杂，后面再说这个的具体使用方式，官方教程如下:

https://developer.android.google.cn/reference/kotlin/androidx/compose/ui/input/nestedscroll/package-summary#(androidx.compose.ui.Modifier).nestedScroll(androidx.compose.ui.input.nestedscroll.NestedScrollConnection,androidx.compose.ui.input.nestedscroll.NestedScrollDispatcher)

六、参考链接

1. compose中的手势

   https://developer.android.google.cn/jetpack/compose/gestures

2. compose中的nestedScroll

   https://developer.android.google.cn/reference/kotlin/androidx/compose/ui/input/nestedscroll/package-summary#(androidx.compose.ui.Modifier).nestedScroll(androidx.compose.ui.input.nestedscroll.NestedScrollConnection,androidx.compose.ui.input.nestedscroll.NestedScrollDispatcher)