第七次冲刺（4.25）

 

第七天冲刺任务目标与规划

任务目标：

• 学习Jetpack Compose。
• 开发个人主页。

遇到的问题：

• 不会使用Jetpack Compose，需要学习。

1. 学习Jetpack Compose

推荐学习资源

1. 官方文档：

   • Jetpack Compose Documentation
   • Compose Pathway

2. 视频教程：

   • Android Developers - YouTube Channel
   • Jetpack Compose Basics

3. 在线课程：

   • Udemy - Jetpack Compose Courses
   • Coursera - Android Development with Jetpack Compose

2. 开发个人主页

具体步骤

步骤1：设置项目

• 确保你的Android Studio已安装最新版本。
• 创建一个新的Compose项目或将Compose集成到现有项目中。

// 在build.gradle文件中添加依赖项
dependencies {
    implementation "androidx.compose.ui:ui:1.0.0"
    implementation "androidx.compose.material:material:1.0.0"
    implementation "androidx.compose.ui:ui-tooling-preview:1.0.0"
    implementation "androidx.lifecycle:lifecycle-runtime-ktx:2.3.1"
    implementation "androidx.activity:activity-compose:1.3.0"
}

步骤2：设计个人主页界面

• 使用Compose设计个人主页，包括头像显示、用户名和其他基本信息。

@Composable
fun UserProfileScreen(user: User) {
    Column(
        modifier = Modifier
            .fillMaxSize()
            .padding(16.dp),
        verticalArrangement = Arrangement.Center,
        horizontalAlignment = Alignment.CenterHorizontally
    ) {
        // 头像显示
        Image(
            painter = rememberImagePainter(user.avatarUrl),
            contentDescription = null,
            modifier = Modifier
                .size(128.dp)
                .clip(CircleShape)
        )

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

        // 用户名显示
        Text(text = user.name, style = MaterialTheme.typography.h6)

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

        // 电子邮件显示
        Text(text = user.email, style = MaterialTheme.typography.body1)
        
        Spacer(modifier = Modifier.height(16.dp))

        // 编辑个人资料按钮
        Button(onClick = { /* Navigate to Edit Profile Screen */ }) {
            Text("编辑个人资料")
        }
    }
}

步骤3：实现头像更换功能

• 为用户提供更换头像的功能。

@Composable
fun ChangeAvatarButton(onAvatarChange: (Uri) -> Unit) {
    val context = LocalContext.current
    val launcher = rememberLauncherForActivityResult(
        contract = ActivityResultContracts.GetContent()
    ) { uri: Uri? ->
        uri?.let { onAvatarChange(it) }
    }

    Button(onClick = { launcher.launch("image/*") }) {
        Text("更换头像")
    }
}

步骤4：将头像URI保存到本地存储

• 将用户选择的头像URI保存到SharedPreferences或数据库中。

val sharedPreferences = context.getSharedPreferences("UserProfile", Context.MODE_PRIVATE)
sharedPreferences.edit().putString("avatar_uri", imageUri.value.toString()).apply()

步骤5：加载已保存的头像

• 在应用启动时加载保存的头像URI。

val savedUri = sharedPreferences.getString("avatar_uri", null)
imageUri.value = savedUri?.let { Uri.parse(it) }

总结

通过学习Jetpack Compose并使用它开发个人主页，你可以有效解决当前遇到的问题并实现目标。