Повторное использование столбца с повторяющимся кодом при составлении реактивного ранца

Question

У меня есть компонуемая функция, в которой некоторый код дублируется в состоянии. Оба имеют одинаковый тип пользовательского интерфейса, но разные компоненты. Внутренняя логика пользовательского интерфейса аналогична этому ответу . Я хочу, чтобы здесь была такая же логика пользовательского интерфейса.

Xyz

      @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. Как мы можем оптимизироватьifсостояние обоих сelseсостояние обоихColumn.

Если у вас есть вопрос, пожалуйста, спросите меня. Большое спасибо

Answer 1

Вы можете использовать макеты Jetpack Compose на основе слотов , что значительно повышает возможность повторного использования.

Слот в основном создает контент:@Composable () -> Unitкак параметры, такие как Scaffold, TopAppBar и другие Composables.

      @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внутри вашего контента