Xamarin Forms：Flowlistview 项目点击问题

Question

我正在我的 xamarin 表单应用程序中实现一个游戏，一个名称匹配游戏。它有两个列表：一个用于显示图像，另一个用于显示名称。播放器点击顶部列表中的图像，然后点击底部列表中的名称（或先名称后图像）。如果他们匹配，玩家将获得积分，点击的图像和名称将从列表中删除。

我使用flowlistview 显示图像列表和名称列表，因为我需要连续显示多个项目。点击图像和名称时，我已完成匹配，如果匹配，则删除图像和名称。但是我需要在点击和禁用其他项目的选择时突出显示所选图像或所选名称。我已经使用这个thread 完成了突出显示功能，但它不能完美地工作。有时会突出显示多个图像，有时在下面列表的顶部名称中选择图像时会自动突出显示。

我创建了一个示例项目并上传了here。请帮我完成这个游戏。我们的网站上有这款游戏，https://www.catholicbrain.com/edu-namematch/39524/1/the-two-great-commandments，请查看它以了解游戏的运行情况。我将通过 DM 为您提供登录详细信息。

编辑 1

@LucasZhang-MSFT 我接受这一点，但目前的问题不同。它有 2 个不同的 flowlistviews。顶部是图像列表，底部是名称列表。这是一款简单的儿童游戏，玩家点击顶部列表中的图像，然后点击底部列表中的名称（或先名称后图像）。如果他们匹配，玩家将获得积分，点击的图像和名称将从列表中删除。当不匹配时，我会重置项目背景颜色，如下所示：

foreach (var item1 in ImageItems)
{
    item.BGColor = Color.White;
}

foreach (var item2 in NameItems)
{
    item.BGColor = Color.White;
}
OnPropertyChanged("NameMatchImagItems");
OnPropertyChanged("NameMatchNameItems");

在此之后，多个图像突出显示，有时在下面列表上选择顶部名称上的图像时会自动突出显示。 如果你有时间，你能下载样本看看吗？我尽力了，但没有运气。

Answer 1

原因：

您将两个flowlistview的ItemsSource设置为相同的来源_allItems！！

解决方案：

在xml中

<ContentPage.Content>
    <StackLayout Orientation="Vertical">

        <!--imageflowlistview-->
        <flv:FlowListView 
            x:Name="NameMatchImageList"
            FlowItemTappedCommand="{Binding ImageItemTappedCommand}"
            FlowItemsSource="{Binding ImageItems}"
            FlowColumnCount="2"
            FlowLastTappedItem="{Binding LastImageTappedItem}"
            HasUnevenRows="True">
            <flv:FlowListView.FlowColumnTemplate>
                <DataTemplate>
                        <StackLayout BackgroundColor="{Binding BGColor}"  Orientation="Vertical">
                            <Frame 
                                Padding="5"
                                Margin="5"
                                HasShadow="False"
                                BorderColor="#a4e6f9"
                                CornerRadius="15">

                            <ffimageloading:CachedImage 
                                    Source="{Binding imageUrl, Converter={StaticResource urlJoinConverter}}"
                                    HorizontalOptions="FillAndExpand"
                                    VerticalOptions="FillAndExpand"
                                    HeightRequest="100"
                                    Aspect="AspectFill"/>
                            </Frame>
                        </StackLayout>
                </DataTemplate>
            </flv:FlowListView.FlowColumnTemplate>
        </flv:FlowListView>

        <!--NamesFlowlistview-->
        <flv:FlowListView 
                x:Name="NameMatchNameList"
                FlowItemTappedCommand="{Binding NameItemTappedCommand}"
                FlowItemsSource="{Binding NameItems}"
                FlowColumnCount="2"
                FlowLastTappedItem="{Binding LastNameTappedItem}"
                HasUnevenRows="True">
            <flv:FlowListView.FlowColumnTemplate>
                <DataTemplate>
                    <StackLayout Orientation="Vertical">
                        <Label 
                            TextColor="Black"
                            FontSize="Large"
                            BackgroundColor="{Binding BGColor}"
                            HorizontalTextAlignment="Center"
                            VerticalTextAlignment="Center"
                            Text="{Binding name}"/>
                    </StackLayout>
                </DataTemplate>
            </flv:FlowListView.FlowColumnTemplate>
        </flv:FlowListView>
    </StackLayout>
</ContentPage.Content>

在后面的代码中

namespace FlowListView_Tap
{
    class NameMatchViewModel : INotifyPropertyChanged
    {
        public event PropertyChangedEventHandler PropertyChanged;

        public ObservableCollection<NameMatchList> imageItems;
        public ObservableCollection<NameMatchList> ImageItems { get
            {
                return imageItems;
            }
            set {
               if(value!=null)
                {
                    imageItems = value;
                    OnPropertyChanged("ImageItems");
                }
            }
        }
        public ObservableCollection<NameMatchList> nameItems;
        public ObservableCollection<NameMatchList> NameItems
        {
            get
            {
                return nameItems;
            }
            set
            {
                if (value != null)
                {
                    nameItems = value;
                    OnPropertyChanged("NameItems");
                }
            }
        }



        public bool isImageSelected = false;
        public bool isNameSelected = false;
        public ICommand NameItemTappedCommand { get; set; }
        public ICommand ImageItemTappedCommand { get; set; }


        private NameMatchList lastImageTappedItem;
        public NameMatchList LastImageTappedItem
        {
            get
            {
                return lastImageTappedItem;
            }

            set
            {
                if(value!=null)
                {
                    lastImageTappedItem = value;
                    OnPropertyChanged("LastImageTappedItem");
                }
            }
        }


        private NameMatchList lastNameTappedItem;
        public NameMatchList LastNameTappedItem
        {
            get
            {
                return lastNameTappedItem;
            }

            set
            {
                if (value != null)
                {
                    lastNameTappedItem = value;
                    OnPropertyChanged("LastNameTappedItem");
                }
            }
        }

        public NameMatchViewModel()
        {
            ImageItemTappedCommand = new Command((obj) => {
                try
                {
                    //reset the bg color 
                    foreach (var item in ImageItems)
                    {
                        item.BGColor = Color.White;
                    }
                    NameMatchList imageList = obj as NameMatchList;
                    int index = ImageItems.IndexOf(imageList);
                    imageList.BGColor = Color.Red;
                    ///ImageItems.RemoveAt(index);
                    //ImageItems.Insert(index, imageList);

                    //Storing name and imageurl to local db
                    Application.Current.Properties["NameMatchImageList_Image"] = imageList.imageUrl;
                    Application.Current.Properties["NameMatchImageList_Name"] = imageList.name;
                    Application.Current.Properties["ImageItem"] = imageList;
                    isImageSelected = true;

                    if (isImageSelected && isNameSelected)
                    {
                        //If both image and name selected by player startes checking the matching
                        StartNameMatchCheck(imageList);
                    }
                }
                catch (Exception imagetapEx)
                {
                    Debug.WriteLine("imagetapEx:>>" + imagetapEx);
                }
            });

            NameItemTappedCommand = new Command((obj) => {
                try
                {
                    //reset the bg color 
                    foreach (var item in NameItems)
                    {
                        item.BGColor = Color.White;
                    }
                    NameMatchList nameList = obj as NameMatchList;
                    int index = NameItems.IndexOf(nameList);
                    nameList.BGColor = Color.Red;
                    //NameItems.RemoveAt(index);
                    //NameItems.Insert(index, nameList);

                    //Storing name and imageurl to local db
                    Application.Current.Properties["NameMatchNameList_Image"] = nameList.imageUrl;
                    Application.Current.Properties["NameMatchNameList_Name"] = nameList.name;
                    Application.Current.Properties["NameItem"] = nameList;
                    isNameSelected = true;

                    if (isImageSelected && isNameSelected)
                    {
                        //If both image and name selected by player startes checking the matching
                        StartNameMatchCheck(nameList);
                    }
                }
                catch (Exception nametapEx)
                {
                    Debug.WriteLine("nametapEx:>>" + nametapEx);
                }
            });
        }

        public async void StartNameMatchCheck(NameMatchList item)
        {
            isImageSelected = false;
            isNameSelected = false;

            //Fetching data from local db
            string NameMatchImageListImage = Application.Current.Properties["NameMatchImageList_Image"].ToString();
            string NameMatchImageListName = Application.Current.Properties["NameMatchImageList_Name"].ToString();

            string NameMatchNameListImage = Application.Current.Properties["NameMatchNameList_Image"].ToString();
            string NameMatchNameListName = Application.Current.Properties["NameMatchNameList_Name"].ToString();

            //Match check
            if ((NameMatchImageListImage == NameMatchNameListImage) && (NameMatchImageListName == NameMatchNameListName))
            {
                await Application.Current.MainPage.DisplayAlert("Alert", "Success", "Ok");
                //Removing the items from list if they match



                ImageItems.Remove(LastImageTappedItem);
                NameItems.Remove(LastNameTappedItem);
                
                LastImageTappedItem = null;
                LastNameTappedItem = null;
            }
            else
            {
                await Application.Current.MainPage.DisplayAlert("Alert", "Failed", "Ok");
                //resetting the colors
                LastImageTappedItem.BGColor = Color.White;
                LastNameTappedItem.BGColor = Color.White;


            }
        }

        public async void CallNameMatch()
        {
            try
            {
                //HttpClient client = new HttpClient();
                //var nameMatchResponse = await client.GetAsync("");
                //if (nameMatchResponse.IsSuccessStatusCode)
                //{
                //    var Response = await nameMatchResponse.Content.ReadAsStringAsync();
                //    var imageResponse = JsonConvert.DeserializeObject<Games>(Response.ToString());
                //    var namematch = JsonConvert.DeserializeObject<Games>(Response.ToString());
                ImageItems = new ObservableCollection<NameMatchList>();
                ImageItems.Add(new NameMatchList() { name = "Comfort the Sorrowing", imageUrl = "/cbrain-app/files/doc-lib/2018/02/22/11/46/06/971/head/Comfort the Sorrowing.png" });
                ImageItems.Add(new NameMatchList() { name = "Giving Food To The Hungry", imageUrl = "/cbrain-app/files/doc-lib/2018/02/22/11/46/23/784/head/Giving Food To The Hungry.png" });
                ImageItems.Add(new NameMatchList() { name = "Pray for the Living and The Dead", imageUrl = "/cbrain-app/files/doc-lib/2018/02/22/11/46/39/707/head/Pray for the Living and The Dead.png" });
                ImageItems.Add(new NameMatchList() { name = "To bury the Dead", imageUrl = "/cbrain-app/files/doc-lib/2018/02/22/11/46/54/828/head/To bury the Dead.png" });
                
                //shuffling image list
                //Random r1 = new Random();
                //int randomIndex1 = 0;
                //while (ImageItems.Count > 0)
                //{
                //    randomIndex1 = r1.Next(0, ImageItems.Count);
                //    ImageItems[randomIndex1].BGColor = Color.White;
                //    ImageItems.Add(ImageItems[randomIndex1]);
                //    ImageItems.RemoveAt(randomIndex1);
                //}
                //NameMatchImagItems = new ObservableCollection<NameMatchList>(ImageItems);
                NameItems = new ObservableCollection<NameMatchList>();
                NameItems.Add(new NameMatchList() { name = "To bury the Dead", imageUrl = "/cbrain-app/files/doc-lib/2018/02/22/11/46/54/828/head/To bury the Dead.png" });
                NameItems.Add(new NameMatchList() { name = "Pray for the Living and The Dead", imageUrl = "/cbrain-app/files/doc-lib/2018/02/22/11/46/39/707/head/Pray for the Living and The Dead.png" });
                NameItems.Add(new NameMatchList() { name = "Comfort the Sorrowing", imageUrl = "/cbrain-app/files/doc-lib/2018/02/22/11/46/06/971/head/Comfort the Sorrowing.png" });
                NameItems.Add(new NameMatchList() { name = "Giving Food To The Hungry", imageUrl = "/cbrain-app/files/doc-lib/2018/02/22/11/46/23/784/head/Giving Food To The Hungry.png" });

                //shuffling name list
                //Random r2 = new Random();
                //int randomIndex2 = 0;
                //while (NameItems.Count > 0)
                //{
                //    randomIndex2 = r2.Next(0, NameItems.Count);
                //    NameItems[randomIndex2].BGColor = Color.White;
                //    NameItems.Add(NameItems[randomIndex2]);
                //    NameItems.RemoveAt(randomIndex2);
                //}
               // NameMatchNameItems = new ObservableCollection<NameMatchList>(NameItems);
                //}
            }
            catch (Exception ex)
            {
                System.Diagnostics.Debug.WriteLine("NMException:>" + ex);
            }
        }

        

        
        protected void OnPropertyChanged(string propertyName)
        {
            PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
        }

        public void ShowAlert(string message)
        {
            Device.BeginInvokeOnMainThread(async () => {
                await Application.Current.MainPage.DisplayAlert("Alert", message, "Ok");
            });
        }
    }
}