如何在 MVVM Android 中动态创建子视图？答案

【问题标题】：How can I create child views dynamically in MVVM Android?如何在 MVVM Android 中动态创建子视图？
【发布时间】：2022-11-28 01:41:51
【问题描述】：

我是 Android 中 MVVM 的新手。
有没有办法添加组布局的子视图，例如 chipgroup、radiogroup？
假设有来自服务器的这种数据。

[name: 'coffee', size: 'tall', 'grande', 'venti' ...,
 name: 'pizza', size: 'small', 'medium', 'large' ...]

这是我到目前为止所做的：
主要的XML
itemViewModels 是一个自定义的 BindingAdapter，用于绑定 RecyclerViewAdapter 和 listItems

<androidx.recyclerview.widget.RecyclerView
  app:itemViewModels="@{vm.listItem}"
  app:layoutManager="androidx.recyclerview.widget.GridLayoutManager"/>

视图模型

val listItem = MutableLiveData<List<ItemViewModel>>(...)
listItem= ... // get data and convert into view data blabla

项目视图模型

class ItemViewModel() {
  val name:String
  val size:List<String>
}

项目 XML

<TextView android:text="@{itemViewModel.data.name}" .../>
<com.google.android.material.chip.ChipGroup
  android:id="@+id/chipGroupSizeOption">
  <!-- I would like to add child views of chipgroup here -->
</com.google.android.material.chip.ChipGroup>

在 MVC 模式中，我会这样写

binding.chipGroupSizeOption.removeAllViews()
SizeOptionsDataFromServer.forEach { x->
  val chip= (LayoutInflater.from(context).inflate(R.layout.chip_item, 
  binding.chipGroupSizeOption, false) as Chip)
    .apply {
    text = x.data.name
    id = ViewCompat.generateViewId()
  }
}
binding.chipGroupSizeOption.addView(chip)

但是在 MVVM 中，是否可以通过数据绑定添加子视图？
我应该使用 BindingAdapter 来实现吗？

【问题讨论】：

标签： android kotlin mvvm data-binding

【解决方案1】：

所以，你的布局资源中有你的list_view_item。在此项目布局中，有一个芯片组将显示来自对象的列表。示例 User.nicknames

我猜在这个 list_view_item 布局中，您已经定义了对象变量。就像是

<layout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto">
<data>
    <variable
        name="user"
        type="com.myapp.data.User" />
</data>
<ConstraintLayout... /> <!-- UI layout's root element -->

现在，创建一个绑定适配器，您可以通过创建一个新的 kotlin 文件来实现，该文件将包含它需要一个 chipGroup 的所有适配器和要显示的项目列表。这是我的用例中的一个

@BindingAdapter("childChipValues")
fun bindChildChips(chipGroup: ChipGroup, childChipValues:List<String>) {
    childChipValues.forEach{ value ->
        val chip = Chip(chipGroup.context)
        chip.text = value
        chipGroup.addView(chip)
    }
}

接下来，您要做的是返回 chipGroup 布局并使用适配器。就像是

<com.google.android.material.chip.ChipGroup
                android:id="@+id/levels"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                app:childChipValues="@{user.nicknames}"
                app:singleSelection="false" />

你可以阅读更多关于绑定适配器的内容here

【讨论】：