搜索插件、代码仓与 APP 分类

side_header_list_view 封面
插件详情v0.0.4

side_header_list_view

带有侧边粘性标题的 ListView。灵感来自 Android 联系人应用和日历应用。

近 30 天下载
26
喜欢数
42
Pub 分数
30

安装插件

flutter pub add side_header_list_view

插件介绍

基于插件公开信息、社区数据与项目使用情况整理的选型参考。

一个 Flutter 包,实现带有粘性侧边标题的 ListView,类似于 Android 联系人和日历应用。它允许用户在滚动列表时保持部分标题在侧边可见,从而改善导航和视觉组织。当用户滚动时,标题保持固定,增强了按类别或时间段分组的长列表的可用性。专为需要分类数据显示的应用程序设计,界面简洁直观。

适合场景

  • 按字母分组的联系人列表
  • 带有日期标题的日历视图
  • 分类产品列表
  • 用户资料部分带标签
  • 长篇内容,包含主题标题

主要特点

  • 粘性侧边标题
  • 按字母顺序或自定义标题分组
  • 带有标题对齐的平滑滚动
  • 可自定义的标题样式
  • 大型数据集的高效渲染

适合对象

  • 包含分类数据的应用程序
  • 联系人或通讯录应用
  • 基于时间的数据展示
  • 需要清晰区分区域的 UI
  • 寻求 Android 风格列表设计的开发者

使用建议

  • 仅限垂直列表
  • 标题定位可能需要布局调整
  • 最适合窄到中等屏幕宽度
  • 可能需要额外的样式以支持深色模式
  • 不适合水平滚动场景

原始 README

以下为关联源码仓库的 README 原文快照,最新内容请访问源码仓库。

side_header_list_view

pub package Donate

Listview with sticky headers like the Android contact page

alt text

Usage

  new SideHeaderListView(
    // Set how many items the list has
    itemCount: items.length,
    
    // Set the height of the item widgets. For now this has to be a fixed height
    itemExtend: 150.0,
    
    // Set the header builder, this needs to return the widget for the side header
    headerBuilder: (BuildContext context, int index){
      return new HeaderWidget(items[index].startDate);
    },
    
    // Set the item builder, this is everything in the row without the header
    itemBuilder: (BuildContext context, int index){
      return new ListItem(items[index]);
    },
    
    // HasSameHeader will be used to know whether the header has to be shown for a position 
    hasSameHeader: (int a, int b){
      return items[a].day == items[b].day;
    },
  );

所属分类

依赖

依赖清单 1 项

源码仓库

使用此插件的项目

暂无相关数据。