devbox
小小林熬夜学编程
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

compose--附带效应、传统项目集成、导航_remembercoroutinescope

作者：小小林熬夜学编程 | 2024-03-17 04:50:05

赞

踩

remembercoroutinescope

该文章将是compose基础系列中最后一篇，附带效应是这篇文章的重点，其余补充内容为如何在传统xml中集成compose、compose导航的使用

一、附带效应

有了前面的了解，我们知道compose中是由State状态发生改变来使得可组函数发生重组，状态的改变应该是在可组合函数作用域中，但有时我们需要它发生在别的作用域，如定时弹出一个消息，这就需要附带效应出场了，compose定义了一系列附带效应API，来运用在可组合函数作用域内外，发生状态改变的不同场景

1.LaunchedEffect

LaunchedEffect我们之前就已经使用过了，特别是在低级别动画时，LaunchedEffect用于安全地调用挂起函数，本质就是启动一个协程，LaunchedEffect的调用需要在可组合函数作用域内

LaunchedEffect的执行分为以下三种，优先级由上到下：

  • 当发生重组时LaunchedEffect退出组合，将取消协程
  • 当发生重组时如果LaunchedEffect使用的同一个key，只会执行第一次，如果上次LaunchedEffect没执行结束，不重新执行
  • 当发生重组时如果LaunchedEffect使用的不同的key，并且上次LaunchedEffect没执行结束，则取消上次执行，启动新的协程执行该次任务

例子：

  1. @Preview
  2. @Composable
  3. fun MyLaunchEffect() {
  4.     // 0cd5ba83-97c1-485e-87ff-272e4fd6afa7
  5.     var state by remember { mutableStateOf(false) }
  6.     var count by remember { mutableStateOf(0) }
  7.  
  8.     if (state) {
  9.         // key为Unit唯一值
  10.         LaunchedEffect(Unit) {
  11.             delay(3000)
  12.             count++
  13.         }
  14.     }
  15.  
  16.     Box(modifier = Modifier
  17.         .size(50.dp)
  18.         .background(Color.Cyan)
  19.         .clickable { state = !state }
  20.     ) {
  21.         Text("执行了${count}次")
  22.     }
  23. }

先是点击两下的效果，由于state为false时，没有LaunchedEffect的代码块，此时LaunchedEffect会取消：

稍微改变下例子的代码，一旦状态发生改变，那么重复执行LaunchedEffect：

  1. @Preview
  2. @Composable
  3. fun MyLaunchEffect2() {
  4.     var state by remember { mutableStateOf(0) }
  5.     var count by remember { mutableStateOf(0) }
  6.  
  7.     if (state > 0) {
  8.         // key为Unit唯一值
  9.         LaunchedEffect(Unit) {
  10.             delay(3000)
  11.             count++
  12.         }
  13.     }
  14.  
  15.     Box(modifier = Modifier
  16.         .size(50.dp)
  17.         .background(Color.Cyan)
  18.         .clickable { state++ }
  19.     ) {
  20.         Text("执行了${count}次")
  21.     }
  22. }

点击三下的效果，LaunchedEffect的key唯一，重复触发重组，key唯一时只会执行第一次的LaunchedEffect：

改变例子代码，每次执行的key不同：

  1. @Preview
  2. @Composable
  3. fun MyLaunchEffect3() {
  4.     var state by remember { mutableStateOf(0) }
  5.     var count by remember { mutableStateOf(0) }
  6.  
  7.     if (state > 0) {
  8.         // key为随机值
  9.         LaunchedEffect(UUID.randomUUID()) {
  10.             delay(3000)
  11.             // 置为0，防止不断重组导致一直执行LaunchedEffect
  12.             state = 0
  13.             count++
  14.         }
  15.     }
  16.  
  17.     Box(modifier = Modifier
  18.         .size(50.dp)
  19.         .background(Color.Cyan)
  20.         .clickable { state++ }
  21.     ) {
  22.         Text("执行了${count}次")
  23.     }
  24. }

效果，取消了之前的LaunchedEffect，隔了3秒后才发生count状态改变：

2.rememberCoroutineScope

rememberCoroutineScope也是使用过的，它返回一个remember的协程作用域，可以在可组合函数外使用，调用几次执行几次

例子：

  1. @Preview
  2. @Composable
  3. fun MyRememberCoroutineScope() {
  4.     val scope = rememberCoroutineScope()
  5.     var count by remember { mutableStateOf(0) }
  6.  
  7.     Box(modifier = Modifier
  8.         .size(50.dp)
  9.         .background(Color.Cyan)
  10.         .clickable {
  11.             scope.launch {
  12.                 delay(3000)
  13.                 count++;
  14.             }
  15.         }
  16.     ) {
  17.         Text("执行了${count}次")
  18.     }
  19. }

效果：

3.rememberUpdatedState

LaunchedEffect一旦启动，同一个key其内部的方法调用和引用都是final的，即无法更改，如果LaunchedEffect内使用的外部引用可能发生改变，应该使用rememberUpdatedState

3.1 不使用remember

先来看一个例子，我在重组时生成一个随机数，并作为onTimeout()的打印参数，将onTimeout()传给MyRememberUpdatedState，LaunchedEffect内调用onTimeout()打印这个随机数：

  1. @Preview
  2. @Composable
  3. fun MyTimeout() {
  4.     var state by remember { mutableStateOf(false) }
  5.  
  6.     Column {
  7.         // 1.生成随机数
  8.         val random = Random.nextInt()
  9.         Log.i("onTimeout", "return : $random")
  10.         MyRememberUpdatedState(state) {
  11.             // 4.打印随机数
  12.             Log.i("onTimeout", "onTimeout() return : $random")
  13.         }
  14.  
  15.         Button(onClick = { state = !state }) {
  16.             Text("click")
  17.         }
  18.     }
  19. }
  20.  
  21. @Composable
  22. fun MyRememberUpdatedState(enable: Boolean, onTimeout: () -> Unit) {
  23.     // 使用rememberUpdatedState
  24. //    val rememberUpdatedState by rememberUpdatedState(onTimeout)
  25.     val rememberUpdatedState = onTimeout
  26.  
  27.     // 2.key唯一发生重组，不会重新执行
  28.     LaunchedEffect(true) {
  29.         delay(5000)
  30.         // 3.延迟5s，调用外部传入的onTimeout()
  31.         rememberUpdatedState()
  32.     }
  33.  
  34.     if (enable)
  35.         Text("hi")
  36.     else
  37.         Text("hello")
  38. }

我点击多次，这次的效果直接看日志即可：

可以看到最后打印的结果，是第一次生成的随机数

3.2 使用remember

我们尝试使用remember，将onTimeout作为State状态并记住，并以onTimeout作为key使得每次onTimeout发生改变，触发值的更新：

  1. @Preview
  2. @Composable
  3. fun MyTimeout() {
  4.     var state by remember { mutableStateOf(false) }
  5.  
  6.     Column {
  7.         // 1.生成随机数
  8.         val random = Random.nextInt()
  9.         Log.i("onTimeout", "return : $random")
  10.         MyRememberUpdatedState(state) {
  11.             // 4.打印随机数
  12.             Log.i("onTimeout", "onTimeout() return : $random")
  13.         }
  14.  
  15.         Button(onClick = { state = !state }) {
  16.             Text("click")
  17.         }
  18.     }
  19. }
  20.  
  21. @Composable
  22. fun MyRememberUpdatedState(enable: Boolean, onTimeout: () -> Unit) {
  23.     // 使用rememberUpdatedState
  24. //    val rememberUpdatedState by rememberUpdatedState(onTimeout)
  25.     val rememberUpdatedState by remember(onTimeout) { mutableStateOf(onTimeout) }
  26. //    val rememberUpdatedState = onTimeout
  27.  
  28.     // 2.key唯一发生重组，不会重新执行
  29.     LaunchedEffect(true) {
  30.         delay(5000)
  31.         // 3.延迟5s，调用外部传入的onTimeout()
  32.         rememberUpdatedState()
  33.     }
  34.  
  35.     if (enable)
  36.         Text("hi")
  37.     else
  38.         Text("hello")
  39. }

打印的结果，依然是第一次生成的随机数:

3.3 使用rememberUpdatedState

而rememberUpdatedState可以始终保持最新的值，从而改变LaunchedEffect运行时的引用的值

  1. @Preview
  2. @Composable
  3. fun MyTimeout() {
  4.     var state by remember { mutableStateOf(false) }
  5.  
  6.     Column {
  7.         // 1.生成随机数
  8.         val random = Random.nextInt()
  9.         Log.i("onTimeout", "return : $random")
  10.         MyRememberUpdatedState(state) {
  11.             // 4.打印随机数
  12.             Log.i("onTimeout", "onTimeout() return : $random")
  13.         }
  14.  
  15.         Button(onClick = { state = !state }) {
  16.             Text("click")
  17.         }
  18.     }
  19. }
  20.  
  21. @Composable
  22. fun MyRememberUpdatedState(enable: Boolean, onTimeout: () -> Unit) {
  23.     // 使用rememberUpdatedState
  24.     val rememberUpdatedState by rememberUpdatedState(onTimeout)
  25. //    val rememberUpdatedState by remember{ mutableStateOf(onTimeout) }
  26. //    val rememberUpdatedState = onTimeout
  27.  
  28.     // 2.key唯一发生重组，不会重新执行
  29.     LaunchedEffect(true) {
  30.         delay(5000)
  31.         // 3.延迟5s，调用外部传入的onTimeout()
  32.         rememberUpdatedState()
  33.     }
  34.  
  35.     if (enable)
  36.         Text("hi")
  37.     else
  38.         Text("hello")
  39. }

打印结果：

原理：首先我们知道remember相当于创建了一个静态变量，如果不指定key，只会初始化一次，重复调用remember并不会更新引用，指定key时，当key发生变化，则会更新引用LaunchedEffect运行时会复制引用，新建变量指向传入的引用，所以此时无论外部变量的引用发生如何改变，并不会改变LaunchedEffect内部变量的引用rememberUpdatedState在remember的基础上做了更新值处理，每次调用到rememberUpdatedState时，将值更新，也就是引用的值的更新，此时不管外部变量还是LaunchedEffect内部变量的值引用都会发生变化，LaunchedEffect调用的自然就是最新的方法了，下面是rememberUpdatedState的源码：

  1. @Composable
  2. fun <T> rememberUpdatedState(newValue: T): State<T> = remember {
  3.     mutableStateOf(newValue)
  4. }.apply { value = newValue }

4.DisposableEffect

DisposableEffect可以在key变化和移除时做一些善后工作，需实现onDispose

例子：

  1. @Preview
  2. @Composable
  3. fun MyDisposableEffect() {
  4.     var state by remember { mutableStateOf(false) }
  5.     var text by remember { mutableStateOf("click") }
  6.     val scope = rememberCoroutineScope()
  7.  
  8.     if (state) {
  9.         // 重组或移除时会调用onDispose
  10.         DisposableEffect(Unit) {
  11.             val job = scope.launch { 
  12.                 delay(3000)
  13.                 text = "点了"
  14.             }
  15.  
  16.             onDispose {
  17.                 job.cancel()
  18.                 text = "取消了"
  19.             }
  20.         }
  21.     }
  22.  
  23.     Button(onClick = { state = !state }) {
  24.         Text(text)
  25.     }
  26. }

效果，在3s内点击了两次，导致重组时移除DisposableEffect而触发onDispose：

5.SideEffect

SideEffect会在可组合函数重组完成时调用，可以进行用户行为分析、日志记录等操作

例子：

  1. @OptIn(ExperimentalAnimationApi::class)
  2. @Preview
  3. @Composable
  4. fun MySideEffect() {
  5.     var enable by remember { mutableStateOf(false) }
  6.  
  7.     Column {
  8.         AnimatedVisibility(
  9.             visible = enable,
  10.             enter = scaleIn(tween(2000)),
  11.             exit = scaleOut(tween(2000))
  12.         ) {
  13.             MySideEffectText("hello world")
  14.         }
  15.  
  16.         Button(onClick = { enable = !enable }) {
  17.             Text("click")
  18.         }
  19.     }
  20. }
  21.  
  22. @Composable
  23. fun MySideEffectText(text: String) {
  24.     SideEffect {
  25.         Log.i("SideEffect", "重组完成")
  26.     }
  27.  
  28.     Text(text)
  29. }

效果，如果组件重组完成了，连续点击导致动画重复执行，则不会触发重组：

6.produceState

produceState 会启动一个协程，并返回一个State对象，用来将非 Compose 状态转换为 Compose 状态，即执行一些耗时操作，如网络请求，并将结果作为State对象返回

例子：

  1. @Preview
  2. @Composable
  3. fun MyProduceState() {
  4.     var visiable by remember { mutableStateOf(false) }
  5.  
  6.     Column {
  7.         if (visiable)
  8.             Text(load().value)
  9.  
  10.         Button(onClick = { visiable = !visiable }) {
  11.             Text("load")
  12.         }
  13.     }
  14. }
  15.  
  16. @Composable
  17. fun load(): State<String> {
  18.     return produceState(initialValue = "", producer = {
  19.         delay(2000);
  20.  
  21.         value = "hi"
  22.     })
  23. }

效果：

7.derivedStateOf

derivedStateOf可以将一个或多个状态对象转变为其他的状态对象，一旦状态发生改变，只会在用到该derivedStateOf状态的地方进行重组

例子，根据传入的list，过滤高亮的元素，并展示到列表中：

  1. val alpha = arrayOf("a", "b", "c", "d", "e", "f", "g", "h")
  2.  
  3. @Preview
  4. @Composable
  5. fun MyDerivedStateOf() {
  6.     val items = remember { mutableStateListOf<String>() }
  7.  
  8.     Column {
  9.         Button(onClick = { items.add(alpha[Random.nextInt(alpha.size)]) }) {
  10.             Text("Add")
  11.         }
  12.  
  13.         DerivedStateOf(items, highPriorityKeywords = listOf("a", "b"))
  14.     }
  15. }
  16.  
  17. /**
  18.  * 拥有highPriorityKeywords的优先显示
  19.  */
  20. @Composable
  21. fun DerivedStateOf(
  22.     lists: List<String>,
  23.     highPriorityKeywords: List<String> = listOf("Review", "Unblock", "Compose")
  24. ) {
  25.     // 需要高亮置顶的items
  26.     val highPriorityLists by remember(highPriorityKeywords) {
  27.         derivedStateOf { lists.filter { it in highPriorityKeywords } }
  28.     }
  29.  
  30.     LazyColumn {
  31.         items(highPriorityLists) { value ->
  32.             Text(value, color = Color.Red)
  33.         }
  34.         items(lists) { value ->
  35.             Text(value)
  36.         }
  37.     }
  38. }

效果：

8.snapshotFlow

snapshotFlow可以将 Compose 的 State 转为Flow，当在 snapshotFlow 块中读取的 State 对象之一发生变化时，如果新值与之前发出的值不相等，Flow 会向其收集器发出新值

  1. @Preview
  2. @Composable
  3. fun MySnapshotFlow() {
  4.     val listState = rememberLazyListState()
  5.     val list = remember {
  6.         mutableListOf<Int>().apply {
  7.             repeat(1000) { index ->
  8.                 this += index
  9.             }
  10.         }
  11.     }
  12.  
  13.     LazyColumn(state = listState) {
  14.         items(list) {
  15.             Text("hi:${it}")
  16.         }
  17.     }
  18.  
  19.     LaunchedEffect(Unit) {
  20.         snapshotFlow {
  21.             listState.firstVisibleItemIndex
  22.         }.collect { index ->
  23.             Log.i("collect", "${index}")
  24.         }
  25.     }
  26. }

滚动查看日志：

9.重启效应

Compose 中有一些效应(如 LaunchedEffect、produceState 或 DisposableEffect)会采用可变数量的参数和键来取消运行效应，并使用新的键启动一个新的效应。在实际开发中，灵活运用key是否唯一来使得是否需要重启效应

二、传统项目集成

官方推荐一次性替换整个布局，也可以替换部分布局，本身compose就兼容传统xml的方式，所以在传统的项目上集成compose很容易

1.xml中使用compose

xml中使用ComposeView，表示一个加载compose的控件：

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
  3.     xmlns:app="http://schemas.android.com/apk/res-auto"
  4.     xmlns:tools="http://schemas.android.com/tools"
  5.     android:layout_width="match_parent"
  6.     android:layout_height="match_parent"
  7.     tools:context=".ComposeIntegrateActivity">
  8.  
  9.     <TextView
  10.         android:id="@+id/textView2"
  11.         android:layout_width="wrap_content"
  12.         android:layout_height="wrap_content"
  13.         android:text="hello android"
  14.         app:layout_constraintBottom_toBottomOf="parent"
  15.         app:layout_constraintEnd_toEndOf="parent"
  16.         app:layout_constraintStart_toStartOf="parent"
  17.         app:layout_constraintTop_toTopOf="parent" />
  18.  
  19.     <androidx.compose.ui.platform.ComposeView
  20.         android:id="@+id/composeView"
  21.         android:layout_width="wrap_content"
  22.         android:layout_height="wrap_content"
  23.         app:layout_constraintEnd_toEndOf="parent"
  24.         app:layout_constraintStart_toStartOf="parent"
  25.         app:layout_constraintTop_toBottomOf="@id/textView2" />
  26.  
  27. </androidx.constraintlayout.widget.ConstraintLayout>

Activity中调用ComposeView的setContent()方法，并使用compose:

  1. class ComposeIntegrateActivity : ComponentActivity() {
  2.     override fun onCreate(savedInstanceState: Bundle?) {
  3.         super.onCreate(savedInstanceState)
  4.         setContentView(R.layout.activity_compose_integrate)
  5.  
  6.         val composeView = findViewById<ComposeView>(R.id.composeView)
  7.         composeView.setContent {
  8.             MyComposeApplicationTheme {
  9.                 MyText1()
  10.             }
  11.         }
  12.     }
  13.  
  14.     @Composable
  15.     fun MyText1() {
  16.         Text("hi compose")
  17.     }
  18. }

启动效果：

2.fragment中使用

fragment中要多一步绑定View树生命周期：

  1. class BlankFragment : Fragment() {
  2.  
  3.     override fun onCreateView(
  4.         inflater: LayoutInflater, container: ViewGroup?,
  5.         savedInstanceState: Bundle?
  6.     ): View? {
  7.         val disposeOnViewTreeLifecycleDestroyed =
  8.             ViewCompositionStrategy.DisposeOnViewTreeLifecycleDestroyed
  9.         val root = inflater.inflate(R.layout.fragment_blank, container, false)
  10.         root.findViewById<ComposeView>(R.id.fragment_composeView).apply {
  11.             setViewCompositionStrategy(ViewCompositionStrategy.DisposeOnViewTreeLifecycleDestroyed)
  12.             setContent {
  13.                 MaterialTheme() {
  14.                     // In Compose world
  15.                     Text("Hello Compose!")
  16.                 }
  17.             }
  18.         }
  19.         return root
  20.     }
  21. }

三、导航

compose定义了全新的导航API，下面来开始使用它

1.导入依赖

  1. def nav_version = "2.5.3"
  2.  
  3.     implementation "androidx.navigation:navigation-compose:$nav_version"

2.创建 NavHost

NavHost需要一个navController用于控制导航到那个可组合项，startDestination 初始的可组合项，以及NavGraphBuilder导航关系图

  1. class NaviActivity : ComponentActivity() {
  2.     override fun onCreate(savedInstanceState: Bundle?) {
  3.         super.onCreate(savedInstanceState)
  4.         setContent {
  5.             MyComposeApplicationTheme {
  6.                 MyNavi()
  7.             }
  8.         }
  9.     }
  10. }
  11.  
  12. @Preview
  13. @Composable
  14. fun MyNavi() {
  15.     val navController = rememberNavController()
  16.  
  17.     NavHost(navController = navController, startDestination = "home") {
  18.         composable("home") { Home() }
  19.         composable("message") { Message() }
  20.         composable("mine") { Mine() }
  21.     }
  22. }
  23.  
  24. @Composable
  25. fun Home() {
  26.     Box(
  27.         modifier = Modifier.fillMaxSize(),
  28.         contentAlignment = Alignment.Center
  29.     ) {
  30.         Text("Home")
  31.     }
  32. }
  33.  
  34. @Composable
  35. fun Message() {
  36.     Box(
  37.         modifier = Modifier.fillMaxSize(),
  38.         contentAlignment = Alignment.Center
  39.     ) {
  40.         Text("Message")
  41.     }
  42. }
  43.  
  44. @Composable
  45. fun Mine() {
  46.     Box(
  47.         modifier = Modifier.fillMaxSize(),
  48.         contentAlignment = Alignment.Center
  49.     ) {
  50.         Text("Mine")
  51.     }
  52. }

效果：

3.navController

接下来使用navController来导航到不同的可组合项，下面是官方给出的示例的几种方式：

  • 在导航到“friendslist”并加到返回堆栈中
navController.navigate("friendslist")
  • 在导航到“friendslist”之前，将所有内容从后堆栈中弹出到“home”(不包含home)
  1. navController.navigate("friendslist") {
  2.     popUpTo("home")
  3. }
  • 在导航到“friendslist”之前，从堆栈中弹出所有内容，包括“home”
  1. navController.navigate("friendslist") {
  2.     popUpTo("home") { inclusive = true }
  3. }
  • 只有当我们还不在“search”时，才能导航到“search”目标地，避免在后堆栈的顶部有多个副本
  1. navController.navigate("search") {
  2.     launchSingleTop = true
  3. }

例子：

我们给App添加上Scaffold，并在底部导航栏进行navController导航的控制

  1. class NaviActivity : ComponentActivity() {
  2.     override fun onCreate(savedInstanceState: Bundle?) {
  3.         super.onCreate(savedInstanceState)
  4.         setContent {
  5.             MyComposeApplicationTheme {
  6.                 Scene()
  7.             }
  8.         }
  9.     }
  10. }
  11.  
  12. @OptIn(ExperimentalMaterial3Api::class)
  13. @Composable
  14. fun Scene() {
  15.     val navController = rememberNavController()
  16.  
  17.     Surface(Modifier.background(MaterialTheme.colorScheme.surface)) {
  18.         Scaffold(
  19.             topBar = {
  20.                 TopAppBar(
  21.                     title = {
  22.                         Text(
  23.                             stringResource(id = R.string.app_name),
  24.                             color = MaterialTheme.colorScheme.onPrimaryContainer
  25.                         )
  26.                     },
  27.                     colors = TopAppBarDefaults.smallTopAppBarColors(
  28.                         containerColor = MaterialTheme.colorScheme.primaryContainer
  29.                     )
  30.                 )
  31.             },
  32.             bottomBar = {
  33.                 Row(
  34.                     modifier = Modifier
  35.                         .fillMaxWidth()
  36.                         .background(MaterialTheme.colorScheme.primaryContainer)
  37.                         .padding(10.dp),
  38.                     horizontalArrangement = Arrangement.SpaceAround
  39.                 ) {
  40.                     CompositionLocalProvider(LocalContentColor provides MaterialTheme.colorScheme.onPrimaryContainer) {
  41.                         Icon(
  42.                             Icons.Rounded.Home, contentDescription = null,
  43.                             modifier = Modifier.clickable {
  44.                                 navController.navigate("home") {
  45.                                     launchSingleTop = true
  46.                                     popUpTo("home")
  47.                                 }
  48.                             }
  49.                         )
  50.                         Icon(
  51.                             Icons.Rounded.Email, contentDescription = null,
  52.                             modifier = Modifier.clickable {
  53.                                 navController.navigate("message") {
  54.                                     launchSingleTop = true
  55.                                     popUpTo("message")
  56.                                 }
  57.                             }
  58.                         )
  59.                         Icon(
  60.                             Icons.Rounded.Face, contentDescription = null,
  61.                             modifier = Modifier.clickable {
  62.                                 navController.navigate("mine") {
  63.                                     launchSingleTop = true
  64.                                     popUpTo("mine")
  65.                                 }
  66.                             }
  67.                         )
  68.                     }
  69.                 }
  70.             }
  71.         ) { paddings ->
  72.             MyNavi(
  73.                 modifier = Modifier.padding(paddings),
  74.                 navController = navController,
  75.                 startDestination = "home"
  76.             ) {
  77.                 composable("home") { Home() }
  78.                 composable("message") { Message() }
  79.                 composable("mine") { Mine() }
  80.             }
  81.         }
  82.     }
  83. }
  84.  
  85. @Composable
  86. fun MyNavi(
  87.     modifier: Modifier = Modifier,
  88.     navController: NavHostController,
  89.     startDestination: String,
  90.     builder: NavGraphBuilder.() -> Unit
  91. ) {
  92.     NavHost(
  93.         modifier = modifier,
  94.         navController = navController,
  95.         startDestination = startDestination
  96.     ) {
  97.         builder()
  98.     }
  99. }
  100.  
  101. @Composable
  102. fun Home() {
  103.     Box(
  104.         modifier = Modifier.fillMaxSize(),
  105.         contentAlignment = Alignment.Center
  106.     ) {
  107.         Text("Home")
  108.     }
  109. }
  110.  
  111. @Composable
  112. fun Message() {
  113.     Box(
  114.         modifier = Modifier.fillMaxSize(),
  115.         contentAlignment = Alignment.Center
  116.     ) {
  117.         Text("Message")
  118.     }
  119. }
  120.  
  121. @Composable
  122. fun Mine() {
  123.     Box(
  124.         modifier = Modifier.fillMaxSize(),
  125.         contentAlignment = Alignment.Center
  126.     ) {
  127.         Text("Mine")
  128.     }
  129. }

效果：

4.参数传递

Navigation Compose 还支持在可组合项目的地之间传递参数，方式为Restful风格，这种风格的参数为必填：

  1. MyNavi(
  2. modifier = Modifier.padding(paddings),
  3. navController = navController,
  4. startDestination = "home/b1254"
  5. ) {
  6.     composable("home/{userId}") { Home() }
  7.     composable("message/{count}") { Message() }
  8.     composable("mine/{userId}") { Mine() }
  9. }
  10.  
  11. ...
  12.  
  13. // 导航时带入参数
  14. navController.navigate("mine/a1587")

参数类型默认为字符串，也可以通过navArgument指定参数的类型：

  1. composable(
  2. "home/{userId}",
  3. arguments = listOf(navArgument("userId") { type = NavType.StringType })
  4. ) { Home() }

通过 lambda 中提供的NavBackStackEntry中提取这些参数：

  1. composable(
  2. "home/{userId}",
  3. arguments = listOf(navArgument("userId") { type = NavType.StringType })
  4. ) {navBackStackEntry ->
  5.     navBackStackEntry.arguments?.getString("userId")
  6.     Home()
  7. }

可选参数可以使用：?argName={argName} 来添加：

  1. composable(
  2. "message?count={count}",
  3. arguments = listOf(navArgument("count") {
  4.     type = NavType.IntType
  5.     defaultValue = 0
  6. })
  7. ) { Message() }

5.深层链接

深层链接照搬了官方文档：深层链接

如果你想要将特定的网址、操作或 MIME 类型与导航绑定，实现对外提供跳转应用的功能，那么使用深层链接可以很方便的实现这个功能

以url为例，通过deepLinks 将url进行绑定：

  1. val uri = "https://www.example.com"
  2.  
  3. composable(
  4.     "profile?id={id}",
  5.     deepLinks = listOf(navDeepLink { uriPattern = "$uri/{id}" })
  6. ) { backStackEntry ->
  7.     Profile(navController, backStackEntry.arguments?.getString("id"))
  8. }

在manifest中注册配置：

  1. <activity …>
  2.   <intent-filter>
  3.     ...
  4.     <data android:scheme="https" android:host="www.example.com" />
  5.   </intent-filter>
  6. </activity>

外部通过PendingIntent进行跳转：

  1. val id = "exampleId"
  2. val context = LocalContext.current
  3. val deepLinkIntent = Intent(
  4.     Intent.ACTION_VIEW,
  5.     "https://www.example.com/$id".toUri(),
  6.     context,
  7.     MyActivity::class.java
  8. )
  9.  
  10. val deepLinkPendingIntent: PendingIntent? = TaskStackBuilder.create(context).run {
  11.     addNextIntentWithParentStack(deepLinkIntent)
  12.     getPendingIntent(0, PendingIntent.FLAG_UPDATE_CURRENT)
  13. }

6.封装导航图

随着业务的越来越复杂，导航图也可能分为模块化，可以在NavHost作用域中使用navigation进行封装：

  1. NavHost(navController, startDestination = "home") {
  2.     ...
  3.     // Navigating to the graph via its route ('login') automatically
  4.     // navigates to the graph's start destination - 'username'
  5.     // therefore encapsulating the graph's internal routing logic
  6.     navigation(startDestination = "username", route = "login") {
  7.         composable("username") { ... }
  8.         composable("password") { ... }
  9.         composable("registration") { ... }
  10.     }
  11.     ...
  12. }

使用扩展函数将更好的对模块进行封装：

  1. fun NavGraphBuilder.loginGraph(navController: NavController) {
  2.     navigation(startDestination = "username", route = "login") {
  3.         composable("username") { ... }
  4.         composable("password") { ... }
  5.         composable("registration") { ... }
  6.     }
  7. }
  1. NavHost(navController, startDestination = "home") {
  2.     ...
  3.     loginGraph(navController)
  4.     ...
  5. }
声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/小小林熬夜学编程/article/detail/254128
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号