android - 在 Jetpack Compose 中重用具有重复代码的列

Question

我有可组合函数，因为在 if - else 条件下有些代码是重复的。 if - else 都具有相同类型的 UI，但组件不同。 if - else 内部 UI 逻辑类似于此 answer .我想要在这里使用相同的 UI 逻辑。

坐标

@Composable
fun Xyz(
    isTrue:Boolean,
    verticalArrangement: Arrangement.Vertical
) {
    AnimatedVisibility(true) {
        Column(
            modifier = Modifier
                .padding(10.dp)
                .fillMaxHeight()
                .verticalScroll(rememberScrollState()),
            verticalArrangement = verticalArrangement
        ) {
            if (isTrue) {
                Column(
                    modifier = Modifier
                        .verticalScroll(rememberScrollState())
                        .weight(1f),
                    horizontalAlignment = Alignment.CenterHorizontally,
                ) {
                    Image() // Duplicate code
                    Text() // Duplicate code
                    Image()
                    // more item in here
                }
                Column {
                    Button { action }
                    Button { action }
                }
            } else {
                Column(
                    modifier = Modifier
                        .verticalScroll(rememberScrollState())
                        .weight(1f),
                    horizontalAlignment = Alignment.CenterHorizontally,
                ) {
                    Image() // Duplicate code
                    Text() // Duplicate code
                    Image()
                    // more item in here
                }
                Column {
                    Button { action }
                }
            }
        }
    }
}

我正在添加@Preview 代码以加深理解

@Preview
@Composable
fun XyzPreviewTop(){
    Theme {
        Xyz(false, Arrangement.Top)
    }
}

@Preview
@Composable
fun XyzPreviewSpaceBetween(){
    Theme {
        Xyz(false, Arrangement.SpaceBetween)
    }
}

@Preview
@Composable
fun XyzPreviewOneSpaceTop(){
    Theme {
        Xyz(true, Arrangement.Top)
    }
}

@Preview
@Composable
fun XyzPreviewOneSpaceBetween(){
    Theme {
        Xyz(true, Arrangement.SpaceBetween)
    }
}

1. 在 if - else 条件中我提到了 Duplicate code 这意味着代码在两种情况下都在使用。

2. 我们如何优化 Column 的 if 条件和 Column 的 else 条件。

如果你有问题请问我。非常感谢

Answer 1

您可以使用 slot-based layouts Jetpack Compose 大大提高了可重用性。

Slot 基本上是在创建内容:@Composable () -> Unit 就像 Scaffold、TopAppBar 和其他 Composable 的参数一样。

@Composable
fun Xyz(
    isTrue:Boolean,
    content: @Composable ()-> Unit,
    verticalArrangement: Arrangement.Vertical
) {
    AnimatedVisibility(true) {
        Column(
            modifier = Modifier
                .padding(10.dp)
                .fillMaxHeight()
                .verticalScroll(rememberScrollState()),
            verticalArrangement = verticalArrangement
        ) {
            if (isTrue) {
                Column(
                    modifier = Modifier
                        .verticalScroll(rememberScrollState())
                        .weight(1f),
                    horizontalAlignment = Alignment.CenterHorizontally,
                ) {
                    content()
                }
                Column {
                    Button {  }
                    Button { action }
                }
            } else {
                Column(
                    modifier = Modifier
                        .verticalScroll(rememberScrollState())
                        .weight(1f),
                    horizontalAlignment = Alignment.CenterHorizontally,
                ) {
                    content()
                }
                Column {
                    Button { action }
                }
            }
        }
    }
}

并且您还为内容创建了一个 ColumnScope 接收器:@Composable ColumnScope.()-> Unit 它将允许您调用范围特定的修饰符，例如 Modifier.weight内容