如何初始化片段中的绑定属性以使双向数据绑定工作

Question

所以我正在做一个项目，但我完全迷路了。我已经了解了如何使用 TextViews 进行数据绑定，但我被要求使用具有双向数据绑定的 EditText 视图进行数据绑定。到目前为止，我已经走到这里了。

XML 文件。

<?xml version="1.0" encoding="utf-8"?>
<layout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools">

    <data>
        <variable
            name="myShoe"
            type="com.udacity.shoestore.product.Shoe" />
    </data>

    <androidx.constraintlayout.widget.ConstraintLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@color/colorPrimary">

        <TextView
            android:id="@+id/title_detail_view"
            style="@style/title_style"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginTop="80dp"
            android:text="@string/add_shoe_title"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent" />

        <EditText
            android:id="@+id/shoe_name"
            style="@style/login_style"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_marginStart="16dp"
            android:layout_marginEnd="16dp"
            android:ems="10"
            android:hint="@string/shoe_name_string"
            android:inputType="text"
            android:textSize="30sp"
            android:text="@={myShoe.name}"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toBottomOf="@+id/title_detail_view" />

        <EditText
            android:id="@+id/shoe_size"
            style="@style/login_style"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:ems="10"
            android:hint="@string/size_string"
            android:inputType="number|numberDecimal"
            android:textSize="15sp"
            android:text="@={myShoe.size}"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toBottomOf="@+id/shoe_name" />

        <EditText
            android:id="@+id/company_name"
            style="@style/login_style"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:ems="10"
            android:hint="@string/company_string"
            android:inputType="text"
            android:textSize="15sp"
            android:text="@={myShoe.company}"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toBottomOf="@+id/shoe_size" />

        <EditText
            android:id="@+id/shoe_description"
            style="@style/login_style"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:ems="10"
            android:hint="@string/description_string"
            android:inputType="text"
            android:textSize="15sp"
            android:text="@={myShoe.description}"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toBottomOf="@+id/company_name" />

        <Button
            android:id="@+id/cancel_button"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:backgroundTint="@color/colorPrimaryDark"
            android:text="@string/cancel_string"
            android:textColor="@android:color/white"
            app:layout_constraintBaseline_toBaselineOf="@+id/savee_button"
            app:layout_constraintEnd_toStartOf="@+id/savee_button"
            app:layout_constraintStart_toStartOf="parent" />

        <Button
            android:id="@+id/savee_button"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginTop="16dp"
            android:layout_marginEnd="88dp"
            android:backgroundTint="@color/colorPrimaryDark"
            android:text="@string/save_string"
            android:textColor="@android:color/white"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintTop_toBottomOf="@+id/shoe_description" />

    </androidx.constraintlayout.widget.ConstraintLayout>
</layout>

有人告诉我将它实现为一个片段，它应该可以工作。但我不确定如何。这是片段

class ShoeDetailsFragment : Fragment() {

    private val viewModel: ActivityViewModel by activityViewModels()

    override fun onCreateView(
        inflater: LayoutInflater,
        container: ViewGroup?,
        savedInstanceState: Bundle?
    ): View? {


        val binding: FragmentShoeDetailsBinding = DataBindingUtil.inflate(
            inflater,
            R.layout.fragment_shoe_details,
            container, false
        )



        //initializing the button and clearing the views once canceled
        binding.cancelButton.setOnClickListener { v: View ->
            v.findNavController().navigateUp()

            binding.shoeName.text.clear()
            binding.shoeSize.text.clear()
            binding.companyName.text.clear()
            binding.shoeDescription.text.clear()

        }
        //initializing the button and saving the info to transfer to the shoeList
        binding.saveeButton.setOnClickListener { v: View ->
            v.findNavController().navigateUp()

            val name = shoe_name.text.toString()
            val size = shoe_size.text.toString()
            val brand = company_name.text.toString()
            val details = shoe_description.text.toString()
            viewModel.addShoe(name, size, brand, details)
        }

        return binding.root
    }
}

我愿意接受任何初始化绑定属性的想法，这样我就可以在布局和片段中使用它。还是我看错了？

P.S。 XML 文件在此片段中表示

Answer 1

我也为我的纳米学位做了这个项目。
在我的 ViewModel 中，我为每个 EditText:

创建了 3 个变量

MutableLiveData - 更新 viewModel
中的值
LiveData 以在 viewModel 外部公开值，例如在片段中（你真的不需要这个）
Public 变量 用于监控 MutableLiveData 的值并将其公开给您的 xml 从而实现2-Way Binding.

然后我会创建一个 Shared ViewModel 来在 ShoeDetailsFragment 和 ShoeListingFragment 之间共享数据。

SharedViewModel 内部

我为每个 EditText 创建了 3 个变量（这只是前 2 个 Edittext）：

class MySharedViewModel : ViewModel() {
 private val _name = MutableLiveData<String>()
    val name: LiveData<String>
        get() = _name
    var edShoeName = ""

    private val _size = MutableLiveData<Double>()
    val size: LiveData<Double>
        get() = _size
    var edSize = ""

......}

对于 xml 我完全按照你的方式做了，但是使用了 3rd 变量作为 2-Way Data Binding:

<EditText
            android:id="@+id/shoe_name"
            style="@style/login_style"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_marginStart="16dp"
            android:layout_marginEnd="16dp"
            android:ems="10"
            android:hint="@string/shoe_name_string"
            android:inputType="text"
            android:textSize="30sp"
            android:text="@={mySharedViewModel.edShoeName}"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toBottomOf="@+id/title_detail_view" />

        <EditText
            android:id="@+id/shoe_size"
            style="@style/login_style"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:ems="10"
            android:hint="@string/size_string"
            android:inputType="number|numberDecimal"
            android:textSize="15sp"
            android:text="@={mySharedViewModel.edCompany}"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toBottomOf="@+id/shoe_name" />

我看到您在 ShoeDetailFragment 代码中包含了这行代码：

 binding.saveeButton.setOnClickListener { v: View -> ....}

在我的例子中，我是在 SharedViewModel 中完成的：

fun onSaveButtonClick() {

        //check value entered for size and set it to 0 if blank
        if (edSize == "") {

            edSize = "0"
        }

       

        //update MutableLiveData with values read live from the EditText
        _name.value = edShoeName
        _size.value = edSize.toDouble()
        

        //save shoeObject to the _shoeList MutableLiveData
        _shoeList.value?.add(Shoe(edShoeName, edSize.toDouble(), edCompany, edDescription))

    }

使用 DataBinding 我将 onClick 位移动到 xml:

<Button
        android:id="@+id/buttonSave"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="75dp"
        android:layout_marginBottom="75dp"
        android:background="@drawable/custom_button_background"
        android:onClick="@{()->sharedViewModel.onSaveButtonClick()}"

You can also refer to my project.

如何初始化片段中的绑定属性以使双向数据绑定工作

How to Intialize the Binding Properties in the Fragment to Make Two Way Data Binding Work

android

kotlin

android-fragments

android-databinding

mobile-application