Jetpack Compose 函数与 lambda () -> Unit

Question

我正在尝试将应用于修饰符的方法提取到可组合函数中

 TopAppBar(
            modifier = Modifier
                .align(Alignment.TopCenter)
                .height(56.dp)
                .background(
                    brush = Brush.verticalGradient(
                        colorGradient
                    )
                )

特别是 Brush.verticalGradient()，这样我就可以在任何需要的地方使用渐变 Composable，只需将颜色列表传递给它即可。

我知道我需要在 Composable 函数中使用 lambda 表达式，但我不确定该怎么做。

@Composable
private fun BottomBarGradient(
    content: @Composable () -> Unit) {
}

我是 Compose 的新手。谁能为此指出一个好的 tutorial/example？

Answer 1

你走对了。但对于您的情况，在使用 TopAppBar/BottomAppBar 时，您需要应用 RowScope（例如 content: @Composable RowScope.() -> Unit）以获取更多信息，请参阅 function literal with receiver. I cannot tell were you can find specific information for you case but most can be found in android documentation or jetpack compose samples, for tutorial you can check google codelabs

您的自定义可组合项应如下所示：

val availableColors = listOf(
    Color.Black, Color.DarkGray,
    Color.Gray, Color.LightGray,
    Color.White, Color.Red,
    Color.Green, Color.Blue,
    Color.Yellow, Color.Cyan,
    Color.Magenta, Color.Transparent
)

@Composable
fun BottomBarVerticalGradient(
    modifier: Modifier = Modifier,
    content: @Composable RowScope.() -> Unit,
) {
    BottomAppBar(
        modifier = modifier.background(Brush.verticalGradient(colors = availableColors)),
        content = content,
        backgroundColor = Color.Transparent
    )
}

或更多自定义方式：

@Composable
fun BottomBarVerticalGradient(
    colors: List<Color>,
    modifier: Modifier = Modifier,
    startY: Float = 0f,
    endY: Float = Float.POSITIVE_INFINITY,
    tileMode: TileMode = TileMode.Clamp,
    shape: Shape = RectangleShape,
    alpha: Float = 1.0f,
    content: @Composable RowScope.() -> Unit,
) {
    BottomAppBar(
        modifier = modifier.background(
            brush = Brush.verticalGradient(colors = colors, startY, endY, tileMode),
            shape = shape,
            alpha = alpha
        ),
        content = content,
        backgroundColor = Color.Transparent
    )
}

或者这个：

@Composable
fun BottomBarVerticalGradient(
    vararg colorStops: Pair<Float, Color>,
    modifier: Modifier = Modifier,
    startY: Float = 0f,
    endY: Float = Float.POSITIVE_INFINITY,
    tileMode: TileMode = TileMode.Clamp,
    shape: Shape = RectangleShape,
    alpha: Float = 1.0f,
    content: @Composable RowScope.() -> Unit,
) {
    BottomAppBar(
        modifier = modifier.background(
            brush = Brush.verticalGradient(colorStops = colorStops, startY, endY, tileMode),
            shape = shape,
            alpha = alpha
        ),
        content = content,
        backgroundColor = Color.Transparent
    )
}

用法：

//Scaffold too should be more customizable (ex. modifier, scaffoldState)
@Composable
fun MySuperScaffold() {
    val colorsState = rememberSaveable { mutableStateOf(availableColors) }

    val shuffle: () -> Unit = {
        colorsState.value = availableColors.shuffled()
    }

    Scaffold(
        bottomBar = {
            BottomBarVerticalGradient(
                modifier = Modifier.height(56.dp).fillMaxWidth(),
                colors = colorsState.value
            ) {
                /* Your bottom bar content */
            }
        },
        content = { Button(onClick = shuffle) { Text("Shuffle") } },
    )
}

Jetpack Compose 函数与 lambda () -> Unit

Jetpack Compose function with lambda () -> Unit

lambda

android

modifier

kotlin

android-jetpack-compose