首页 > 解决方案 > 如何在listview xamarin表单中实现复选框

问题描述

我正在尝试在列表视图中实现复选框并从所选行中检索数据。我尝试在线搜索,但我没有找到任何合适的资源,并且一些插件已经不再工作了。任何人的任何参考和方法都会非常友好。

标签: xamarin.forms

解决方案


您可以使用 MVVM 来实现它。这里正在运行 GIF。

在此处输入图像描述

首先,您可以创建一个模型。添加您需要的绑定属性。

  public class MyModel:BaseViewModel
    {
        public bool IsChecked { get; set; }
        public string Title { get; set; }
    }
    public class BaseViewModel : INotifyPropertyChanged
    {
        public event PropertyChangedEventHandler PropertyChanged;
        protected virtual void OnPropertyChanged(string propertyName)
        {
            var changed = PropertyChanged;
            if (changed != null)
            {
                PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
            }
        }
    }

然后创建一个 Viewmodel 来弹出数据。

    public class MyViewModel
    {
        public ObservableCollection<MyModel> myModels { get; set; }
        public MyViewModel()
        {
            myModels =new  ObservableCollection<MyModel>();
            myModels.Add(new MyModel() { IsChecked = false, Title = "test1" });
            myModels.Add(new MyModel() { IsChecked = false, Title = "test2" });
            myModels.Add(new MyModel() { IsChecked = false, Title = "test3" });
            myModels.Add(new MyModel() { IsChecked = false, Title = "test4" });
            myModels.Add(new MyModel() { IsChecked = false, Title = "test5" });
        }
    }

然后创建一个布局来显示数据。

       <ListView  x:Name="listView" ItemsSource="{Binding myModels}"  ItemSelected="listView_ItemSelected">
            <ListView.ItemTemplate>
                <DataTemplate>
                    <ViewCell>
                        <StackLayout BackgroundColor="#eee"
                        Orientation="Vertical">
                            <StackLayout Orientation="Horizontal">
                                <CheckBox IsChecked="{Binding IsChecked}"></CheckBox>
                                <Label Text="{Binding Title}" TextColor="#f35e20" />

                            </StackLayout>
                        </StackLayout>
                    </ViewCell>
                </DataTemplate>
            </ListView.ItemTemplate>
        </ListView>

这是布局的背景代码,然后从选定的行中检索数据并创建一个 bindingContext。

   public partial class MainPage : ContentPage
    {
        public MainPage()
        {
            InitializeComponent();
            this.BindingContext = new MyViewModel();
        }

        private void listView_ItemSelected(object sender, SelectedItemChangedEventArgs e)
        {
            var myModel=e.SelectedItem as MyModel;
            DisplayAlert("title",myModel.Title+" "+myModel.IsChecked,"OK");
        }
    }

推荐阅读