{"id":1579,"date":"2021-06-09T16:31:43","date_gmt":"2021-06-09T08:31:43","guid":{"rendered":"https:\/\/wthee.xyz\/?p=1579"},"modified":"2021-06-09T16:31:43","modified_gmt":"2021-06-09T08:31:43","slug":"jetpack-compose-navigation-%e7%9a%84%e4%bd%bf%e7%94%a8","status":"publish","type":"post","link":"https:\/\/wthee.xyz\/index.php\/2021\/06\/09\/jetpack-compose-navigation-%e7%9a%84%e4%bd%bf%e7%94%a8\/","title":{"rendered":"Jetpack Compose Navigation \u7684\u4f7f\u7528"},"content":{"rendered":"
\n

Compose \u7248\u672c\uff1a1.0.0-beta08<\/p>\n

Navigation \u7248\u672c\uff1a2.4.0-alpha02<\/p>\n<\/blockquote>\n

\u6dfb\u52a0\u4f9d\u8d56<\/h4>\n
implementation("androidx.navigation:navigation-compose:2.4.0-alpha02")<\/code><\/pre>\n
\u4ee3\u7801\u793a\u4f8b<\/h4>\n
\n
\u5b9e\u73b0\u70b9\u51fb\u5217\u8868\u4e2d\u7684\u4e00\u9879\u5185\u5bb9\uff0c\u8c03\u6574\u81f3\u8be6\u60c5\u9875\u9762<\/p>\n<\/blockquote>\n
    \n
  • \u65b0\u95fb\u5217\u8868<\/li>\n<\/ul>\n
    data class News(\n    val id: Int,\n    val title: String,\n    val summary: String\n)\n\n@ExperimentalMaterialApi\n@Composable\nfun NewsList(toDetail: (Int) -> Unit) {\n    val mockData = arrayListOf<News>()\n    for (i in 0..20) {\n        mockData.add(News(i, "\u65b0\u95fb\u6807\u9898 $i", "\u65b0\u95fb\u6458\u8981 $i"))\n    }\n\n    LazyColumn {\n        items(mockData) {\n            Card(\n                modifier = Modifier.padding(6.dp),\n                onClick = {\n                    toDetail(it.id)\n                }\n            ) {\n                Column(\n                    modifier = Modifier\n                        .fillMaxWidth()\n                        .height(50.dp)\n                        .padding(3.dp)\n                ) {\n                    Text(text = it.title, style = MaterialTheme.typography.h6)\n                    Text(text = it.summary, style = MaterialTheme.typography.body2)\n                }\n            }\n\n        }\n    }\n}<\/code><\/pre>\n
      \n
    • \u65b0\u95fb\u8be6\u60c5<\/li>\n<\/ul>\n
      @Composable\nfun NewsDetail(id: Int) {\n    Box(\n        modifier = Modifier\n            .fillMaxSize()\n            .background(MaterialTheme.colors.background),\n        contentAlignment = Alignment.Center\n    ) {\n        Text(text = "\u5f53\u524d\u67e5\u770b\u7684\u5185\u5bb9 id \u4e3a\uff1a$id", style = MaterialTheme.typography.subtitle1)\n    }\n}<\/code><\/pre>\n
        \n
      • NavGraph.kt<\/li>\n<\/ul>\n
        import androidx.compose.foundation.rememberScrollState\nimport androidx.compose.material.ExperimentalMaterialApi\nimport androidx.compose.runtime.Composable\nimport androidx.navigation.NavHostController\nimport androidx.navigation.NavType\nimport androidx.navigation.compose.NavHost\nimport androidx.navigation.compose.composable\nimport androidx.navigation.compose.navArgument\nimport cn.wthee.compose.navigation.ui.NewsDetail\nimport cn.wthee.compose.navigation.ui.NewsList\n\n\/**\n * \u8df3\u8f6c\u5730\u5740\n *\/\nobject NavRoute {\n    const val HOME = "home"\n    const val DETAIL = "detail"\n    const val ID = "id"\n\n}\n\n@ExperimentalMaterialApi\n@Composable\nfun NavGraph(navHostController: NavHostController, actions: NavActions) {\n\n    NavHost(navController = navHostController, startDestination = NavRoute.HOME){\n        \/\/\u9996\u9875\n        composable(NavRoute.HOME){\n            NewsList(actions.toDetail)\n        }\n\n        \/\/\u8be6\u60c5\n        composable(\n            "${NavRoute.DETAIL}\/{${NavRoute.ID}}",\n            arguments = listOf(navArgument(NavRoute.ID) {\n                type = NavType.IntType\n            })\n        ) {\n            val arguments = requireNotNull(it.arguments)\n            val id = arguments.getInt(NavRoute.ID)\n\n            NewsDetail(id = id)\n        }\n    }\n}\n\nclass NavActions(navHostController: NavHostController) {\n\n    val toDetail: (Int) -> Unit = { id: Int ->\n        navHostController.navigate("${NavRoute.DETAIL}\/${id}")\n    }\n}<\/code><\/pre>\n
          \n
        • MainActivity<\/li>\n<\/ul>\n
          import android.os.Bundle\nimport androidx.activity.ComponentActivity\nimport androidx.activity.compose.setContent\nimport androidx.compose.material.ExperimentalMaterialApi\nimport androidx.compose.material.MaterialTheme\nimport androidx.compose.material.Surface\nimport androidx.compose.ui.graphics.Color\nimport androidx.navigation.compose.rememberNavController\nimport cn.wthee.compose.navigation.ui.theme.SamplesTheme\n\nclass MainActivity : ComponentActivity() {\n    @ExperimentalMaterialApi\n    override fun onCreate(savedInstanceState: Bundle?) {\n        super.onCreate(savedInstanceState)\n        setContent {\n            SamplesTheme {\n                val navHostController = rememberNavController()\n                Surface(color = Color.Gray) {\n                    NavGraph(\n                        navHostController = navHostController,\n                        actions = NavActions(navHostController)\n                    )\n                }\n            }\n        }\n    }\n}<\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"
          Compose \u7248\u672c\uff1a1.0.0-beta08 Navigation \u7248\u672c\uff1a2.4.0-alpha02 \u6dfb\u52a0\u4f9d…<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"jetpack_post_was_ever_published":false,"_kad_post_transparent":"default","_kad_post_title":"default","_kad_post_layout":"default","_kad_post_sidebar_id":"","_kad_post_content_style":"default","_kad_post_vertical_padding":"default","_kad_post_feature":"","_kad_post_feature_position":"","_kad_post_header":false,"_kad_post_footer":false,"_kad_post_classname":"","_jetpack_newsletter_access":""},"categories":[3,19],"tags":[],"jetpack_featured_media_url":"","jetpack_shortlink":"https:\/\/wp.me\/pcwHG0-pt","jetpack-related-posts":[{"id":1563,"url":"https:\/\/wthee.xyz\/index.php\/2021\/06\/08\/jetpack-compose-chipgroup\/","url_meta":{"origin":1579,"position":0},"title":"Jetpack Compose ChipGroup","author":"wthee","date":"2021\u5e746\u67088\u65e5","format":false,"excerpt":"\u5b9e\u73b0 ChipGroup \u7ec4\u4ef6","rel":"","context":"\u5728\u201cAndroid \u5f00\u53d1\u201d\u4e2d","block_context":{"text":"Android \u5f00\u53d1","link":"https:\/\/wthee.xyz\/index.php\/category\/android\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":1576,"url":"https:\/\/wthee.xyz\/index.php\/2021\/06\/09\/jetpack-compose-%e6%8b%96%e5%8a%a8%e6%95%88%e6%9e%9c\/","url_meta":{"origin":1579,"position":1},"title":"Jetpack Compose \u62d6\u52a8\u6548\u679c","author":"wthee","date":"2021\u5e746\u67089\u65e5","format":false,"excerpt":"\u5229\u7528 Modifier.draggable \u76d1\u542c\u62d6\u52a8\u8ddd\u79bb\uff0c\u5b9e\u73b0\u62d6\u52a8\u6548\u679c","rel":"","context":"\u5728\u201cAndroid \u5f00\u53d1\u201d\u4e2d","block_context":{"text":"Android \u5f00\u53d1","link":"https:\/\/wthee.xyz\/index.php\/category\/android\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":1569,"url":"https:\/\/wthee.xyz\/index.php\/2021\/06\/08\/jetpack-compose-%e6%9d%83%e9%99%90%e7%94%b3%e8%af%b7\/","url_meta":{"origin":1579,"position":2},"title":"Jetpack Compose \u6743\u9650\u7533\u8bf7","author":"wthee","date":"2021\u5e746\u67088\u65e5","format":false,"excerpt":"\u5728 Jetpack Compose \u4e2d\uff0c\u7533\u8bf7\u6743\u9650\u7684\u4e00\u79cd\u65b9\u5f0f","rel":"","context":"\u5728\u201cAndroid \u5f00\u53d1\u201d\u4e2d","block_context":{"text":"Android \u5f00\u53d1","link":"https:\/\/wthee.xyz\/index.php\/category\/android\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":1573,"url":"https:\/\/wthee.xyz\/index.php\/2021\/06\/08\/jetpack-compose-%e5%ae%9e%e7%8e%b0%e6%bb%91%e5%8a%a8%e6%8a%98%e5%8f%a0%e6%95%88%e6%9e%9c\/","url_meta":{"origin":1579,"position":3},"title":"Jetpack Compose \u5b9e\u73b0\u6ed1\u52a8\u6298\u53e0\u6548\u679c","author":"wthee","date":"2021\u5e746\u67088\u65e5","format":false,"excerpt":"\u5229\u7528 rememberScrollState() \uff0c\u5b9e\u73b0\u6ed1\u52a8\u6298\u53e0\u7684\u6548\u679c","rel":"","context":"\u5728\u201cAndroid \u5f00\u53d1\u201d\u4e2d","block_context":{"text":"Android \u5f00\u53d1","link":"https:\/\/wthee.xyz\/index.php\/category\/android\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":1571,"url":"https:\/\/wthee.xyz\/index.php\/2021\/06\/08\/jetpack-compose-%e4%bd%bf%e7%94%a8-coil-%e5%8a%a0%e8%bd%bd%e5%9b%be%e7%89%87\/","url_meta":{"origin":1579,"position":4},"title":"Jetpack Compose \u4f7f\u7528 Coil \u52a0\u8f7d\u56fe\u7247","author":"wthee","date":"2021\u5e746\u67088\u65e5","format":false,"excerpt":"Accompanist \u63d0\u4f9b\u4e86\u6613\u4e8e\u4f7f\u7528\u7684 Painter\uff0c\u5b83\u53ef\u4ee5\u4f7f\u7528 Coil \u56fe\u50cf\u52a0\u8f7d\u5e93\u4ece\u5916\u90e8\u6765\u6e90\u2026","rel":"","context":"\u5728\u201cAndroid \u5f00\u53d1\u201d\u4e2d","block_context":{"text":"Android \u5f00\u53d1","link":"https:\/\/wthee.xyz\/index.php\/category\/android\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":1555,"url":"https:\/\/wthee.xyz\/index.php\/2021\/05\/31\/jetpack-compose-%e5%85%a5%e9%97%a8%e5%bf%85%e7%9c%8b%e7%9a%84%e6%96%87%e6%a1%a3-%e9%a1%b9%e7%9b%ae\/","url_meta":{"origin":1579,"position":5},"title":"Jetpack Compose \u5165\u95e8\u5fc5\u770b\u7684\u6587\u6863\/\u9879\u76ee","author":"wthee","date":"2021\u5e745\u670831\u65e5","format":false,"excerpt":"Jetpack Compose \u76f8\u5173\u7684\u4e00\u4e9b\u6587\u6863\/\u9879\u76ee\u6c47\u603b","rel":"","context":"\u5728\u201cJetpack Compose\u201d\u4e2d","block_context":{"text":"Jetpack Compose","link":"https:\/\/wthee.xyz\/index.php\/category\/android\/jetpack-compose\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/wthee.xyz\/wp-content\/uploads\/2021\/05\/jetpack_compose.png?fit=1200%2C675&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/wthee.xyz\/wp-content\/uploads\/2021\/05\/jetpack_compose.png?fit=1200%2C675&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/wthee.xyz\/wp-content\/uploads\/2021\/05\/jetpack_compose.png?fit=1200%2C675&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/wthee.xyz\/wp-content\/uploads\/2021\/05\/jetpack_compose.png?fit=1200%2C675&ssl=1&resize=700%2C400 2x, https:\/\/i0.wp.com\/wthee.xyz\/wp-content\/uploads\/2021\/05\/jetpack_compose.png?fit=1200%2C675&ssl=1&resize=1050%2C600 3x"},"classes":[]}],"_links":{"self":[{"href":"https:\/\/wthee.xyz\/index.php\/wp-json\/wp\/v2\/posts\/1579"}],"collection":[{"href":"https:\/\/wthee.xyz\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wthee.xyz\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wthee.xyz\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/wthee.xyz\/index.php\/wp-json\/wp\/v2\/comments?post=1579"}],"version-history":[{"count":2,"href":"https:\/\/wthee.xyz\/index.php\/wp-json\/wp\/v2\/posts\/1579\/revisions"}],"predecessor-version":[{"id":1581,"href":"https:\/\/wthee.xyz\/index.php\/wp-json\/wp\/v2\/posts\/1579\/revisions\/1581"}],"wp:attachment":[{"href":"https:\/\/wthee.xyz\/index.php\/wp-json\/wp\/v2\/media?parent=1579"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wthee.xyz\/index.php\/wp-json\/wp\/v2\/categories?post=1579"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wthee.xyz\/index.php\/wp-json\/wp\/v2\/tags?post=1579"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}