Xamarin Forms：如何更改 flowlistview 中所选项目的背景颜色？

Posted 2023-02-21

【中文标题】Xamarin Forms：如何更改 flowlistview 中所选项目的背景颜色？

【英文标题】：Xamarin Forms: How to change the background color of selected item in flowlistview?

【发布时间】：2020-03-26 20:11:45

【问题描述】：

我正在使用flowlistview 在 UI 中显示项目。当点击flowlistview 中的项目时，我需要更改背景颜色或突出显示所选项目。我尝试了flowlistview 的FlowTappedBackgroundColor 和FlowRowBackgroundColor 属性。但它没有按预期工作。我浏览了这个blog，但这仅适用于普通的列表视图。我该如何做这个功能？

【参考方案1】：

查看FlowViewCell的源码，你会发现FlowViewCell的超类不是ViewCell，而是ContentView .所以如果你关注这个博客是不行的。

namespace DLToolkit.Forms.Controls

    //
    // Summary:
    //     FlowListView content view cell.
    [Preserve(AllMembers = true)]
    public class FlowViewCell : ContentView, IFlowViewCell
    
        //
        // Summary:
        //     Initializes a new instance of the DLToolkit.Forms.Controls.FlowViewCell class.
        public FlowViewCell();

        //
        // Summary:
        //     Raised when cell is tapped.
        public virtual void OnTapped();
    

在 FlowListView.FlowColumnTemplate 中的控件背景上创建绑定，在 FlowItemTappedCommand 中进行更改。

后面的代码

public class Model : INotifyPropertyChanged 
 
    public string Title
    
        get;set;
    


    private Color bgColor;
    public Color BGColor
    
        set  
        if(value != null)
            
                bgColor = value;
                NotifyPropertyChanged();
            
        
        get
        
            return bgColor;
        
    

    public event PropertyChangedEventHandler PropertyChanged;
    private void NotifyPropertyChanged([CallerMemberName] String propertyName = "")
    
        PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
    



public class ViewModel

    public ObservableCollection<Model> List  set; get; 

    public ICommand ItemTappedCommand  get; set; 


   public ViewModel()
    
        List = new ObservableCollection<Model>();
        List.Add(new Model()  Title = "1" ,BGColor = Color.White );
        List.Add(new Model()  Title = "2" , BGColor = Color.White );
        List.Add(new Model()  Title = "3", BGColor = Color.White );
        List.Add(new Model()  Title = "4", BGColor = Color.White );

        ItemTappedCommand = new Command((obj)=> 

            //reset the bg color 
            foreach(var model in List)
            
                model.BGColor = Color.White;
            

            Model mo = obj as Model;
            int index = List.IndexOf(mo);           
            mo.BGColor = Color.Red;

        );
    
 

[XamlCompilation(XamlCompilationOptions.Compile)]
public partial class Page1 : ContentPage

    public Page1()
    
        InitializeComponent();

        ViewModel vm = new ViewModel();
        BindingContext = vm;
    

在xml中

<flv:FlowListView FlowColumnCount="3" 
                  SeparatorVisibility="None" HasUnevenRows="false"
                  FlowItemTappedCommand="Binding ItemTappedCommand"
                  FlowItemsSource="Binding List"   >

    <flv:FlowListView.FlowColumnTemplate>
        <DataTemplate> 
            <Label HorizontalOptions="Fill"
                   BackgroundColor="Binding BGColor"
                   VerticalOptions="Fill" 
                   XAlign="Center" 
                   YAlign="Center" 
                   Text="Binding Title"/>
        </DataTemplate>
    </flv:FlowListView.FlowColumnTemplate>

</flv:FlowListView>

此外，CollectionView 在 XF 4.3 之后可用。您可以使用它来代替第三方库。检查https://docs.microsoft.com/en-us/xamarin/xamarin-forms/user-interface/collectionview/introduction。

【讨论】：

如果我选择多个项目，所有项目都有红色背景色。我只需要最后一个选定项目的背景颜色。

请更新我线程上的collectionview 答案，它现在在ios 中运行良好。 ***.com/questions/59103182/…

问题的原因是什么？

对于当前线程：添加了所有代码，但在错误列表中出现2个错误。drive.google.com/open?id=1LL1gE-peGeAL2F4iUjDIuBJ0q0PlnME8

确保所有版本的 nuget 包和 XF 都是最新的。