Android Jetpack Compose 新手教程

谋爱先谋生爱人先爱己2024-02-10 9:15

啥好人大年三十写博客，哈哈哈，我就是...

最近学习了Compose，话说实践才是更快学习的方式。今天用Compose写一个注册登录页。

什么是Android Jetpack Compose

官网上解释的更全面，什么声明式UI呀。我个人理解就是Android用于构建UI的工具包。它简化并加速了Android上的UI开发。但是为了使用它进行开发呢，你需要了解Kotlin。

那么废话不多说，创建一个新的Android项目。

一、创建一个新的Android Compose项目

首先打开Android Studio并创建一个新项目。我使用的Android Studio版本是Android Studio Hedgehog | 2023.1.1 Patch 2，选择"Empty Activity"并点击"Next"。

接下来您将看到以下界面，输入"FormExample"作为项目名称，然后点击"Finish"。

二、添加所需的包

我们将在本实例中使用navigation-compose，因此打开模块build.gradle文件并添加以下实现：

scss 复制代码 
implementation("androidx.navigation:navigation-compose:2.7.0")

三、创建MainActivity

同步您的项目并打开MainActivity.kt。

粘贴/输入以下代码：

kotlin 复制代码 
package com.example.formexample

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Surface
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.tooling.preview.Preview
import androidx.navigation.compose.NavHost
import androidx.navigation.compose.composable
import androidx.navigation.compose.rememberNavController
import com.example.formexample.pages.ForgotPassword
import com.example.formexample.pages.LoginPage
import com.example.formexample.pages.SignUp
import com.example.formexample.ui.theme.FormExampleTheme

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            FormExampleTheme {
                // A surface container using the 'background' color from the theme
                Surface(
                    modifier = Modifier.fillMaxSize(),
                    color = MaterialTheme.colorScheme.background
                ) {
                    ScreenMain()
                }
            }
        }
    }
}

@Composable
fun ScreenMain() {
    val navController = rememberNavController()

    NavHost(navController = navController, startDestination = "login") {
        composable("login") { LoginPage(navController) }
        composable("signup") { SignUp(navController) }
        composable("forgot-password") { ForgotPassword(navController) }
    }
}

@Preview(showBackground = true)
@Composable
fun GreetingPreview() {
    FormExampleTheme {
        ScreenMain()
    }
}

这里我们基本上设置了主屏幕，导航控制器可以在多个页面之间进行导航。跟页面是登录屏幕。此时不要担心任何错误，因为我们很快就会创建所需的页面。

四、创建自定义顶栏

接下来创建一个新的"组件"包并创建文件CustomTopAppBar.kt并粘贴/输入以下代码：

kotlin 复制代码 
package com.example.formexample.component

import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.ArrowBack
import androidx.compose.material3.ExperimentalMaterial3Api
import androidx.compose.material3.Icon
import androidx.compose.material3.IconButton
import androidx.compose.material3.Text
import androidx.compose.material3.TopAppBar
import androidx.compose.runtime.Composable
import androidx.navigation.NavController

@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun CustomTopAppBar(navController: NavController, title: String, showBackIcon: Boolean) {
    TopAppBar(
        title = { Text(text = title) },
        navigationIcon = {
            if (showBackIcon && navController.previousBackStackEntry != null) {
                IconButton(onClick = { navController.navigateUp() }) {
                    Icon(
                        Icons.Filled.ArrowBack,
                        contentDescription = "Back"
                    )
                }
            }
        }
    )
}

在这里，我们基本上设置了应用程序顶部栏并设置标题，如果启用了showBackIcon，则会显示后退按钮，按下后用户可以返回到上衣屏幕。

五、创建页面

接下来创建一个新的pages包。 创建ForgotPassword.kt文件并粘贴/输入以下内容：

ini 复制代码 
package com.example.formexample.pages

import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material3.Button
import androidx.compose.material3.Scaffold
import androidx.compose.material3.Text
import androidx.compose.material3.TextField
import androidx.compose.runtime.Composable
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.text.TextStyle
import androidx.compose.ui.text.font.FontFamily
import androidx.compose.ui.text.input.TextFieldValue
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import androidx.navigation.NavHostController
import androidx.navigation.compose.rememberNavController
import com.example.formexample.component.CustomTopAppBar

@Composable
fun ForgotPassword(navController: NavHostController) {
    Box(modifier = Modifier.fillMaxSize()) {
        Scaffold(
            topBar = { CustomTopAppBar(
                navController = navController,
                title = "Forgot Password",
                showBackIcon = true
            )},
            content = { it ->
                Column(
                    modifier = Modifier.padding(it),
                    verticalArrangement = Arrangement.Center,
                    horizontalAlignment = Alignment.CenterHorizontally,
                ) {
                    val username = remember {
                        mutableStateOf(TextFieldValue())
                    }
                    Text(
                        text = "Forgot Password",
                        style = TextStyle(fontSize = 40.sp, fontFamily = FontFamily.Cursive)
                    )

                    Spacer(modifier = Modifier.height(15.dp))

                    TextField(
                        label = { Text(text = "Username") },
                        value = username.value,
                        onValueChange = { username.value = it }
                    )
                    
                    Spacer(modifier = Modifier.height(15.dp))

                    Box(modifier = Modifier.padding(40.dp, 0.dp, 40.dp, 0.dp)) {
                        Button(
                            onClick = { },
                            shape = RoundedCornerShape(50.dp),
                            modifier = Modifier
                                .fillMaxWidth()
                                .height(50.dp)
                        ) {
                            Text(text = "Forgot Password")
                        }
                    }
                }
            }
        )
    }
}

@Preview(showBackground = true)
@Composable
fun ForgotPasswordPreview() {
    val navController = rememberNavController()
    ForgotPassword(navController)
}

这里我们使用compose的ui元素创建一个简单的表单。使用精美的字体、供用户输入用户名的文本输入和可点击的圆形按钮。

接下来我们将创建登录表单，因此创建一个名为Login.kt的文件并输入/粘贴以下代码：

ini 复制代码 
package com.example.formexample.pages

import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.foundation.text.ClickableText
import androidx.compose.foundation.text.KeyboardOptions
import androidx.compose.material3.Button
import androidx.compose.material3.Text
import androidx.compose.material3.TextField
import androidx.compose.runtime.Composable
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.text.AnnotatedString
import androidx.compose.ui.text.TextStyle
import androidx.compose.ui.text.font.FontFamily
import androidx.compose.ui.text.input.KeyboardType
import androidx.compose.ui.text.input.TextFieldValue
import androidx.compose.ui.text.style.TextDecoration
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import androidx.navigation.NavHostController
import androidx.navigation.compose.rememberNavController
import com.example.formexample.ui.theme.Purple80

@Composable
fun LoginPage(navController: NavHostController) {
    Box(modifier = Modifier.fillMaxSize()) {
        ClickableText(
            text = AnnotatedString("Signup Here"),
            modifier = Modifier
                .align(Alignment.Center)
                .padding(20.dp),
            onClick = {
                navController.navigate("signup")
            },
            style = TextStyle(
                fontSize = 14.sp,
                fontFamily = FontFamily.Default,
                textDecoration = TextDecoration.Underline,
                color = Purple80
            )
        )
    }
    Column(
        modifier = Modifier.padding(20.dp),
        verticalArrangement = Arrangement.Center,
        horizontalAlignment = Alignment.CenterHorizontally
    ) {
         val username = remember {
             mutableStateOf(TextFieldValue())
         }
        val password = remember {
            mutableStateOf(TextFieldValue())
        }

        Text(
            text = "Login",
            style = TextStyle(fontSize = 40.sp, fontFamily = FontFamily.Cursive)
        )

        Spacer(modifier = Modifier.height(15.dp))

        TextField(
            label = { Text(text = "Username")},
            value = username.value,
            onValueChange = {username.value = it},
            keyboardOptions = KeyboardOptions(keyboardType = KeyboardType.Password)
        )

        Spacer(modifier = Modifier.height(15.dp))

        Box(modifier = Modifier.padding(40.dp, 0.dp, 40.dp, 0.dp)) {
            Button(
                onClick = {},
                shape = RoundedCornerShape(50.dp),
                modifier = Modifier
                    .fillMaxWidth()
                    .height(50.dp)
            ) {
                Text(text = "Login")
            }
        }

        Spacer(modifier = Modifier.height(15.dp))

        ClickableText(
            text = AnnotatedString("Forgot Password?"),
            onClick = { navController.navigate("forgot-password") },
            style = TextStyle(
                fontSize = 15.sp,
                fontFamily = FontFamily.Default
            )
        )
    }
}

@Preview
@Composable
fun LoginPagePreview() {
    val navController = rememberNavController()
    LoginPage(navController = navController)
}

这将使用compose的ui元素提供一个基本的登录表单，它提供了一个供用户注册的链接，如果用户忘记了密码，它还提供另一个链接。

最后，我们将创建最终表单，创建SignUp.kt文件并粘贴/输入以下代码：

ini 复制代码 
package com.example.formexample.pages

import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.foundation.text.KeyboardOptions
import androidx.compose.material3.Button
import androidx.compose.material3.Scaffold
import androidx.compose.material3.Text
import androidx.compose.material3.TextField
import androidx.compose.runtime.Composable
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.text.TextStyle
import androidx.compose.ui.text.font.FontFamily
import androidx.compose.ui.text.input.KeyboardType
import androidx.compose.ui.text.input.TextFieldValue
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import androidx.navigation.NavHostController
import androidx.navigation.compose.rememberNavController
import com.example.formexample.component.CustomTopAppBar

@Composable
fun SignUp(navController: NavHostController) {
    Scaffold(
        topBar = { CustomTopAppBar(
            navController = navController,
            title = "SignUp",
            showBackIcon = true)
        },
        content = { it ->
            Column(
                modifier = Modifier.padding(it),
                verticalArrangement = Arrangement.Center,
                horizontalAlignment = Alignment.CenterHorizontally
            ) {
                val username = remember {
                    mutableStateOf(TextFieldValue())
                }
                
                val password = remember {
                    mutableStateOf(TextFieldValue())
                }
                
                val passwordConfirm = remember {
                    mutableStateOf(TextFieldValue())
                }
                
                Text(
                   text = "SignUp", 
                    style = TextStyle(fontSize = 40.sp, fontFamily = FontFamily.Cursive)
                )
                
                Spacer(modifier = Modifier.height(15.dp))
                
                TextField(
                    label = { Text(text = "Username")},
                    value = username.value, 
                    onValueChange = { username.value = it}
                )
                
                Spacer(modifier = Modifier.height(15.dp))
                
                TextField(
                    label = { Text( text = "Password") },
                    value = password.value, 
                    onValueChange = { password.value = it},
                    keyboardOptions = KeyboardOptions(keyboardType = KeyboardType.Password)
                )
                
                Spacer(modifier = Modifier.height(15.dp))

                TextField(
                    label = {Text(text = "Password Confirmation")},
                    value = passwordConfirm.value, 
                    onValueChange =  { passwordConfirm.value = it },
                    keyboardOptions = KeyboardOptions(keyboardType = KeyboardType.Password)
                )
                
                Spacer(modifier = Modifier.height(15.dp))

                Box(modifier = Modifier.padding(40.dp, 0.dp, 40.dp, 0.dp)) {
                    Button(
                        onClick = {},
                        shape = RoundedCornerShape(50.dp),
                        modifier = Modifier
                            .fillMaxWidth()
                            .height(50.dp)
                    ) {
                        Text(text = "SignUp")
                    }
                }
            }
        }
    )
}

@Preview
@Composable
fun SignUpPreview() {
    val navController = rememberNavController()
    SignUp(navController = navController)
}

同样，没有什么太复杂的，这个表单包含用户名和密码/确认密码输入文本的字段。

接下来，我们终于可以检查用户界面和导航，启动模拟器/实际设备，你应该能够看到/导航一下屏幕：

忘记密码：

登录：

注册：

小结

在这里，我展示了如何使用Android Jetpack Commpose 创建简单的注册表单。

希望这对想要尝试Android Jetpack Compose的人有所帮助。

相关推荐
hunterandroid8 小时前
Android WebView JSBridge 治理实战：从线上白屏崩溃到协议化通信
android·前端
一个用户名i8 小时前
【Compose 系列】第 1 篇：认识 Compose，为什么要学它
android·android jetpack
极客猴子10 小时前
iPhone实时转写软件推荐：会议录音功能真实体验
android·人工智能·飞书
达令哥10 小时前
告别 ARouter！基于 Google 官方 Navigation 3 + KSP 打造 Compose 时代的双轨制路由框架
android·前端
YF021110 小时前
Android App启动与权限管控
android
嘟哩DuliDuli10 小时前
AI 短剧生成为什么要有角色库、场景库和镜头卡
android·人工智能·安全·ai·软件工程
NINO12 小时前
深度解析 Android ANR：从标准分析流程到 NativePollOnce 疑难破局
android
阿巴斯甜12 小时前
AppFunctions 完整介绍
android
蜡台12 小时前
Jetpack Compose 从入门到精通
android·前端·kotlin·compose·jepack
toooooop813 小时前
踩坑：PHP7.2导出Excel正常，升级7.3文件损坏需修复
android·excel
热门推荐
01国内可直接用、免费额度/永久免费的大模型API清单（含 SiliconFlow、火山、阿里、智谱、百度、Kimi、DeepSeek、DMXAPI 等）02GitHub 镜像站点03微信历史版本含下载地址（ Windows PC | 安卓 | MAC ）及设置微信不更新042026 国产 AI 大模型横评：DeepSeek、通义千问、Kimi、文心一言、星火、豆包谁更能打？05历年考研数学一、数学二、数学三真题试卷及答案PDF06Agnes AI 免费 API 接入指南：文本、生图、生视频，一套接口全免费07AI 编程 IDE 全景解析 2026：Agent 全面接管开发链路082026年7月AI圈大地震：GPT-5.6被政府限制、Claude入驻Slack、Anthropic自研芯片09VSCode+CodeX扩展，无法启动10如何新建文件夹？ 电脑新建文件夹的4种方法