android - Jetpack Compose 仅​​导航屏幕的某些部分并让页面从根 Composable 显示工具栏

Question

我有Toolbar和内容可组合在Scaffold.

当我从一个可组合导航到另一个时，我希望从根可组合的工具栏可用，并有返回按钮返回上一页。如何使用可组合和导航来实现这一点。

class MainActivity : AppCompatActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)

        setContent {
            ComposeTutorialsTheme {
                ComposeNavigation()
            }
        }
    }

    @Composable
    fun ComposeNavigation() {

        // NavController for navigating between Composable Screens
        val navController = rememberNavController()

        // Create Tutorial List
        val tutorialList = createTutorialList()

        // Create Navigation for each Composable Page
        NavHost(
            navController = navController,
            startDestination = "start_destination"
        ) {

            composable("start_destination") {
                TutorialComponent(tutorialList, navController)
            }

            // Set navigation route as title of tutorial card
            // and invoke @Composable inside lambda of this card.
            tutorialList.forEach { model ->
                composable(model.title) {
                    model.action?.invoke()
                }
            }
        }
    }

    /**
     * This function contains [Scaffold] which implements
     * the basic material design visual layout structure, and [LazyColumn] which
     * is ```RecyclerView``` counterpart in compose.
     */
    @Composable
    private fun TutorialComponent(
        tutorialList: List<TutorialSectionModel>,
        navController: NavHostController
    ) {

        Scaffold(
            topBar = {
                TopAppBar(
                    title = {
                        Text(text = "Tutorial 1-1 Basics")
                    }
                )
            })
        {
            TutorialListContent(tutorialList, navController)
        }
    }

    @Composable
    private fun TutorialListContent(
        tutorialList: List<TutorialSectionModel>,
        navController: NavHostController
    ) {
        Surface(
            modifier = Modifier.fillMaxSize(),
            color = Color(0xffEEEEEE)
        ) {
            // List of Tutorials
            LazyColumn(
                modifier = Modifier.padding(top = 16.dp),
                content = {
                    items(tutorialList) { item: TutorialSectionModel ->
                        TutorialSectionCard(item) {
                            navController.navigate(item.title)
                        }
                    }
                })
        }
    }

    /**
     * Create list of tutorials with titles, action that navigates to composable function
     * inside lambda.
     *
     * * Tags are for search purposes if there is a Search Component exists.
     */
    @Composable
    private fun createTutorialList(): List<TutorialSectionModel> {

        val model = TutorialSectionModel(
            title = "1-1 Column/Row Basics",
            action = {
                Tutorial1_1Screen()
            },
            description = "Create Rows that adds elements in horizontal order, " +
                    "and Columns that adds elements in vertical order",
            tags = listOf("Compose", "Rows", "Columns", "Modifier")
        )

        val tutorialList = listOf(model)
        return tutorialList
    }
}

如果我改变

  composable("start_destination") {
                    TutorialComponent(tutorialList, navController)
                }

至

  composable("start_destination") {
                    TutorialListContent(tutorialList, navController)
                }

所有页面都没有工具栏。您还可以在下面看到代码的行为方式。

Answer 1

提取Scaffold，使其包裹NavHost. 所以而不是：

NavHost(
    navController = navController,
    startDestination = "start_destination"
) {
    composable("start_destination") {
        Scaffold {
            // content
        }
    }
    // other destinations
}

你想做这样的事情：

Scaffold {
    NavHost(
        navController = navController,
        startDestination = "start_destination"
    ) {
        composable("start_destination") {
            // content
        }
        // other destinations
    }
}