如何在 jetpack compose 中使用改造 API 创建列表视图/网格视图/回收器视图

Question

我已经创建了 Kotlin 代码，用于在列表视图/网格视图/回收器视图中通过改造来解析 API，我想知道如何使用 jetpack compose 来做同样的事情？我使用改造来使用不同的 ViewGroup 解析 GET API 响应。视图绑定用于与此屏幕上的视图进行交互。

代码

 import android.annotation.SuppressLint
                import android.app.AlertDialog
                import android.app.ProgressDialog
                import android.content.ActivityNotFoundException
                import android.content.DialogInterface
                import android.content.Intent
                import android.content.res.Configuration
                import android.os.Bundle
                import android.util.Log
                import android.view.*
                import android.view.inputmethod.EditorInfo
                import android.widget.*
                import androidx.activity.viewModels
                import androidx.appcompat.app.AppCompatActivity
                import androidx.databinding.DataBindingUtil
                import okhttp3.ResponseBody
                import org.json.JSONArray
                import org.json.JSONException
                import org.json.JSONObject
                import retrofit.Retrofit2
                import retrofit2.Call
                import retrofit2.Callback
                import retrofit2.Response
                import retrofit2.Retrofit
                import retrofit2.converter.gson.GsonConverterFactory
                import supports.*
                import viewmodel.SIViewModel
                import java.io.IOException
                import java.net.SocketTimeoutException
                import java.util.*
                
                
                class TestIndex : AppCompatActivity() {
                    var adapter: Adapter1? = null
                    var dialog: AlertDialog? = null
                    var builder: AlertDialog.Builder? = null
                    private val viewModel: SIViewModel? by viewModels()
                    var test_arr = ArrayList<TestModel>()
                    var binding: TestGridBinding? = null
               
                
                    @SuppressLint("CommitPrefEdits", "ClickableViewAccessibility", "SetTextI18n")
                    override fun onCreate(savedInstanceState: Bundle?) {
                        super.onCreate(savedInstanceState)
                        binding = DataBindingUtil.setContentView(this, R.layout.test_grid)
                        setSupportActionBar(binding?.view?.toolbarr)
                        supportActionBar!!.elevation = 0f
                
                        viewModel
                
                
                       
                        adapter = Adapter1(this@TestIndex, R.layout.row, test_arr)
                
                
                
        //binding ViewModel retrofit API with activity, here ID1 and ID2 coming from the previous screen.
                        viewModel!!.getList(this@TestIndex , ID1!!, ID2!!)
        
                        binding?.gvTest?.adapter = adapter
                
        
                        binding?.swipeRefreshLayout?.setOnRefreshListener {
                            binding?.swipeRefreshLayout?.isRefreshing = true
                 
                                if (ID1 != null && ID2 != null) {
        
        // getting same server response on swipe refresh widget
                                    getdata(ID1!!, ID2!!)
                                } else {
                                    builder = AlertDialog.Builder(MyApplication.instance)
                                    builder!!.setCancelable(false)
                                    builder!!.setTitle("Alert")
                                    builder!!.setNegativeButton("Cancel") { dialog: DialogInterface, which: Int ->
                                        dialog.dismiss()
                                        finish()
                                    }
                                    builder!!.setPositiveButton("OK") { dialog: DialogInterface, which: Int -> dialog.dismiss() }
                                    dialog = builder!!.create()
                                    dialog?.show()
                                }
                
                        }
                
                
                
                        subscribeObservers()
                    }
                
//this is checked on the dev portal but I don't know I could I use it //dynamically with adapters and ArrayList.
                    @Composable
        fun LazyRowItemsDemo() {
            LazyRow {
                items((1..title_arr.size).toList()) {
                    Text(text = "Item $it")
                }
            }
        }
                
                
                    private fun getdata(id1: String, id2: String) {
                
                        val mProgressDialog = ProgressDialog(this@TestIndex)
                        mProgressDialog.isIndeterminate = true
                        mProgressDialog.setMessage(Keys.KEY_pre_msg)
                        if (!this.isFinishing) {
                            mProgressDialog.show()
                        }
                        val retrofit = Retrofit.Builder()
                            .baseUrl(Keys.testURL)
                            .client(OkHttpClient().build())
                            .addConverterFactory(GsonConverterFactory.create())
                            .build()
                        val retrofitInterface = retrofit.create(
                            RetrofitInterface::class.java
                        )
                        val call = retrofitInterface.getTestdata(id1, id2)
                
                        call!!.enqueue(object : Callback<ResponseBody?> {
                            override fun onResponse(call: Call<ResponseBody?>, response: Response<ResponseBody?>) {
                                var remoteResponse: String? = null
                                if (response.code() == 200) {
                                    try {
                                        assert(response.body() != null)
                                        remoteResponse = response.body()!!.string()
                                    } catch (e: Exception) {
                                        e.printStackTrace()
                                    }
                                } else {
                                    try {
                                        if (response.errorBody() != null) {
                                            remoteResponse = response.errorBody()!!.string()
                                        }
                                    } catch (e: IOException) {
                                        e.printStackTrace()
                                    }
                                }
                                if (remoteResponse != null) {
            
            //getting response fields and parsing list view or grid view/recycler view in different screens
            
                                        adapter =
                                            Adapter1(this@TestIndex, R.layout.row, test_arr)
                                        binding!!.gvTest.adapter = adapter
                                        adapter!!.notifyDataSetChanged()
                
                                }
                            }
                
                            override fun onFailure(call: Call<ResponseBody?>, t: Throwable) {
                                Log.d(Keys.KEY_TAG, "onFailure: " + t.localizedMessage)
                            }
                        })
                        if (mProgressDialog.isShowing) mProgressDialog.dismiss()
                    }
                
                
        //subscribed the Observers here from view model
                    private fun subscribeObservers() {
                        viewModel!!.lifting.observe(this, { TestModel: List<TestModel>? ->
                            adapter!!.updateTests(TestModel)
                            binding!!.swipeRefreshLayout.isRefreshing = false
                    }
                
                }

请让我知道如何使用 jetpack compose 为列表视图、网格视图、回收器视图做同样的事情。谢谢。

Answer 1

这是一个更一般的例子，没有改造。您可以在我的 getTestData 方法中实现数据提取。

首先，为了了解使用 Compose 的基本原理，我建议你学习compose tutorials。

Compose 使用视图模型来执行复杂的数据操作。我将使用基本版本，但您也可以查看Hilt 了解更复杂的架构。

为了改变对象的状态以导致重组，您可以使用：

1. mutableStateObject - 这是一个专门为 compose 创建的容器，如果值发生变化，它将更新视图
2. 您也可以使用LiveData 和Flow，它们都可以转换为mutableStateObject。

请注意，如果您在其中传递复杂类，mutableStateObject 不会提醒您容器对象字段的更改。它只会在值本身发生变化时通知您，因此建议仅将其用于简单类型。

您也可以使用mutableStateListOf 来存储收藏。在我的示例中，您将看到两者：mutableStateListOf 可以方便地向集合添加/删除对象，而 mutableStateObject 和 List 位于内部更容易完全替换为新对象。

在 Composable 函数内部，您需要使用 remember 包装可变状态对象，以防止在每个组合上重新初始化它们，而在您的视图模型内部，您不需要这样做，因为它在任何情况下都不会被重新初始化。

SwipeRefresh 不是 compose 的一部分，它也是 compose 维护者创建的库。要安装它，请关注this instructions。

我在这里使用两列只是为了显示mutableStateOf 和mutableStateListOf 之间的区别，您可以删除Row 和LazyColumn 之一

class ScreenViewModel : ViewModel() {
    var list by mutableStateOf(emptyList<String>())
    var mutableList = mutableStateListOf<String>()
    var isRefreshing by mutableStateOf(false)

    init {
        refresh()
    }

    fun refresh() {
        isRefreshing = true
        viewModelScope.launch {
            list = getTestData()
            mutableList.addAll(0, list)
            isRefreshing = false
        }
    }

    suspend fun getTestData(): List<String> {
        // emulate network call
        delay(1000)
        return List(100) {
            Random.nextInt(100).toString()
        }
    }
}

@Composable
fun TestView() {
    val viewModel: ScreenViewModel = viewModel()
    SwipeRefresh(
        state = rememberSwipeRefreshState(viewModel.isRefreshing),
        onRefresh = {
            viewModel.refresh()
        },
    ) {
        Row {
            LazyColumn(
                modifier = Modifier.weight(1f) // this needed inly for two columns case
            ) {
                itemsIndexed(viewModel.list) { i, item ->
                    Text("$i $item")
                }
            }
            LazyColumn(
                modifier = Modifier.weight(1f) // this needed inly for two columns case
            ) {
                itemsIndexed(viewModel.mutableList) { i, item ->
                    Text("$i $item")
                }
            }
        }
    }
}

结果：