Android Compose多模块架构下Scaffold组件TopBar与BottomBar的动态管理方案咨询

Hey there! Let's tackle this common modular Compose navigation problem together—great question, since balancing module independence with shared UI elements like TopBar/BottomBar is tricky. Here are a few elegant, clean architecture-aligned solutions you can try:

1. Use CompositionLocal for Decoupled UI State Sharing #

This approach lets you avoid passing appState through every composable by providing a scoped state that modules can access directly. The key is to define shared state classes and CompositionLocal instances in a shared base module (like :base-ui) so all business modules can depend on it without coupling to the :app module.

Step 1: Define Shared State & CompositionLocal (in :base-ui) #

// Shared state classes for Top/Bottom Bar
data class TopBarState(
    val title: String = "",
    val leftIcon: @Composable () -> Unit = {},
    val rightIcon: @Composable () -> Unit = {}
)

data class BottomBarState(
    val isVisible: Boolean = true
)

// CompositionLocal instances to expose the state
val LocalTopBarState = compositionLocalOf { mutableStateOf(TopBarState()) }
val LocalBottomBarState = compositionLocalOf { mutableStateOf(BottomBarState()) }

Step 2: Provide State in the :app Module #

Wrap your root Scaffold with CompositionLocalProvider to make the state available to all nested composables:

@Composable
fun MainApp() {
    val topBarState = remember { mutableStateOf(TopBarState()) }
    val bottomBarState = remember { mutableStateOf(BottomBarState()) }

    CompositionLocalProvider(
        LocalTopBarState provides topBarState,
        LocalBottomBarState provides bottomBarState
    ) {
        Scaffold(
            topBar = {
                val currentState = topBarState.value
                TopBar(
                    title = currentState.title,
                    leftIcon = currentState.leftIcon,
                    rightIcon = currentState.rightIcon
                )
            },
            bottomBar = {
                if (bottomBarState.value.isVisible) BottomBar()
            }
        ) { paddingValues ->
            NavHost(navController = rememberNavController(), startDestination = "home") {
                // Register your module routes here
                composable("module_a_screen") { ModuleAScreen() }
                composable("module_b_screen") { ModuleBScreen() }
            }
        }
    }
}

Step 3: Update State from Module Pages #

In your business modules, access the CompositionLocal to update the bar states when the screen loads:

@Composable
fun ModuleAScreen() {
    val topBarState = LocalTopBarState.current
    val bottomBarState = LocalBottomBarState.current

    // Update states when the screen enters composition
    LaunchedEffect(Unit) {
        topBarState.value = TopBarState(
            title = "Module A Home",
            leftIcon = { Icon(Icons.Rounded.ArrowBack, contentDescription = "Back") },
            rightIcon = { Icon(Icons.Rounded.Settings, contentDescription = "Settings") }
        )
        bottomBarState.value = BottomBarState(isVisible = false)
    }

    // Your screen content here
    Column(modifier = Modifier.fillMaxSize()) {
        Text(text = "Module A Content")
    }
}

2. Leverage Navigation BackStackEntry for Stateless Module Communication #

If you want to keep modules completely decoupled from any shared state, use navigation arguments and listen to backstack changes in the :app module. This way, modules only need to pass data via navigation routes, and the :app module handles updating the bars.

Step 1: Define Navigation Parameters in Modules #

Each module can define its own route and required parameters:

// In :module-a
object ModuleANavRoutes {
    const val ROUTE = "module_a_screen"
    const val PARAM_TITLE = "title"
    const val PARAM_BOTTOM_BAR_VISIBLE = "bottom_bar_visible"
}

Step 2: Listen to BackStack Changes in :app #

Watch the current backstack entry and update bar states based on the route's arguments:

@Composable
fun MainApp() {
    val navController = rememberNavController()
    val currentBackStackEntry by navController.currentBackStackEntryAsState()

    val topBarState = remember { mutableStateOf(TopBarState()) }
    val bottomBarState = remember { mutableStateOf(BottomBarState()) }

    // Update bars when the current screen changes
    LaunchedEffect(currentBackStackEntry) {
        currentBackStackEntry?.let { entry ->
            val args = entry.arguments ?: return@let
            // Parse basic parameters
            val title = args.getString(ModuleANavRoutes.PARAM_TITLE) ?: ""
            val isBottomBarVisible = args.getBoolean(ModuleANavRoutes.PARAM_BOTTOM_BAR_VISIBLE, true)
            
            // For icons: Use an enum or sealed class to define icon types, then map to composables in :app
            val leftIcon = when (entry.destination.route) {
                ModuleANavRoutes.ROUTE -> { Icon(Icons.Rounded.ArrowBack, contentDescription = "Back") }
                else -> {}
            }

            topBarState.value = topBarState.value.copy(title = title, leftIcon = { leftIcon })
            bottomBarState.value = bottomBarState.value.copy(isVisible = isBottomBarVisible)
        }
    }

    // Scaffold and NavHost setup as before
}

Step 3: Navigate with Parameters from Modules #

When navigating to a module screen, pass the required parameters:

// In a module's composable
navController.navigate(
    "${ModuleANavRoutes.ROUTE}?" +
    "${ModuleANavRoutes.PARAM_TITLE}=Module A Home&" +
    "${ModuleANavRoutes.PARAM_BOTTOM_BAR_VISIBLE}=false"
)

3. Shared ViewModel with StateFlow (For Complex State) #

If you need to handle more complex UI state (like dynamic icon interactions or state persistence), use a shared ViewModel in :base-ui that modules can update, and the :app module can observe.

Step 1: Create a Global UI ViewModel (in :base-ui) #

class GlobalUiViewModel : ViewModel() {
    private val _topBarState = MutableStateFlow(TopBarState())
    val topBarState: StateFlow<TopBarState> = _topBarState

    private val _bottomBarState = MutableStateFlow(BottomBarState())
    val bottomBarState: StateFlow<BottomBarState> = _bottomBarState

    fun updateTopBar(state: TopBarState) {
        _topBarState.value = state
    }

    fun updateBottomBar(state: BottomBarState) {
        _bottomBarState.value = state
    }
}

Step 2: Observe State in :app #

@Composable
fun MainApp() {
    val globalUiViewModel: GlobalUiViewModel = viewModel()
    val topBarState by globalUiViewModel.topBarState.collectAsStateWithLifecycle()
    val bottomBarState by globalUiViewModel.bottomBarState.collectAsStateWithLifecycle()

    Scaffold(
        topBar = { TopBar(topBarState.title, topBarState.leftIcon, topBarState.rightIcon) },
        bottomBar = { if (bottomBarState.isVisible) BottomBar() }
    ) {
        // NavHost setup
    }
}

Step 3: Update State from Modules #

@Composable
fun ModuleAScreen() {
    val globalUiViewModel: GlobalUiViewModel = viewModel()

    LaunchedEffect(Unit) {
        globalUiViewModel.updateTopBar(
            TopBarState(
                title = "Module A Home",
                leftIcon = { Icon(Icons.Rounded.ArrowBack, contentDescription = "Back") }
            )
        )
        globalUiViewModel.updateBottomBar(BottomBarState(isVisible = false))
    }
}

Which to Choose? #

• CompositionLocal: Best for simple, one-way state updates where you want minimal boilerplate and loose coupling.
• Navigation Parameters: Ideal if you want modules to be completely stateless and independent of shared state classes.
• Shared ViewModel: Great for complex state needs (like handling icon clicks or state restoration) where you need centralized state management.

All these approaches keep your modules 99% independent while letting the :app module own the shared Top/Bottom Bar logic—perfect for clean architecture principles.

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