Android jetpack 撰写没有 xml 的片段 [英] Android jetpack compose fragment without xml

问题描述

晚安！我正在使用 drawerContent 和 navigationIcon 创建菜单，但是我可以创建一个没有 xml 的 Fragment() 吗?在撰写喷气背包.如果有人有任何参考资料，我将不胜感激...

解决方案

使用 Compose，您可以尝试不同的东西.
您可以使用

Goodnight! I'm using drawerContent and navigationIcon to create the menu, but can I create a Fragment () without xml? in compose jetpack. If anyone has any references I would be grateful ...

解决方案

With Compose you can try something different.
You can navigate between composables using the Navigation component (currently in 1.0.0-alpha10)

Create a NavController with:

val navController = rememberNavController()

and define a NavHost with the destinations:

NavHost(
    navController,
    startDestination = "entry1"
) {
    composable("entry1") { Entry1(..) }
    composable("entry2") { Entry2(..) }
    composable("entry3") { Entry3(..) }
}

To simplify the navigation just create a sealed class (it is not mandatory).

sealed class Screen(val route: String, @StringRes val resourceId: Int) {
    object Entry1 : Screen("entry1", R.string.entry1)
    object Entry2 : Screen("entry2", R.string.entry2)
    object Entry3 : Screen("entry3", R.string.entry3)
}

and change the NavHost to:

NavHost(
    navController,
    startDestination = Screen.Entry1.route
) {
    composable(Screen.Entry1.route) { Entry1(/*..*/) }
    composable(Screen.Entry2.route) { Entry2(/*..*/) }
    composable(Screen.Entry3.route) { Entry3(/*..*/) }
}

Now just use a Scaffold to create a drawerContent and navigationIcon to open the menu and navigate to the destination:

val navController = rememberNavController()
val current by navController.currentBackStackEntryAsState()
val scaffoldState = rememberScaffoldState()
val scope = rememberCoroutineScope()

val items = listOf(
    Screen.Entry1,
    Screen.Entry2,
    Screen.Entry3
)

Scaffold(
    scaffoldState = scaffoldState,
    drawerContent = {
        //val currentRoute = current?.arguments?.getString(KEY_ROUTE)
        val currentRoute = current?.destination?.route

        items.forEach { screen ->
            val selected = currentRoute == screen.route
            val selectedColor = if (selected) Color.Yellow else Color.Transparent
            Row(modifier = Modifier
                .fillMaxWidth()
                .height(32.dp)
                .background(selectedColor)
                .clickable {
                    scope.launch { scaffoldState.drawerState.close()}
                    navController.navigate(screen.route) {
                        popUpTo = navController.graph.startDestination
                        launchSingleTop = true
                    }
                }) {
                   Text(stringResource(screen.resourceId))
            }
        }
    },
    topBar = {
        TopAppBar(){
            IconButton(
                onClick = {
                    scope.launch { scaffoldState.drawerState.open() }
                }
            ) {
                Icon(Icons.Filled.Menu,"")
            }
        }
    },
    content = {
        NavHost(
            navController,
            startDestination = Screen.Entry1.route
        ) {
          composable(Screen.Entry1.route) { Entry1(/*..*/) }
          composable(Screen.Entry2.route) { Entry2(/*..*/) }
          composable(Screen.Entry3.route) { Entry3(/*..*/) }
        }
    }
)

where:

@Composable
fun Entry1(navigateTo: () -> Unit) {

    Column(){
         /*.....*/
    }
}

这篇关于Android jetpack 撰写没有 xml 的片段的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！