基于MVVMCross的Xamarin.Android自定义ListView Adapter改造咨询

嘿，我来帮你把模拟数据迁移到ViewModel里，完全贴合MVVMCross的开发原则～

首先，ViewModel要继承MvxViewModel，然后定义一个可观察集合来存放列表数据——MVVMCross依赖这种集合实现数据绑定，数据变化时UI会自动更新。

using MvvmCross.ViewModels;
using System.Collections.ObjectModel;

public class YourListViewModel : MvxViewModel
{
    // 定义可观察集合，作为列表的数据源
    private ObservableCollection<YourItemModel> _listItems;
    public ObservableCollection<YourItemModel> ListItems
    {
        get => _listItems;
        set => SetProperty(ref _listItems, value);
    }

    // 初始化方法：在这里加载模拟数据
    public override void Prepare()
    {
        base.Prepare();
        LoadMockData();
    }

    private void LoadMockData()
    {
        // 把你之前的模拟数据搬到这里来
        ListItems = new ObservableCollection<YourItemModel>
        {
            new YourItemModel { Title = "测试项1", Subtitle = "这是第一条模拟数据" },
            new YourItemModel { Title = "测试项2", Subtitle = "这是第二条模拟数据" },
            // 更多模拟数据...
        };
    }
}

// 列表项对应的模型类，根据你的需求定义属性
public class YourItemModel
{
    public string Title { get; set; }
    public string Subtitle { get; set; }
    // 其他你需要的属性（比如图标、ID等）
}

把原生ListView换成MVVMCross提供的MvxListView，并通过绑定语法关联ViewModel里的ListItems集合，同时指定列表项的模板布局。

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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" />

    <!-- 用MvxListView替代原生ListView，实现MVVM绑定 -->
    <MvxListView
        android:id="@+id/main_list"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_below="@id/toolbar"
        <!-- 绑定数据源到ViewModel的ListItems -->
        local:MvxBind="ItemsSource ListItems"
        <!-- 指定列表项的布局文件 -->
        local:MvxItemTemplate="@layout/list_item" />
</RelativeLayout>

把列表项里的控件绑定到YourItemModel的属性上，让每个列表项自动展示对应的数据：

<?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:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical"
    android:padding="16dp">

    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:textSize="18sp"
        <!-- 绑定到ItemModel的Title属性 -->
        local:MvxBind="Text Title" />

    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:textSize="14sp"
        android:textColor="@android:color/darker_gray"
        <!-- 绑定到ItemModel的Subtitle属性 -->
        local:MvxBind="Text Subtitle" />
</LinearLayout>

让你的列表页面（Activity/Fragment）继承MVVMCross的基类，完成页面与ViewModel的绑定：

using MvvmCross.Droid.Support.V7.AppCompat;

[Activity(Label = "列表页面")]
public class YourListActivity : MvxAppCompatActivity<YourListViewModel>
{
    protected override void OnCreate(Bundle savedInstanceState)
    {
        base.OnCreate(savedInstanceState);
        SetContentView(Resource.Layout.your_main_list_layout); // 替换成你的主布局文件名
    }
}

做完这些，你之前放在Activity/Fragment里的模拟数据就完全迁移到ViewModel中了，完美符合MVVMCross的数据与视图分离原则——ViewModel负责提供数据和业务逻辑，View只负责展示和绑定，两者彻底解耦。

内容的提问来源于stack exchange，提问作者NaSt