android 改造中的 GET 请求不起作用

Question

我正在尝试学习撰写和改造，为此我正在开发一个非常简单的应用程序，从公共 API 获取笑话并将它们显示在惰性列表中。但它不起作用，我看不到任何笑话。我是 Kotlin 和 Jetpack 组合的新手。请帮我调试一下。

我有一个 joke 类

data class Joke(
    val id: Int,.
    val punchline: String,
    val setup: String,
    val type: String
)

这是我从中获取的 API： https://official-joke-api.appspot.com/jokes/:id 这是回应：

{"type":"general","setup":"What did the fish say when it hit the wall?","punchline":"Dam.","id":1}

这是改造 api 服务：

const val BASE_URL = "https://official-joke-api.appspot.com/"

interface JokeRepository {

    @GET("jokes/{id}")
    suspend fun getJoke(@Path("id") id: String ) : Joke
    companion object {
        var apiService: JokeRepository? = null
        fun getInstance(): JokeRepository {
            if (apiService == null) {
                apiService = Retrofit.Builder()
                    .baseUrl(BASE_URL)
                    .addConverterFactory(GsonConverterFactory.create())
                    .build().create(JokeRepository::class.java)
            }
            return apiService!!
        }
    }
}

这是笑话视图模型：

class JokeViewModel : ViewModel() {
    private val _jokeList = mutableListOf<Joke>()
    var errorMessage by mutableStateOf("")
    val jokeList: List<Joke> get() = _jokeList

    fun getJokeList() {
        viewModelScope.launch {
            val apiService = JokeRepository.getInstance()
            try {
                _jokeList.clear()
//                for(i in 1..100) {
//                    var jokeWithId = apiService.getJoke(i.toString())
//                    _jokeList.add(jokeWithId)
//                    Log.d("DEBUGGG", jokeWithId.setup)
//                }
                var joke = apiService.getJoke("1")
                _jokeList.add(joke)

            }
            catch (e: Exception) {
                errorMessage = e.message.toString()
            }
        }
    }
}

这是主要活动

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {

        val jokeViewModel = JokeViewModel()
        super.onCreate(savedInstanceState)
        setContent {
            HasyamTheme {
                // A surface container using the 'background' color from the theme
                Surface(
                    modifier = Modifier.fillMaxSize(),
                    color = MaterialTheme.colorScheme.background
                ) {
                    JokeView(jvm = jokeViewModel)
                }
            }
        }
    }
}

这是笑话组件和视图

@Composable
fun JokeView(jvm: JokeViewModel) {
    LaunchedEffect(Unit, block = {
        jvm.getJokeList()
    })
    
    Text(text = jvm.errorMessage)
    
    LazyColumn() {
        items(jvm.jokeList) {
            joke -> JokeComponent(joke)
        }
    }

}



@OptIn(ExperimentalMaterial3Api::class)

@Composable
fun JokeComponent(joke: Joke) {

    var opened by remember { mutableStateOf(false)}

    Column(
        modifier = Modifier.padding(15.dp)
    ) {
        Card(
            modifier = Modifier
                .fillMaxWidth()
                .clickable { },
            elevation = CardDefaults.cardElevation(
                defaultElevation = 5.dp
            ),

            onClick = { opened = !opened}

        ) {
            Text(modifier = Modifier.padding(15.dp), text = joke.setup)
        }

        if (opened) {
            Text(modifier = Modifier.padding(15.dp), text = joke.punchline)
        }
    }
}

太感谢了

Answer 1

这里的问题是您没有使用 stateFlow。屏幕未重新组合，因此您的 LazyColumn 未使用更新后的值重新创建。

视图模型

class JokeViewModel : ViewModel() {
    var errorMessage by mutableStateOf("")
    private val _jokes = MutableStateFlow(emptyList<Joke>())
    val jokes = _jokes.asStateFlow()

    fun getJokeList() {
        viewModelScope.launch {
            val apiService = JokeRepository.getInstance()
            try {
                var jokes = apiService.getJoke("1")
                _jokes.update { jokes }

            } catch (e: Exception) {
                errorMessage = e.message.toString()
            }
        }
    }
}

笑话观

@Composable
fun JokeView(jvm: JokeViewModel) {
    
    val jokes by jvm.jokes.collectAsState()

    LaunchedEffect(Unit, block = {
        jvm.getJokeList()
    })

    Text(text = jvm.errorMessage)

    LazyColumn {
        items(jokes) {
                joke -> JokeComponent(joke)
        }
    }
}

您应该阅读以下有关状态的文档：https://developer.android.com/jetpack/compose/state