Jetpack Compose单Activity架构下如何实现不同页面组差异化基础背景

实现方案 #

这里提供两种常用的落地方案，可根据业务复杂度选择：

方案1：主Activity统一根据路由分组控制背景 #

如果使用Navigation Compose，可以直接在主Activity的根布局监听当前路由，按路由分组加载对应背景，不需要每个页面单独写背景代码：

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            val navController = rememberNavController()
            // 监听当前路由变化
            val currentRoute by navController.currentBackStackEntryAsState()
            // 定义属于认证分组的页面路由
            val isAuthPage = currentRoute?.destination?.route in listOf("login", "register")
            
            Box(modifier = Modifier.fillMaxSize()) {
                // 只有认证分组的页面显示登录背景
                if (isAuthPage) {
                    Image(
                        painter = painterResource(id = R.drawable.login_background),
                        contentDescription = null,
                        contentScale = ContentScale.Crop,
                        modifier = Modifier.fillMaxSize()
                    )
                } else {
                    // 控制台等其他业务页面的默认背景，可自定义为纯色/其他背景
                    Surface(modifier = Modifier.fillMaxSize(), color = MaterialTheme.colors.background) {}
                }
                // 导航宿主直接放在背景上层即可
                NavHost(navController = navController, startDestination = "login") {
                    composable("login") { LoginScreen(navController) }
                    composable("register") { RegisterScreen(navController) }
                    composable("console") { ConsoleScreen(navController) }
                    // 其他业务页面路由
                }
            }
        }
    }
}

使用该方案后，原有LoginScreen和RegisterScreen里的外层Box和背景Image可以直接删除，只保留内容部分代码即可，背景统一由Activity管理，完全不会重复。

方案2：封装认证页公共容器，按需引入 #

如果后续业务可能出现更多自定义背景的页面，不想把背景逻辑耦合在Activity中，可以抽离公共的认证页容器组件：

// 抽离的认证页公共容器，统一处理背景、内容对齐等公共逻辑
@Composable
fun AuthScreenContainer(
    content: @Composable () -> Unit
) {
    Box(
        modifier = Modifier.fillMaxSize(),
        contentAlignment = Alignment.BottomCenter
    ) {
        Image(
            painter = painterResource(id = R.drawable.login_background),
            contentDescription = null,
            contentScale = ContentScale.Crop,
            modifier = Modifier.fillMaxSize()
        )
        // 插槽传入页面内容
        content()
    }
}

然后登录注册页直接套入这个容器即可，比如修改后的LoginScreen：

@Composable
fun LoginScreen(navController: NavController) {
    AuthScreenContainer {
        // 这里只保留原来的ConstraintLayout内容部分即可，不需要再写背景和外层Box
        ConstraintLayout {
            val surface = createRef()
            Surface(
                Modifier
                    .fillMaxWidth()
                    .height(370.dp)
                    .clip(RoundedCornerShape(topStartPercent = 8, topEndPercent = 8))
                    .constrainAs(surface) {
                        bottom.linkTo(parent.bottom)
                    },
                color = Color.White
            ) {
                // 原有输入框、按钮等内容保持不变
            }
        }
    }
}

注册页同理修改即可，控制台等其他业务页面不需要套入这个容器，自然就不会显示登录背景。

选型建议 #

• 业务简单、页面背景分组固定选方案1，维护成本最低，所有背景逻辑统一管理
• 业务复杂、后续可能有多种不同背景的页面分组选方案2，解耦性更强，扩展更灵活

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