Jetpack Compose中重复代码的Column复用优化咨询

优化思路 #

• 将重复的中间内容提取为独立的Composable组件，实现一处修改多处复用
• 仅在差异部分（底部按钮数量）做条件判断，避免整个布局结构重复

优化后的完整代码 #

@Composable
fun Xyz(
    isTrue: Boolean,
    verticalArrangement: Arrangement.Vertical
) {
    AnimatedVisibility(true) {
        Column(
            modifier = Modifier
                .padding(10.dp)
                .fillMaxHeight()
                .verticalScroll(rememberScrollState()),
            verticalArrangement = verticalArrangement
        ) {
            // 复用提取后的内容组件
            ContentBody()
            
            // 仅在按钮区域做条件判断
            Column {
                Button(onClick = { /* action */ }) {
                    Text("按钮1")
                }
                // 根据isTrue决定是否显示第二个按钮
                if (isTrue) {
                    Button(onClick = { /* action */ }) {
                        Text("按钮2")
                    }
                }
            }
        }
    }
}

// 提取重复的中间UI为独立Composable
@Composable
private fun ContentBody() {
    Column(
        modifier = Modifier
            .verticalScroll(rememberScrollState())
            .weight(1f),
        horizontalAlignment = Alignment.CenterHorizontally,
    ) {
        Image(painter = painterResource(id = R.drawable.ic_launcher_foreground), contentDescription = "")
        Text(text = "示例文本")
        Image(painter = painterResource(id = R.drawable.ic_launcher_foreground), contentDescription = "")
        // 更多内容可以继续添加在这里
    }
}

// 预览代码保持不变
@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)
    }
}

优化说明 #

• 复用核心内容：把两个分支中完全重复的Image、Text等内容放到ContentBody组件中，任何需要修改这部分UI时只需改一处
• 缩小判断范围：将原本包裹整个布局的if-else，缩小到仅控制第二个按钮的显示，保留了原有布局结构的同时消除冗余
• 兼容性保留：所有预览代码无需修改，原有功能和布局效果完全一致

内容的提问来源于stack exchange，提问作者Compose Learner