Xamarin Forms会议议程列表粘性头部功能实现控件选型咨询

当然可以实现你要的效果，这种滚动时固定当前时段标题的特性叫粘性分组头部，在Xamarin Forms（VS2022环境）里有几种适合新手的实现方式：

1. 推荐使用CollectionView（原生支持，配置简单） #

CollectionView是Xamarin Forms官方推荐的新一代列表控件，默认支持粘性分组头部，无需额外写原生渲染器，对新手友好：

步骤： #

• 准备分组数据模型：
  创建包含时段标题和对应会议列表的分组类，以及会议项模型：

  // 会议项模型
  public class MeetingItem
  {
      public string Title { get; set; }
      public string Description { get; set; }
      // 其他会议相关字段
  }
  
  // 时段分组模型
  public class SessionGroup : List<MeetingItem>
  {
      public string SessionTime { get; set; } // 顶部固定的时段时间
  
      public SessionGroup(string time, List<MeetingItem> meetings) : base(meetings)
      {
          SessionTime = time;
      }
  }
  

• 绑定数据源：
  在ViewModel中创建分组数据集合并填充数据，绑定给CollectionView：

  public ObservableCollection<SessionGroup> SessionGroups { get; set; }
  
  // 初始化数据示例
  public YourViewModel()
  {
      SessionGroups = new ObservableCollection<SessionGroup>();
      // 添加上午时段会议
      var morningMeetings = new List<MeetingItem>
      {
          new MeetingItem { Title = "开场致辞", Description = "主办方介绍会议主题" },
          new MeetingItem { Title = "技术分享1", Description = "Xamarin Forms最新特性" }
      };
      SessionGroups.Add(new SessionGroup("09:00-12:00", morningMeetings));
  
      // 添加下午时段会议
      var afternoonMeetings = new List<MeetingItem>
      {
          new MeetingItem { Title = "实战 workshop", Description = "移动端开发实操" },
          new MeetingItem { Title = "圆桌讨论", Description = "行业趋势交流" }
      };
      SessionGroups.Add(new SessionGroup("13:30-17:00", afternoonMeetings));
  }
  

• XAML布局配置：
  设置CollectionView开启分组，指定分组头部模板和会议项模板：

  <CollectionView 
      ItemsSource="{Binding SessionGroups}" 
      IsGrouped="True">
      <!-- 时段头部模板（滚动时会固定在顶部） -->
      <CollectionView.GroupHeaderTemplate>
          <DataTemplate>
              <Label 
                  Text="{Binding SessionTime}" 
                  BackgroundColor="#f5f5f5"
                  Padding="12,8" 
                  FontSize="Medium" 
                  FontAttributes="Bold"/>
          </DataTemplate>
      </CollectionView.GroupHeaderTemplate>
      <!-- 会议项模板 -->
      <CollectionView.ItemTemplate>
          <DataTemplate>
              <StackLayout Padding="15,12">
                  <Label Text="{Binding Title}" FontSize="Large"/>
                  <Label Text="{Binding Description}" FontSize="Small" TextColor="#666666" Margin="0,4,0,0"/>
              </StackLayout>
          </DataTemplate>
      </CollectionView.ItemTemplate>
  </CollectionView>
  

  完成后运行，滚动列表时，当前时段的标题会自动固定在顶部，直到该时段所有会议项滚出视野，下一时段的标题会替换上去。

2. 使用ListView（兼容旧版本） #

如果项目需要兼容Xamarin Forms旧版本，也可以用ListView实现，原生平台默认支持粘性分组头部：

关键配置： #

• 同样使用上述的SessionGroup和MeetingItem模型，绑定ObservableCollection<SessionGroup>作为ListView的ItemsSource。

• XAML配置：

  <ListView 
      ItemsSource="{Binding SessionGroups}" 
      IsGroupingEnabled="True"
      GroupDisplayBinding="{Binding SessionTime}">
      <!-- 分组头部模板 -->
      <ListView.GroupHeaderTemplate>
          <DataTemplate>
              <ViewCell>
                  <Label 
                      Text="{Binding SessionTime}" 
                      BackgroundColor="#f5f5f5"
                      Padding="12,8" 
                      FontSize="Medium" 
                      FontAttributes="Bold"/>
              </ViewCell>
          </DataTemplate>
      </ListView.GroupHeaderTemplate>
      <!-- 会议项模板 -->
      <ListView.ItemTemplate>
          <DataTemplate>
              <ViewCell>
                  <StackLayout Padding="15,12">
                      <Label Text="{Binding Title}" FontSize="Large"/>
                      <Label Text="{Binding Description}" FontSize="Small" TextColor="#666666" Margin="0,4,0,0"/>
                  </StackLayout>
              </ViewCell>
          </DataTemplate>
      </ListView.ItemTemplate>
  </ListView>
  

  • Android端：若粘性头部未生效，可添加自定义渲染器开启原生支持：

    [assembly: ExportRenderer(typeof(ListView), typeof(StickyHeaderListViewRenderer))]
    namespace YourApp.Droid.Renderers
    {
        public class StickyHeaderListViewRenderer : ListViewRenderer
        {
            protected override void OnElementChanged(ElementChangedEventArgs<ListView> e)
            {
                base.OnElementChanged(e);
                if (Control != null && Element.IsGroupingEnabled)
                {
                    Control.FastScrollEnabled = true;
                    Control.SetGroupIndicator(null); // 移除默认分组指示器
                }
            }
        }
    }
    

  • iOS端：ListView默认支持粘性分组头部，无需额外配置。

新手注意事项 #

• 确保数据分组逻辑正确，每个SessionGroup对应一个时段的所有会议项。
• 优先选择CollectionView方案，代码更简洁，原生支持更完善。
• 测试时分别在Android和iOS模拟器/真机上验证滚动效果，原生平台的表现会略有差异，但都能实现你要的粘性头部功能。

内容的提问来源于stack exchange，提问作者relayman357