与作曲一起导航
#教程 #android #learning #ui

你好，互联网上了不起的人！希望你一切顺利。

创建无缝和直观的用户体验的一个关键方面是在应用程序中有效导航。

这就是JetPack组成的导航组件开始发挥作用。

执行

让我们在build.gradle文件（模块）中实现导航库：

dependencies {

    [...]

    val nav_version = "2.6.0"
    implementation("androidx.navigation:navigation-compose:$nav_version")
}

屏幕

现在，我将创建两个撰写文件来表示我们的屏幕：

拳头屏幕：

@Composable
fun ScreenOne() {
    Column(
        modifier = Modifier.fillMaxSize(),
        horizontalAlignment = Alignment.CenterHorizontally,
        verticalArrangement = Arrangement.Center
    ) {
        Text(text = "Screen One")
        Button(
            onClick = { /*TODO*/ }
        ) {
            Text(text = "Next Screen")
        }
    }
}

屏幕二：

@Composable
fun ScreenTwo() {
    Column(
        modifier = Modifier.fillMaxSize(),
        horizontalAlignment = Alignment.CenterHorizontally,
        verticalArrangement = Arrangement.Center
    ) {
        Text(text = "Screen Two")
        Button(
            onClick = { /*TODO*/ }
        ) {
            Text(text = "Next Screen")
        }
    }
}

使用导航组件时，您需要知道某些名称，例如navcontroller和navhost。

NAVCONTROLLER

您可以将NavController视为负责维护每个屏幕的状态。

您需要在应用程序的起点中实现。要创建NavController，只需调用rememnnavcontroller（）方法。

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            NavigationComponentTheme {
                Surface {
                    val navController = rememberNavController()
                }
            }
        }
    }
}

NAVHOST

NAVHOST将NAVCONTROLLER连接到导航图，该图形定义了您可以在之间导航的组合。

让我们为我们的navhost创建一个文件：

@Composable
fun CustomNavHost(
    navController: NavController
) {

}

我们需要将NavController作为参数传递，因为我们要求它控制屏幕。

现在让我们调用navhost方法：

@Composable
fun CustomNavHost(
    navController: NavHostController
) {
    NavHost(
        // the nav controller that we receive has parameter
        navController = ,
        // The screen your app should display first
        startDestination = 
    ) {

    }
}

我们需要调用我们的屏幕文件：

@Composable
fun CustomNavHost(
    navController: NavHostController
) {
    NavHost(
        navController = navController,
        startDestination = "SCREEN_ONE"
    ) {
        composable(route =  "SCREEN_ONE"){
            ScreenOne()
        }
        composable(route = "SCREEN_TWO") {
            ScreenTwo()
        }
    }
}

您需要定义到每个屏幕的路由。

让我们回到我们的主要活动中并设置我们的NAVHOST：

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            NavigationComponentTheme {
                Surface {
                    val navController = rememberNavController()
                    CustomNavHost(navController = navController)
                }
            }
        }
    }
}

要控制流程并在屏幕之间导航，每个屏幕都需要访问NavController。

在您的NAVHOST文件中，将NavController作为屏幕参数传递。

@Composable
fun CustomNavHost(
    navController: NavHostController
) {
    NavHost(
        navController = navController,
        startDestination = "SCREEN_ONE"
    ) {
        composable(route = "SCREEN_ONE") {
            ScreenOne(navController)
        }
        composable(route = "SCREEN_TWO") {
            ScreenTwo(navController)
        }
    }
}

并将参数添加到每个屏幕：

拳头屏幕：

@Composable
fun ScreenOne(navController: NavHostController) {
[...]

屏幕二：

@Composable
fun ScreenTwo(navController: NavHostController) {
[...]

导航

要启动一个活动，您只需要使用NavController调用它，然后提供您希望导航的屏幕路由至：

navController.navigate(route = "SCREEN_TWO")

我要在Screenone上致电Screentwo，并在Screentwo上致电Screenone。

Image description

所以，我的最终屏幕文件看起来像这样：

拳头屏幕：

@Composable
fun ScreenOne(navController: NavHostController) {
    Column(
        modifier = Modifier.fillMaxSize(),
        horizontalAlignment = Alignment.CenterHorizontally,
        verticalArrangement = Arrangement.Center
    ) {
        Text(text = "Screen One")
        Button(
            onClick = {
                navController.navigate(route = "SCREEN_TWO")
            }
        ) {
            Text(text = "Next Screen")
        }
    }
}

屏幕二：

@Composable
fun ScreenTwo(navController: NavHostController) {
    Column(
        modifier = Modifier.fillMaxSize(),
        horizontalAlignment = Alignment.CenterHorizontally,
        verticalArrangement = Arrangement.Center
    ) {
        Text(text = "Screen Two")
        Button(
            onClick = {
                navController.navigate("SCREEN_ONE")
            }
        ) {
            Text(text = "Next Screen")
        }
    }
}

结论

您还可以通过参数，使用嵌套导航，将其与底栏导航结合在一起，并且非常容易测试。

导航组件是撰写的众多功能之一，可以简单地在屏幕之间导航。

在这里查看我有关navigation bar的文章。

所有的代码和典范是on this repository。

快乐编码â€

请让我知道您在评论中的想法。

与我联系ð

Linkedin

GitHub