2024 最新最简单的 Jetpack Compose 与 Retrofit API 网络对接教程

2024 最新最简单的 Jetpack Compose 与 Retrofit API 网络对接教程

前期准备

1. 授予网络权限

首先，确保项目拥有网络访问权限。请在 AndroidManifest.xml 文件中添加以下内容：

<?xml version="1.0" encoding="utf-8"?>  
<manifest xmlns:android="http://schemas.android.com/apk/res/android"  
    xmlns:tools="http://schemas.android.com/tools">  
  
    <!-- 网络权限 -->  
    <uses-permission android:name="android.permission.INTERNET"/>  
  
    <!-- 网络安全配置 -->
    <application  
        android:allowBackup="true"  
        android:networkSecurityConfig="@xml/network_security_config"  
        android:dataExtractionRules="@xml/data_extraction_rules"  
        android:fullBackupContent="@xml/backup_rules"  
        android:icon="@mipmap/ic_launcher"  
        android:label="@string/app_name"  
        android:roundIcon="@mipmap/ic_launcher_round"  
        android:supportsRtl="true"  
        android:theme="@style/Theme.MyApplication"  
        tools:targetApi="31">  
        <activity  
            android:name=".MainActivity"  
            android:exported="true"  
            android:label="@string/app_name"  
            android:theme="@style/Theme.MyApplication">  
            <intent-filter>  
                <action android:name="android.intent.action.MAIN" />  
                <category android:name="android.intent.category.LAUNCHER" />  
            </intent-filter>  
        </activity>  
    </application>  
</manifest>

2. 配置网络安全

如果你在本地开发中使用的是本地服务器（例如 192.168.x.x），你需要在 res/xml 目录下创建 network_security_config.xml 文件，并配置如下：

<?xml version="1.0" encoding="utf-8"?>  
<network-security-config>  
    <domain-config cleartextTrafficPermitted="true">  
        <domain includeSubdomains="true">192.168.0.100</domain>  <!-- 允许访问你的本地服务器 IP -->    
    </domain-config>  
</network-security-config>

3. 添加依赖

在 build.gradle.kts 文件中，添加以下依赖以引入 Retrofit 和 Gson 转换器：

implementation("com.squareup.retrofit2:retrofit:2.9.0")
implementation("com.squareup.retrofit2:converter-gson:2.9.0")

---

创建 Retrofit 网络接口

1. 定义数据模型

在 com.movie.myapplication.ui.network 包下创建一个新的 Kotlin 文件，并定义 API 返回的数据模型：

package com.movie.myapplication.ui.network

data class User(  
    val id: Int,  
    val name: String,  
    val email: String  
)

2. 定义 API 接口

接下来，创建 ApiService 接口，定义与 API 交互的方法：

package com.movie.myapplication.ui.network

import retrofit2.http.GET

interface ApiService {  
    @GET("user")  
    suspend fun getUser(): User  // 异步获取用户信息
}

3. 创建 Retrofit 实例

为了方便使用 Retrofit，我们创建一个 RetrofitInstance 单例对象来管理 Retrofit 实例：

package com.movie.myapplication.ui.network

import retrofit2.converter.gson.GsonConverterFactory
import retrofit2.Retrofit

object RetrofitInstance {

    private const val BASE_URL = "http://192.168.0.100:3000/"  // 服务器地址

    val apiService: ApiService by lazy {  
        Retrofit.Builder()  
            .baseUrl(BASE_URL)  
            .addConverterFactory(GsonConverterFactory.create()) // 使用 Gson 转换器  
            .build()  
            .create(ApiService::class.java)  
    }  
}

---

使用 Retrofit API

1. 创建显示界面

现在，我们将创建一个简单的 Compose 屏幕来显示从 API 获取的数据。在 com.movie.myapplication.ui.screen 包下创建一个新的 Composable 函数 MainScreen：

package com.movie.myapplication.ui.screen

import android.content.Context
import androidx.compose.foundation.layout.Column
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.runtime.LaunchedEffect
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.ui.platform.LocalContext
import com.movie.myapplication.ui.network.RetrofitInstance
import com.movie.myapplication.ui.network.User

@Composable
fun MainScreen() {
    val userData = remember { mutableStateOf<User?>(null) }
    val isLoading = remember { mutableStateOf(true) }
    val context = LocalContext.current

    LaunchedEffect(Unit) {
        userData.value = fetchUser(context)
        isLoading.value = false
    }

    Column {
        if (isLoading.value) {
            Text("Loading...")
        } else if (userData.value != null) {
            userData.value?.let { user ->
                Text("User ID: ${user.id}")
                Text("User Name: ${user.name}")
                Text("User Email: ${user.email}")
            }
        } else {
            Text("Error fetching user data.")
        }
    }
}

// 在协程中调用 Retrofit
suspend fun fetchUser(context: Context): User? {
    return try {
        RetrofitInstance.apiService.getUser()  // Retrofit 请求
    } catch (e: Exception) {
        e.printStackTrace()
        null
    }
}

2. 主界面调用

在 MainActivity 中，调用我们刚刚创建的 MainScreen Composable 函数，并将其嵌入到界面中：

package com.movie.myapplication

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.navigationBarsPadding
import androidx.compose.foundation.layout.statusBarsPadding
import androidx.compose.material3.Surface
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.tooling.preview.Preview
import com.movie.myapplication.ui.screen.MainScreen
import com.movie.myapplication.ui.theme.MyApplicationTheme

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            MyApplicationTheme {
                Surface(modifier = Modifier.fillMaxSize().statusBarsPadding().navigationBarsPadding()) {
                    MainScreen()
                }
            }
        }
    }
}

@Preview(showBackground = true)
@Composable
fun GreetingPreview() {
    MyApplicationTheme {
        MainScreen()
    }
}

---

结语

通过上述步骤，我们完成了一个简单的 Jetpack Compose 与 Retrofit 的对接教程，展示了如何创建 API 接口、使用 Retrofit 进行数据请求，并在 Compose 屏幕中显示数据。你可以根据需求扩展此功能，添加更多的 API 接口和 UI 组件。