为初学者打造的Jetpack Compose快速入门指南（下）

在上一篇博文中，我们了解了 Jetpack Compose 的基础知识并构建了一个 Splash 页面。在这篇后续文章中，我们将深入了解 Jetpack Compose 的高级功能，并构建一个完整的登录页面。

导航至登录页面

首先，我们需要一个方法来导航到登录页面。我们可以使用 Navigation 组件轻松实现这一点：

import androidx.navigation.compose.NavHost
import androidx.navigation.compose.composable
import androidx.navigation.compose.rememberNavController

@Composable
fun Navigation() {
    val navController = rememberNavController()
    NavHost(navController = navController, startDestination = "splash") {
        composable("splash") { SplashPage() }
        composable("login") { LoginPage() }
    }
}

现在，当用户点击 Splash 页面上的按钮时，它将导航到登录页面。

构建登录页面 UI

登录页面需要一个文本输入框用于输入用户名，另一个文本输入框用于输入密码，以及一个按钮用于提交表单。我们可以使用 Jetpack Compose 的 TextField 和 Button 组件来构建这些元素：

import androidx.compose.foundation.layout.*
import androidx.compose.material.*
import androidx.compose.runtime.*
import androidx.compose.ui.Modifier
import androidx.compose.ui.text.input.PasswordVisualTransformation
import androidx.compose.ui.unit.dp

@Composable
fun LoginPage() {
    var username by remember { mutableStateOf("") }
    var password by remember { mutableStateOf("") }

    Column(
        modifier = Modifier.fillMaxSize(),
        verticalArrangement = Arrangement.Center,
        horizontalAlignment = Alignment.CenterHorizontally
    ) {
        TextField(
            value = username,
            onValueChange = { username = it },
            label = { Text("Username") },
            modifier = Modifier.padding(bottom = 16.dp)
        )
        TextField(
            value = password,
            onValueChange = { password = it },
            label = { Text("Password") },
            visualTransformation = PasswordVisualTransformation(),
            modifier = Modifier.padding(bottom = 16.dp)
        )
        Button(onClick = { /* Submit form */ }) {
            Text("Login")
        }
    }
}

响应式设计

Jetpack Compose 使用响应式设计原则，这意味着您的 UI 会自动适应不同屏幕尺寸。要使我们的登录页面响应式，我们可以在 Column 组件中使用 fillMaxSize() 修饰符：

Column(modifier = Modifier.fillMaxSize()) { ... }

这将使登录页面在任何屏幕尺寸上都正确显示。

总结

通过这两篇博文，我们已经了解了 Jetpack Compose 的基础知识并构建了一个完整的登录页面。通过遵循本指南，您现在可以将 Jetpack Compose 集成到您的 Android 项目中，并开始创建美观且响应式的高性能 UI。