c# - Xamarin.Forms - 更新 ItemSource 时 ViewCell 内的图像闪烁

Question

我正在 Xamarin.Forms 项目中处理 Accordion ListView。这意味着您可以单击 ListView 中的类别标题，这将展开或折叠其下方的子项。

每个类别标题中有两个图像和一个标题，所以我使用的是 ViewCell。问题是，当点击类别并显示子项时，类别标题 ViewCell 上的图像会闪烁。

我有两个可观察的集合，我正在使用它们来完成 Accordion 功能。一个包含每个父项 (MenuItemGroup) 和子项 (MenuItem)，一个只包含应显示的 MenuItem。每次点击标题时，都会触发一个事件，该事件获取类别的选定索引并切换其 Expanded 属性(显示或隐藏其子项)。然后调用UpdateListContent()方法刷新ListView ItemSource:

    private ObservableCollection<MenuItemGroup> _allGroups;
    private ObservableCollection<MenuItemGroup> _expandedGroups;

    private void OnHeaderTapped(object sender, EventArgs e)
    {
        var selectedIndex = _expandedGroups.IndexOf(
            ((MenuItemGroup)((StackLayout)sender).Parent.BindingContext));

        _allGroups[selectedIndex].Expanded = !_allGroups[selectedIndex].Expanded;

        UpdateListContent();
    }

    private void UpdateListContent()
    {
        _expandedGroups = new ObservableCollection<MenuItemGroup>();

        foreach (var group in _allGroups)
        {
            var newGroup = new MenuItemGroup(group.Title, group.CategoryIcon, group.Expanded);

            if (group.Count == 0)
            {
                newGroup.Expanded = null;
            }

            if (group.Expanded == true)
            {
                foreach (var menuItem in group)
                {
                    newGroup.Add(menuItem);
                }
            }
            _expandedGroups.Add(newGroup);
        }

        _menuItemListView.ItemsSource = _expandedGroups;
    }

这是日期模板和图像绑定(bind):

        var menuItemGroupTemplate = new DataTemplate(() =>
        {
            var groupImage = new Image();
            groupImage.SetBinding<MenuItemGroup>(Image.SourceProperty, i => i.CategoryIcon);

            var titleLabel = new Label
            {
                TextColor = Color.White,
                VerticalTextAlignment = TextAlignment.Center,
                VerticalOptions = LayoutOptions.Center,
                FontSize = Device.GetNamedSize(NamedSize.Medium, typeof(Label))
            };
            titleLabel.SetBinding<MenuItemGroup>(Label.TextProperty, t => t.Title);

            var stateIconImage = new Image
            {
                HorizontalOptions = LayoutOptions.EndAndExpand
            };
            stateIconImage.SetBinding<MenuItemGroup>(Image.SourceProperty, i => i.IconState);

            var menuItemGroupStackLayout = new StackLayout
            {
                BackgroundColor = Color.FromHex("40474d"),
                HorizontalOptions = LayoutOptions.FillAndExpand,
                VerticalOptions = LayoutOptions.FillAndExpand,
                Orientation = StackOrientation.Horizontal,
                Padding = new Thickness(10 ,0, 20, 0),
                Children = { groupImage, titleLabel, stateIconImage }
            };

            var tapGestureRecognizer = new TapGestureRecognizer();

            tapGestureRecognizer.Tapped += OnHeaderTapped;
            tapGestureRecognizer.CommandParameter = menuItemGroupStackLayout.BindingContext;
            menuItemGroupStackLayout.GestureRecognizers.Add(tapGestureRecognizer);

            var menuItemGroupViewCell = new ViewCell
            {
                View = menuItemGroupStackLayout,
                Height = 63.0
            };

            return menuItemGroupViewCell;
        });

        _menuItemListView = new ListView
        {
            RowHeight = 55,
            IsGroupingEnabled = true,
            ItemTemplate = menuItemTemplate,
            GroupHeaderTemplate = menuItemGroupTemplate,
            SeparatorColor = Color.FromHex("40474d"),
            HasUnevenRows = true
        };

当 ListView ItemSource 更新时，groupIcon 和 stateIcon 图像都会闪烁。谁能提供有关如何解决此问题的任何见解？谢谢!

如果您认为有帮助，我可以发布 MenuItemGroup 和 MenuItem 类。

Answer 1

当我尝试用图像更新我的 ListView 时，我遇到了类似的问题。我在 Android 中看到图像闪烁。这通常是因为加载图像延迟。

尝试固定图片的高度和宽度。如果这不起作用，则在更新列表内容时，仅更新所需的图像和文本值，这样就无需再次加载所有图像。

如果您确实需要，我可以提供示例代码，因为您只需要了解一下。

因此，您可以执行以下操作:将您的 Listview.Itemsource 与 _expandedGroups 绑定(bind)，这样您就无需在每次展开/折叠时都设置 ItemsSource 属性。这会刷新您的列表，从而刷新您的图片。

private ObservableCollection<MenuItemGroup> _expandedGroups;
public ObservableCollection<MenuItemGroup> ExpandedGroups
{
 get
 {
  return _expandedGroups;
 }
 set
 {
  if(value!=null) _expandedGroups = value;
  OnPropertyChanged("ExpandedGroups");
 }
}

在您的更新方法中:- 传递您的 allListSelection

UpdateListContent(_allGroups[SelectedIndex], SelectedIndex);
private void UpdateListContent(MenuItemGroup group, int index)
{
 if(group.Expanded)
 {
  foreach (var menuItem in group)
   {
     ExpandedGroup.Insert(index++, menuItem);
   }
 }
 else
 {
  foreach (var menuItem in group)
   {
     ExpandedGroup.Remove(menuItem); //Can also use ExpandedGroup.RemoveAt(index++);   
   }
  }
}

干杯。