如何在Xamarin Forms中创建带iOS UITableView分组样式的ListView？

我来帮你搞定这个iOS风格的分组样式列表！你之前试了各种渲染器没成功，大概率是没走对原生适配的正确路子，咱们一步步来：

首先得搭建好包含组信息的数据模型，这样才能给列表提供分组数据源：

// 组模型，包含组标题和组内的项集合
public class GroupedItem : List<ItemModel>
{
    public string GroupTitle { get; set; }

    public GroupedItem(string title, List<ItemModel> items) : base(items)
    {
        GroupTitle = title;
    }
}

// 单个列表项的数据模型
public class ItemModel
{
    public string ItemName { get; set; }
    public string ItemDescription { get; set; }
}

在ViewModel或者页面代码里初始化好分组数据：

public ObservableCollection<GroupedItem> GroupedItems { get; set; }

// 初始化示例数据
public void LoadGroupedData()
{
    var firstGroup = new GroupedItem("基础设置", new List<ItemModel>
    {
        new ItemModel { ItemName = "账号管理", ItemDescription = "修改密码、绑定手机号" },
        new ItemModel { ItemName = "通知设置", ItemDescription = "开启/关闭消息提醒" }
    });

    var secondGroup = new GroupedItem("高级功能", new List<ItemModel>
    {
        new ItemModel { ItemName = "数据备份", ItemDescription = "云端备份个人数据" }
    });

    GroupedItems = new ObservableCollection<GroupedItem> { firstGroup, secondGroup };
}

Xamarin.Forms的TableView在iOS上默认就对应UITableView的分组样式，关键是开启分组并绑定数据源：

<TableView Intent="Settings" IsGroupingEnabled="True" ItemsSource="{Binding GroupedItems}">
    <!-- 自定义组头样式 -->
    <TableView.GroupHeaderTemplate>
        <DataTemplate>
            <ViewCell>
                <Label Text="{Binding GroupTitle}" 
                       BackgroundColor="#f5f5f5"
                       Padding="16,10"
                       FontSize="16"
                       FontAttributes="Bold"/>
            </ViewCell>
        </DataTemplate>
    </TableView.GroupHeaderTemplate>
    <!-- 自定义列表项样式 -->
    <TableView.ItemTemplate>
        <DataTemplate>
            <ViewCell>
                <StackLayout Padding="16,12" Orientation="Vertical">
                    <Label Text="{Binding ItemName}" FontSize="15"/>
                    <Label Text="{Binding ItemDescription}" FontSize="12" TextColor="#666666" Margin="0,4,0,0"/>
                </StackLayout>
            </ViewCell>
        </DataTemplate>
    </TableView.ItemTemplate>
</TableView>

如果默认分组样式不能满足你的UI需求，再用自定义渲染器微调原生UITableView的属性，比如修改组头高度、背景色：

[assembly: ExportRenderer(typeof(TableView), typeof(CustomGroupedTableRenderer))]
namespace YourAppName.iOS.Renderers
{
    public class CustomGroupedTableRenderer : TableViewRenderer
    {
        protected override void OnElementChanged(ElementChangedEventArgs<TableView> e)
        {
            base.OnElementChanged(e);

            if (Control != null && e.NewElement != null)
            {
                var nativeTable = Control as UITableView;
                // 确认设置为分组样式（默认就是，但可以显式指定）
                nativeTable.Style = UITableViewStyle.Grouped;
                // 自定义组头高度
                nativeTable.SectionHeaderHeight = 44;
                // 自定义组尾高度（隐藏默认空组尾）
                nativeTable.SectionFooterHeight = 0;
            }
        }
    }
}

其实你之前可能绕了弯路，Xamarin.Forms的TableView本身就原生支持分组，不需要一开始就用复杂的渲染器。先按前三个步骤实现基础效果，有特殊UI需求再用渲染器微调就好。

内容的提问来源于stack exchange，提问作者Vinícius da Cruz Maia