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

Posted

技术标签:

【中文标题】如何初始化片段中的绑定属性以使双向数据绑定工作【英文标题】:How to Intialize the Binding Properties in the Fragment to Make Two Way Data Binding Work 【发布时间】:2021-08-19 06:42:01 【问题描述】:

所以我正在做一个项目,我完全迷失了。我已经看到了如何使用 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_
        android:layout_
        android:background="@color/colorPrimary">

        <TextView
            android:id="@+id/title_detail_view"
            style="@style/title_style"
            android:layout_
            android:layout_
            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_
            android:layout_
            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_
            android:layout_
            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_
            android:layout_
            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_
            android:layout_
            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_
            android:layout_
            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_
            android:layout_
            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
    

我对初始化绑定属性的任何想法持开放态度,因此我可以在布局和片段中使用它。还是我看错了?

附: XML 文件正在此片段中表示

【问题讨论】:

见:developer.android.com/topic/libraries/data-binding/two-way 【参考方案1】:

我也为我的 NanoDegree 做了这个项目。 在我的 ViewModel 中,我为每个 EditText 创建了 3 个变量:

MutableLiveData - 更新 viewModel 中的值

LiveData 将值暴露在 viewModel 之外,例如在一个片段中(你真的不需要这个

公共变量监控 MutableLiveData 的值并将其公开给您的 xml,从而实现 2-Way Binding。

然后我会创建一个Shared ViewModel 在ShoeDetailsFragmentShoeListingFragment 之间共享数据。

SharedViewModel 内部

我为每个 EditText 创建了 3 个变量(这只是前 2 个 Edittexts):

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,我完全按照您所做的操作,但将 第三个​​变量用于 2-Way 数据绑定

<EditText
            android:id="@+id/shoe_name"
            style="@style/login_style"
            android:layout_
            android:layout_
            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_
            android:layout_
            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_
        android:layout_
        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.

【讨论】:

欣赏它,伙计。它对我有用。我知道那里没有问它,但是您保存信息后如何清除字段?我的“取消”按钮会执行此操作,但“保存”按钮仍会保留它在之前的清单中保存的信息。 清理领域的好观察,我当时没有想到,但让我看看我能不能想出点什么。 欣赏人。有没有办法在***之外进行连接?我自己并不了解很多 Android 开发人员。 当然,我很乐意;您可以在 [LinkedIn](www.linkedin.com/in/antony-muchiri) 或 Twitter 上找到我,也不要忘记在 [Udacity 的学生休息室] (hub.udacity.com/rooms/…) 上向大家问好

以上是关于如何初始化片段中的绑定属性以使双向数据绑定工作的主要内容,如果未能解决你的问题,请参考以下文章

vue的数据双向绑定是怎么实现的

js中的访问器属性中的getter和setter函数实现数据双向绑定

Vue的双向数据绑定原理

vue中的属性绑定和双向数据绑定

2-4 Vue中的属性绑定和双向数据绑定

vue数据双向绑定原理