Question

我正在使用Xamarin.Forms项目中的Accordion ListView。这意味着您可以单击ListView中的Category Headings，这将扩展或折叠其下的子项。

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

我有两个可观察的集合，用于完成手风琴功能。一个包含每个父项（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;
    }

这是DateTemplate和Image Binding：

        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中看到了图像闪烁。这通常是因为加载图像的延迟。

尝试修复图像的高度和宽度。如果这不起作用，则在更新列表内容时，仅更新所需的图像和文本值，以便不再需要加载所有图像。

如果您真的需要，我可以提供示例代码，因为您只需要一个洞察力。

所以这是你可以做的：使用_expandedGroups绑定Listview.Itemsource，这样每次展开/折叠时都不需要设置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++);   
   }
  }
}

干杯。

Answer 2

面临同样的问题..令人惊讶的是，在我通知控件需要在Device.BeginInvokeOnMainThread内部需要更新的代码之后，闪烁完全消失了。

Xamarin.Forms - 更新ItemSource

2 个答案: