问题

我需要在我的可滚动列中实现淡出效果：

```kotlin 
val modifier = Modifier
         .horizontalScroll(rememberScrollState())

Column(modifier) {
    // 我的代码
}

如果用户开始向左滚动，那么左侧将出现淡出效果。我尝试应用来自此处的水平淡出效果解决方案，但这个解决方案对我不起作用。

fun Modifier.horizontalFadingEdge(
    scrollState: ScrollState,
    length: Dp,
    edgeColor: Color? = null,
) = composed(
    debugInspectorInfo {
        name = "length"
        value = length
    }
) {
    val color = edgeColor ?: MaterialTheme.colors.surface

    drawWithContent {
        val lengthValue = length.toPx()
        val scrollFromStart = scrollState.value
        val scrollFromEnd = scrollState.maxValue - scrollState.value

        val startFadingEdgeStrength = lengthValue * (scrollFromStart / lengthValue).coerceAtMost(1f)

        val endFadingEdgeStrength = lengthValue * (scrollFromEnd / lengthValue).coerceAtMost(1f)

        drawContent()

        drawRect(
            brush = Brush.horizontalGradient(
                colors = listOf(
                    color,
                    Color.Transparent,
                ),
                startX = 0f,
                endX = startFadingEdgeStrength,
            ),
            size = Size(
                startFadingEdgeStrength,
                this.size.height,
            ),
        )

        drawRect(
            brush = Brush.horizontalGradient(
                colors = listOf(
                    Color.Transparent,
                    color,
                ),
                startX = size.width - endFadingEdgeStrength,
                endX = size.width,
            ),
            topLeft = Offset(x = size.width - endFadingEdgeStrength, y = 0f),
        )
    }
}

问题： 如何在水平可滚动列中实现淡出效果？

我期望的行为（这是通过SwiftUI框架实现的表格

<details>
<summary>英文:</summary>

I need to implement a fade effect in my scrollable column:


```kotlin 
val modifier = Modifier
         .horizontalScroll(rememberScrollState())

Column(modifier) {
    // my code
}

If user starts scroll to the left, then a fade effect will be appearing on the left side. I tried to apply the solution from here for the horizontal fade effect, but this solution doesn't work for me.

fun Modifier.horizontalFadingEdge(
    scrollState: ScrollState,
    length: Dp,
    edgeColor: Color? = null,
) = composed(
    debugInspectorInfo {
        name = "length"
        value = length
    }
) {
    val color = edgeColor ?: MaterialTheme.colors.surface

    drawWithContent {
        val lengthValue = length.toPx()
        val scrollFromStart = scrollState.value
        val scrollFromEnd = scrollState.maxValue - scrollState.value

        val startFadingEdgeStrength = lengthValue * (scrollFromStart / lengthValue).coerceAtMost(1f)

        val endFadingEdgeStrength = lengthValue * (scrollFromEnd / lengthValue).coerceAtMost(1f)

        drawContent()

        drawRect(
            brush = Brush.horizontalGradient(
                colors = listOf(
                    color,
                    Color.Transparent,
                ),
                startX = 0f,
                endX = startFadingEdgeStrength,
            ),
            size = Size(
                startFadingEdgeStrength,
                this.size.height,
            ),
        )

        drawRect(
            brush = Brush.horizontalGradient(
                colors = listOf(
                    Color.Transparent,
                    color,
                ),
                startX = size.width - endFadingEdgeStrength,
                endX = size.width,
            ),
            topLeft = Offset(x = size.width - endFadingEdgeStrength, y = 0f),
        )
    }
}

Question: How to implement a fade effect in horizontal scrollable column?

I expecting this behaviour (it's a table implement via a SwiftUI framework

答案1

得分: 0

你可以使用以下方式应用它：

val state = rememberScrollState()

Row(
    Modifier.horizontalFadingEdge(state, 20.dp, Yellow).horizontalScroll(state)
) {
    //....
}

在Modifier.horizontalFadingEdge中，最好将scrollFromStart和scrollFromEnd更改为：

val scrollFromStart by derivedStateOf { scrollState.value }
val scrollFromEnd by derivedStateOf { scrollState.maxValue - scrollState.value }

    val state = rememberScrollState()

    Row(
        Modifier.horizontalFadingEdge(state, 20.dp, Yellow).horizontalScroll(state)
    ) {
        //....
    }

    val scrollFromStart by derivedStateOf { scrollState.value }
    val scrollFromEnd by derivedStateOf { scrollState.maxValue - scrollState.value }