如何在 Xamarin Form 的 Grouped ListView 中创建页脚模板

Posted 2023-03-21

【中文标题】如何在 Xamarin Form 的 Grouped ListView 中创建页脚模板

【英文标题】：How to create a footer template in a Grouped ListView in Xamarin Form

【发布时间】：2019-10-19 04:11:56

【问题描述】：

我正在使用 Xamarin Form 和 C#。因此，我在 Xamarin 项目中有一个列表视图，我启用了 IsGroupingEnabled 属性。项目的项目和标题工作完美，但我无法设置页脚模板。 我需要创建一个列表视图，项目必须由以下内容组成：

标题：用户信息。 项目：子项目列表。 页脚：操作按钮（共享、cmets 等）。

这是我的代码的一部分：

型号：

public class Post

    public long PostID  get; set; 
    public string Name  get; set; 
    public List<OptionDefault> OptionsDefault  get; set; 

public class OptionDefault

    public long OptionTypeID  get; set; 
    public string SubItemName  get; set; 

视图模型

public class PostsViewModel

    public InfiniteScrollCollection<Grouping<Post, OptionDefault>> Items  get; set;  = new InfiniteScrollCollection<Grouping<Post, OptionDefault>>();
    public IPostsService repository;

    public PostsViewModel(INavigation navigation)
    
        repository = new PostsService();

        Items = new InfiniteScrollCollection<Grouping<Post, OptionDefault>>
        
            OnLoadMore = async () => await GetItems()
        ;
        Items.LoadMoreAsync();
    
    async Task<List<Grouping<Post, OptionDefault>>> GetItems()
    
        IsWorking = true;
        List<Grouping<Post, OptionDefault>> items = new List<Grouping<Post, OptionDefault>>();
        try
        
            // load the next page
            var lists = await repository.GetList(Items.Count);
            foreach (var item in lists)
            
                for (int i = 0; i < item.OptionsDefault.Count; i++)
                
                    if ((i + 1) == item.OptionsDefault.Count)
                        item.OptionsDefault[i].LastItem = true;
                
                var group = new Grouping<Post, OptionDefault>(item, item.OptionsDefault);
                items.Add(group);
            
        
        catch (Exception ex)
        
            ErrorHelper.RegisterError(ex);
        
        finally
        
            IsWorking = false;
        
        return items;
    

.xaml:

<ListView ItemsSource="Binding Items"                     
            IsGroupingEnabled="True">
        <ListView.GroupHeaderTemplate>
            <DataTemplate>
                <ViewCell>
                    <StackLayout Margin="5,15,5,0">
                        <Label Text="Binding Key.User.UserName" />
                    </StackLayout>
                </ViewCell>
            </DataTemplate>
        </ListView.GroupHeaderTemplate>
        <ListView.ItemTemplate>
            <DataTemplate>
                <ViewCell>
                    <StackLayout Margin="5,0,5,5">
                        <Label Text="Binding SubItemName" />
                    </StackLayout>
                </ViewCell>
            </DataTemplate>
        </ListView.ItemTemplate>
    </ListView>

我尝试过使用页脚模板，但它不起作用：

<ListView.FooterTemplate>
            <DataTemplate>
                <StackLayout Margin="5,0,5,5">
                    <Label Text="This is my footer" />
                </StackLayout>
            </DataTemplate>
        </ListView.FooterTemplate>

【参考方案1】：

无论是<ListView.Footer>还是<ListView.FooterTemplate>，显示位置都是一样的，都在ListView的底部。 目前，xamarin 表单的 ListView 没有这个属性来让每个项目都有一个页脚。 也许您需要重新考虑应用的需求和 UI 设计。

【参考方案2】：

CollectionView 现在在 Xamarin.Forms 中可用。它同时具有GroupHeaderTemplate 和GroupFooterTemplate。您可以使用它来显示数据组。执行此操作的代码与ListView 相同

【参考方案3】：

不是<ListView.FooterTemplate>，而是<ListView.Footer>

<ListView.Footer>
    <StackLayout Margin="5,0,5,5">
        <Label Text="This is my footer" />
    </StackLayout>
</ListView.Footer>

有关详细信息，请参阅： https://docs.microsoft.com/en-us/xamarin/xamarin-forms/user-interface/listview/customizing-list-appearance#headers-and-footers

【讨论】：

嗨乔普，我需要一个项目的页脚，而不是列表视图。每个项目都必须有一个页脚。

所以您正在寻找类似 @​​987654325@ 但 Xamarin.Forms 没有此属性。如果您的 ListView 中的项目数量有限，您可能需要使用可绑定布局，它可以让您灵活地获得想要实现的目标。