Xamarin中MVVMCross模式中的RecyclerView復選框

Question

我有以下幾點。 axmls基本上是一個recyclerview ，其中包含一個textview和復選框。 我無法弄清楚如何與復選框交互以刪除mvvmcross設計中的所選項目。

fragment_example_recyclerview.axml

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout  
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:local="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent">
<include
    layout="@layout/toolbar_actionbar" />
    <MvxRecyclerView
        android:id="@+id/my_recycler_view"
        android:scrollbars="vertical"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        local:MvxItemTemplate="@layout/listitem_recyclerviewexample"
        local:MvxBind="ItemsSource Items; ItemClick ItemSelected" />
</android.support.design.widget.CoordinatorLayout>

listitem_recyclerviewexample.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:local="http://schemas.android.com/apk/res-auto"
android:orientation="horizontal"
android:layout_width="fill_parent"
android:layout_height="fill_parent">

<CheckBox android:id="@+id/checkbox_meat"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"/>

<TextView
    android:id="@+id/innerText"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:layout_marginRight="5dp"
    android:padding="10dp"
    local:MvxBind="Text Title" />

ExampleViewPagerViewModel.cs

using MvvmCross.Core.ViewModels;

namespace Example.Core.ViewModels
{
    public class ExampleViewPagerViewModel
        : MvxViewModel
    {
        public RecyclerViewModel Recycler { get; private set; }

        public ExampleViewPagerViewModel()
        {
            Recycler = new RecyclerViewModel();
        }
    }
}

RecyclerViewModel.cs

using MvvmCross.Core.ViewModels;
using System;
using System.Collections.ObjectModel;
using System.Threading.Tasks;
using System.Windows.Input;

namespace Example.Core.ViewModels
{

    public class RecyclerViewModel
        : MvxViewModel
    {
        private ListItem _selectedItem;

        public RecyclerViewModel()
        {
            Items = new ObservableCollection<ListItem> {
                new ListItem { Title = "A" },
                new ListItem { Title = "B" },
                new ListItem { Title = "C" },
                new ListItem { Title = "D" },
                new ListItem { Title = "E" }
            };
        }

        private ObservableCollection<ListItem> _items;

        public ObservableCollection<ListItem> Items
        {
            get { return _items; }
            set
            {
                _items = value;
                RaisePropertyChanged(() => Items);
            }
        }

        public ListItem SelectedItem
        {
            get { return _selectedItem; }
            set
            {
                _selectedItem = value;
                RaisePropertyChanged(() => SelectedItem);
            }
        }

        public virtual ICommand ItemSelected
        {
            get
            {
                return new MvxCommand<ListItem>(item =>
                {
                    SelectedItem = item;
                });
            }
        }        
    }
}

ExampleViewPagerFragment.cs

using System.Collections.Generic;
using Android.OS;
using Android.Runtime;
using Android.Support.Design.Widget;
using Android.Support.V4.View;
using Android.Views;
using Example.Core.ViewModels;
using MvvmCross.Droid.Support.V4;
using MvvmCross.Droid.Support.V7.Fragging.Attributes;

namespace Example.Droid.Fragments
{
    [MvxFragment(typeof (MainViewModel), Resource.Id.content_frame)]
    [Register("example.droid.fragments.ExampleViewPagerFragment")]
    public class ExampleViewPagerFragment : BaseFragment<ExampleViewPagerViewModel>
    {
        protected override int FragmentId => Resource.Layout.fragment_example_viewpager;

        public override View OnCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState)
        {
            var view = base.OnCreateView(inflater, container, savedInstanceState);

            var viewPager = view.FindViewById<ViewPager>(Resource.Id.viewpager);
            if (viewPager != null)
            {

                var vm = new RecyclerViewModel();
                var fragments = new List<MvxFragmentPagerAdapter.FragmentInfo>();
                for(int i = 0; i < vm.Items.Count; i++)
                {
                    fragments.Add(new MvxFragmentPagerAdapter.FragmentInfo("RecyclerView " + (i+1).ToString(), typeof (RecyclerViewFragment),typeof (RecyclerViewModel)));
                }

                viewPager.Adapter = new MvxFragmentPagerAdapter(Activity, ChildFragmentManager, fragments);
            }

            var tabLayout = view.FindViewById<TabLayout>(Resource.Id.tabs);
            tabLayout.SetupWithViewPager(viewPager);

            return view;
        }
    }
}

RecyclerViewFragment.cs

using System;
using Android.OS;
using Android.Runtime;
using Android.Support.Design.Widget;
using Android.Support.V7.Widget;
using Android.Views;
using Android.Widget;
using MvvmCross.Platform.WeakSubscription;
using MvvmCross.Binding.Droid.BindingContext;
using MvvmCross.Droid.Support.V7.Fragging.Fragments;
using MvvmCross.Droid.Support.V7.RecyclerView;
using MvvmCross.Droid.Support.V4;
using Example.Core.ViewModels;
using MvvmCross.Droid.Support.V7.Fragging.Attributes;

namespace Example.Droid.Fragments
{
    [MvxFragment(typeof(MainViewModel), Resource.Id.content_frame)]
    [Register("example.droid.fragments.RecyclerViewFragment")]
    public class RecyclerViewFragment : MvxFragment<RecyclerViewModel>
    {
        private IDisposable _itemSelectedToken;

        public override View OnCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState)
        {
            var ignore = base.OnCreateView(inflater, container, savedInstanceState);

            var view = this.BindingInflate(Resource.Layout.fragment_recyclerview, null);

            var recyclerView = view.FindViewById<MvxRecyclerView>(Resource.Id.my_recycler_view);
            if (recyclerView != null)
            {
                recyclerView.HasFixedSize = true;
                var layoutManager = new LinearLayoutManager(Activity);
                recyclerView.SetLayoutManager(layoutManager);
            }

            _itemSelectedToken = ViewModel.WeakSubscribe(() => ViewModel.SelectedItem,
                (sender, args) => {
                    if (ViewModel.SelectedItem != null)
                        Toast.MakeText(Activity,
                            $"Selected: {ViewModel.SelectedItem.Title}",
                            ToastLength.Short).Show();
                });

            var appBar = Activity.FindViewById<AppBarLayout>(Resource.Id.appbar);
            if (appBar != null)
                appBar.OffsetChanged += (sender, args) => swipeToRefresh.Enabled = args.VerticalOffset == 0;

            return view;
        }

        public override void OnDestroyView()
        {
            base.OnDestroyView();
            _itemSelectedToken.Dispose();
            _itemSelectedToken = null;
        }
    }
}

這是我當前的視圖，可以在其中選擇和取消選擇該復選框，但是我不知道如何處理此選擇事件以刪除所選項目。

更新：

仍然，我不知道如何處理選定的復選框以啟用刪除操作

class ListItem
{
    public int Id { get; set; }
    public string Text { get; set; }
    private bool _isChecked;

    public bool IsChecked
    {
        get { return _isChecked; }
        set
        {
            _isChecked = value;
        }
    } 
}

 public class MyViewModel:MvxViewModel
 {

    private ObservableCollection<MyListViewModel> _myListViews;

    public ObservableCollection<MyListViewModel> MyListViews
    {
        get { return _myListViews; }
        set
        {
            _myListViews= value;
            RaisePropertyChanged(() => MyListViews);
        }
    }
    public void Init(string myId)
    {
         List<ListItem> allListItems = new List<ListItem>();
         allListItems = _myService.GetAllItems(myId);
         foreach (var myTest in allListItems)
         {
           _myListViews.Add(MyListViewModel.CreateViewModel(myTest));
         }
      }
   }

Answer 1

將IsChecked屬性添加到ListItem類，然后將其綁定到listitem_recyclerviewexample內部的復選框，如下所示： local:MvxBind="Checked IsChecked"

如果您的班級看起來像這樣，您應該能夠找出已選中和未選中的項目。

class ListItem
{
    public int Id { get; set; }
    public string Text { get; set; }
    private bool _isChecked;

    public bool IsChecked
    {
        get { return _isChecked; }
        set
        {
            _isChecked = value;
        }
    } 
}

Answer 2

據我了解，您希望在ViewModel中選擇一個要刪除的項目后將其刪除的列表？

首先，我將在ViewModel中創建一個列表，在其中存儲要刪除的ListItem。

    private List<ListItem> _listItemsToDelete;
    public List<ListItem> ListItemsToDelete
    {
        get
        {
            return _listItemsToDelete;
        }
        set
        {
            _listItemsToDelete= value;
            RaisePropertyChanged(() => ListItemsToDelete);
        }
    }

還要在ListItem中添加對Viewmodel的引用。 現在，您的項目中已包含ViewModel，您可以將其添加到之前添加的列表中，如果未選中，則將其刪除。 我也可以適當地制作一個ListItemWrapper，它獲得ListItem，IsChecked屬性和ViewModel的實例，而不是將其混入模型中。

class ListItem
{
    public int Id { get; set; }
    public string Text { get; set; }

    private bool _isChecked;
    public bool IsChecked
    {
        get { return _isChecked; }
        set
        {
            _isChecked = value;

            if (IsChecked)
                _parent.ListItemsToDelete.Add(Item);
            else
                _parent.ListItemsToDelete.Remove(Item);

            RaisePropertyChanged(() => IsChecked);
        }
    }

    readonly MyListViewModel _parent;

    public ListItem(MyListViewModel parent)
    {
        _parent = parent;
    }
}

現在，您只需在ViewModel中添加DeleteCommand屬性即可從“ ListItemsToDelete”列表中刪除所有項目。 您可以將此命令綁定到菜單項或FAB。

   private MvxCommand _deleteCommand;
    public IMvxCommand DeleteCommand
    {
        get
        {
            _deleteCommand = _deleteCommand ?? new MvxCommand(() =>
              WebServiceDeleteStuff(ListItemsToDelete); 
              RemoveFromListItemsList(ListItemsToDelete);
              ListItemsToDelete.Clear();
            });

            return _deleteCommand;
        }
    }

不知道這是否完全是“按書”，但我如何解決了這個問題。 希望對您有所幫助：)請記住，您仍然需要執行Giorgi建議的將復選框綁定到IsChecked的操作。