android 如何使用Jetpack合成从单个目的地导航到多个目的地

vq8itlhq  于 2022-11-20  发布在  Android
关注(0)|答案(1)|浏览(225)

总之,我希望根据单击的项目导航到目标。

但问题是我创建这些项目的方式,我不知道如何隔离项目,并给予它们一个onClick函数,Singularly。
PS.我使用了数据类和对象函数,来制作物品;
第一个
通常我所做的导航是(示例代码):

@Composable
fun WaysCard(
    waysInfo: WaysData,
    onWaysCardClick: (Int) -> Unit,
    modifier: Modifier = Modifier
) {
    Surface(
        shape = MaterialTheme.shapes.small,
        elevation = 10.dp,
        modifier = modifier
            .clickable { onWaysCardClick(waysInfo.id) }
    ) 
    ....
}

正如你所看到的,我给了可组合的一个click函数,并将data类作为参数传递,因为通常这些项都是通用的,它们的大部分内容都以类似的方式排列。但是在这个例子中,我现在要做的。内容无论如何都不相似。所以我为每个项做了Destinations。所以我想导航到这些预定义的目的地,来自MenuScreen.Kt的数据。
我不知道传递什么给onClick函数来导航到这些目的地,或者我是否应该用以前的方式编写它。
下面是代码(MenuScreen.Kt):

@Composable
fun MenuCard(
    menuInfo: MenuData,
    onMenuCardClick: (Int) -> Unit,
    modifier: Modifier = Modifier
) {
    Surface(
        shape = MaterialTheme.shapes.small,
        elevation = 4.dp,
        modifier = modifier
            .clickable {  }
    ) {
        ....
    }
}

请为便于理解起见,让我们称之为预定义的目的地;第一个是第二个是第三个,第四个是第五个。
我不知道你是否需要更多的信息,请如果你这样做,我很乐意提供他们。
如能提供任何帮助,我将不胜感激1.提前感谢您。

iyfamqjs

iyfamqjs1#

如果我理解正确的话,我有一个解决方案,我不知道它对你有多大的帮助
但如果你有不明白的地方,请问,我会很乐意指导你
请按我说的做,看看输出。如果它符合你想要的,让我知道,留下评论,我会给予你一个完整的解释
1 -创建一个Kotlin文件,并使用您想要的名称-我将其命名为Navigation
2 -将附件中包含的所有代码放入该文件

import androidx.compose.foundation.clickable
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.lazy.LazyColumn
import androidx.compose.foundation.lazy.items
import androidx.compose.material.MaterialTheme
import androidx.compose.material.Surface
import androidx.compose.material.Text
import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp
import androidx.navigation.compose.NavHost
import androidx.navigation.compose.composable
import androidx.navigation.compose.navigation
import androidx.navigation.compose.rememberNavController

sealed class Screen(val route: String) {
    object Menu : Screen("menu")
}

sealed class LeafScreen(
    private val route: String
) {
    fun createRoute(root: Screen) = "${root.route}/$route"

    object Menu : LeafScreen("menu")
    object Lessons : LeafScreen("lessons")
    object Log : LeafScreen("log")
    object ToDo : LeafScreen("todo")
    object Contact : LeafScreen("contact")
}

@Composable
fun AppNavigation() {
    val navController = rememberNavController()
    NavHost(
        navController = navController,
        startDestination = Screen.Menu.route
    ) {
        navigation(
            route = Screen.Menu.route,
            startDestination = LeafScreen.Menu.createRoute(Screen.Menu)
        ) {
            composable(
                LeafScreen.Menu.createRoute(Screen.Menu)
            ) {
                MenuScreen(
                    navigateToScreen = {
                        when (it) {
                            1 -> navController.navigate(LeafScreen.Log.createRoute(Screen.Menu))
                            2 -> navController.navigate(LeafScreen.Lessons.createRoute(Screen.Menu))
                            3 -> navController.navigate(LeafScreen.Contact.createRoute(Screen.Menu))
                            4 -> navController.navigate(LeafScreen.ToDo.createRoute(Screen.Menu))
                        }
                    }
                )
            }
            composable(
                LeafScreen.Lessons.createRoute(Screen.Menu)
            ) {
                LessonsScreen()
            }
            composable(
                LeafScreen.Log.createRoute(Screen.Menu)
            ) {
                LogScreen()
            }
            composable(
                LeafScreen.ToDo.createRoute(Screen.Menu)
            ) {
                ToDoScreen()
            }
            composable(
                LeafScreen.Contact.createRoute(Screen.Menu)
            ) {
                ContactScreen()
            }
        }
    }
}

@Composable
fun ContactScreen() {
    Box(Modifier.fillMaxSize()) {
        Text(text = "ContactScreen", modifier = Modifier.align(Alignment.Center))
    }
}

@Composable
fun ToDoScreen() {
    Box(Modifier.fillMaxSize()) {
        Text(text = "ToDoScreen", modifier = Modifier.align(Alignment.Center))
    }
}

@Composable
fun LogScreen() {
    Box(Modifier.fillMaxSize()) {
        Text(text = "LogScreen", modifier = Modifier.align(Alignment.Center))
    }
}

@Composable
fun LessonsScreen() {
    Box(Modifier.fillMaxSize()) {
        Text(text = "LessonsScreen", modifier = Modifier.align(Alignment.Center))
    }
}

data class MenuData(
    val id: Int,
    val title: String,
    val menuImageId: Int = 0
)

data class MenuViewState(
    val menus: List<MenuData> = arrayListOf<MenuData>().apply {
        add(MenuData(id = 1, title = "log", 0))
        add(MenuData(id = 2, title = "lessons", 0))
        add(MenuData(id = 3, title = "contacts", 0))
        add(MenuData(id = 4, title = "todo", 0))
    }
)

@Composable
fun MenuScreen(
    navigateToScreen: (Int) -> Unit
) {
    val uiState by remember {
        mutableStateOf(MenuViewState())
    }
    LazyColumn(

3 -最后,将可组合导航放在您的MainActivity.kt中

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import stackoverflow.answers.ui.theme.StackOverflowAnswersTheme

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            StackOverflowAnswersTheme {
                AppNavigation()
            }
        }
    }
}

相关问题