Jetpack Compose Navigation 的使用

Compose 版本：1.0.0-beta08

Navigation 版本：2.4.0-alpha02

添加依赖

implementation("androidx.navigation:navigation-compose:2.4.0-alpha02")

代码示例

实现点击列表中的一项内容，调整至详情页面

• 新闻列表

data class News(
    val id: Int,
    val title: String,
    val summary: String
)

@ExperimentalMaterialApi
@Composable
fun NewsList(toDetail: (Int) -> Unit) {
    val mockData = arrayListOf<News>()
    for (i in 0..20) {
        mockData.add(News(i, "新闻标题 $i", "新闻摘要 $i"))
    }

    LazyColumn {
        items(mockData) {
            Card(
                modifier = Modifier.padding(6.dp),
                onClick = {
                    toDetail(it.id)
                }
            ) {
                Column(
                    modifier = Modifier
                        .fillMaxWidth()
                        .height(50.dp)
                        .padding(3.dp)
                ) {
                    Text(text = it.title, style = MaterialTheme.typography.h6)
                    Text(text = it.summary, style = MaterialTheme.typography.body2)
                }
            }

        }
    }
}

• 新闻详情

@Composable
fun NewsDetail(id: Int) {
    Box(
        modifier = Modifier
            .fillMaxSize()
            .background(MaterialTheme.colors.background),
        contentAlignment = Alignment.Center
    ) {
        Text(text = "当前查看的内容 id 为：$id", style = MaterialTheme.typography.subtitle1)
    }
}

• NavGraph.kt

import androidx.compose.foundation.rememberScrollState
import androidx.compose.material.ExperimentalMaterialApi
import androidx.compose.runtime.Composable
import androidx.navigation.NavHostController
import androidx.navigation.NavType
import androidx.navigation.compose.NavHost
import androidx.navigation.compose.composable
import androidx.navigation.compose.navArgument
import cn.wthee.compose.navigation.ui.NewsDetail
import cn.wthee.compose.navigation.ui.NewsList

/**
 * 跳转地址
 */
object NavRoute {
    const val HOME = "home"
    const val DETAIL = "detail"
    const val ID = "id"

}

@ExperimentalMaterialApi
@Composable
fun NavGraph(navHostController: NavHostController, actions: NavActions) {

    NavHost(navController = navHostController, startDestination = NavRoute.HOME){
        //首页
        composable(NavRoute.HOME){
            NewsList(actions.toDetail)
        }

        //详情
        composable(
            "${NavRoute.DETAIL}/{${NavRoute.ID}}",
            arguments = listOf(navArgument(NavRoute.ID) {
                type = NavType.IntType
            })
        ) {
            val arguments = requireNotNull(it.arguments)
            val id = arguments.getInt(NavRoute.ID)

            NewsDetail(id = id)
        }
    }
}

class NavActions(navHostController: NavHostController) {

    val toDetail: (Int) -> Unit = { id: Int ->
        navHostController.navigate("${NavRoute.DETAIL}/${id}")
    }
}

• MainActivity

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.material.ExperimentalMaterialApi
import androidx.compose.material.MaterialTheme
import androidx.compose.material.Surface
import androidx.compose.ui.graphics.Color
import androidx.navigation.compose.rememberNavController
import cn.wthee.compose.navigation.ui.theme.SamplesTheme

class MainActivity : ComponentActivity() {
    @ExperimentalMaterialApi
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            SamplesTheme {
                val navHostController = rememberNavController()
                Surface(color = Color.Gray) {
                    NavGraph(
                        navHostController = navHostController,
                        actions = NavActions(navHostController)
                    )
                }
            }
        }
    }
}