Как перейти к нескольким пунктам назначения из одного пункта назначения с помощью Jetpack Compose

Таким образом, я хочу перейти к месту назначения в зависимости от того, какой элемент нажат.

Но проблема в том, как я создал эти элементы, а именно в том, как я не знаю, как изолировать элемент и дать им функцию onClick, Singularly.

PS. Я использовал класс данных и объектную функцию для создания элементов;

data class MenuData(
    Val id: Int,
    Val title: String,
    val menuImageId: Int = 0
)
object MenuModel {

    .....

    fun menuModelList(context: Context) = listOf(

        MenuData(
            id = 1,
            title = context.getString(R.string.menu_log),
            description = context.getString(R.string.menu_logText),
            menuImageId = R.drawable.menu_log
        ),
      .....
    )
}


Обычно я делаю для навигации (пример кода):

@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) }
    ) 
    ....
}

Как видите, я дал составному объекту функцию щелчка и передал класс данных в качестве параметра, потому что обычно элементы являются общими, большая часть их содержимого организована аналогичным образом. Но в этом я пытаюсь сделать сейчас. Содержимое в любом случае не похоже. Поэтому я сделал 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 {  }
    ) {
        ....
    }
}

Пожалуйста, для понимания цели, давайте позвоним предопределенным адресатам; LogScreen.kt, ToDoScreen.kt, LessonsScreen.kt и ContactScreen.kt.

Я не знаю, нужна ли вам дополнительная информация, пожалуйста, если вам это нужно, я более чем счастлив предоставить ее.

Искренне буду благодарен за любую оказанную помощь.. Заранее спасибо.

Шаблоны Angular PrimeNg
Шаблоны Angular PrimeNg
Как привнести проверку типов в наши шаблоны Angular, использующие компоненты библиотеки PrimeNg, и настроить их отображение с помощью встроенной...
Создайте ползком, похожим на звездные войны, с помощью CSS и Javascript
Создайте ползком, похожим на звездные войны, с помощью CSS и Javascript
Если вы веб-разработчик (или хотите им стать), то вы наверняка гик и вам нравятся "Звездные войны". А как бы вы хотели, чтобы фоном для вашего...
Документирование API с помощью Swagger на Springboot
Документирование API с помощью Swagger на Springboot
В предыдущей статье мы уже узнали, как создать Rest API с помощью Springboot и MySql .
Начала с розового дизайна
Начала с розового дизайна
Pink Design - это система дизайна Appwrite с открытым исходным кодом для создания последовательных и многократно используемых пользовательских...
Шлюз в PHP
Шлюз в PHP
API-шлюз (AG) - это сервер, который действует как единая точка входа для набора микросервисов.
14 Задание: Типы данных и структуры данных Python для DevOps
14 Задание: Типы данных и структуры данных Python для DevOps
проверить тип данных используемой переменной, мы можем просто написать: your_variable=100
1
0
62
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Если я правильно понял вопросы, у меня есть решение для вас, я не знаю, насколько оно будет работать для вас.

Но если вы чего-то не понимаете, спрашивайте, я с удовольствием вас подскажу.

Пожалуйста, делайте то, что я говорю, и смотрите результат. Если это соответствует тому, что вы хотите, дайте мне знать, оставив комментарий, и я дам вам полное объяснение

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 - И, наконец, поместите Composable Navigation в свой 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()
            }
        }
    }
}

Другие вопросы по теме