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

easy_sticky_header 封面
插件详情v1.1.1

easy_sticky_header

一个易于使用且功能强大的粘性标题,适用于任何支持滚动的控件。

AndroidiOSWebmacOSWindowsLinux
近 30 天下载
5630
喜欢数
56
Pub 分数
160

安装插件

flutter pub add easy_sticky_header

插件介绍

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

easy_sticky_header 是一个 Flutter 包,提供了一种简单且灵活的方式来实现可滚动控件中的粘性标题。它会自动在滚动过程中保持标题始终显示在顶部,从而提升具有分组内容的列表或网格的用户体验。该包设计简洁易用,可无缝集成到 ListView、Scrollable 以及其他主要平台上的可滚动组件中。该包支持自定义标题控件和流畅的过渡效果,非常适合需要结构化可滚动数据展示的应用程序。

适合场景

  • 分组列表视图
  • 可滚动仪表板
  • 产品类别列表
  • 动态内容区域
  • 用户资料时间线

主要特点

  • 自动标题粘附
  • 可自定义的标题小部件
  • 平滑过渡动画
  • 跨平台兼容性
  • 所需设置最少
  • 支持嵌套可滚动组件

适合对象

  • 开发可滚动 UI 的开发者
  • 包含分类内容的应用程序
  • 寻求简洁标题行为的设计人员
  • 需要响应式布局的项目
  • 注重开发速度的团队

使用建议

  • 可能会影响非常大的列表的性能
  • 在复杂的嵌套滚动中需要谨慎处理
  • 高级动画的自定义功能有限
  • 未针对高度动态的标题内容进行优化
  • 最适合静态或半静态的标题设计

原始 README

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

easy_sticky_header

platform pub license issues commits

English | 中文

An easy-to-use and powerful sticky header for any widget that supports scrolling.

Features

  • Support widget for horizontal or vertical scrolling
  • Support widget for reverse scrolling
  • Allow dynamic building of header widget and support custom transition animation
  • Header widget can dynamically change stickiness
  • Support jumping to the header widget of the specified index
  • Support header widget grouping
  • Support infinite list

Usage

Add dependency:

dependencies:
  easy_sticky_header: ^1.1.1

Import package:

import 'package:easy_sticky_header/easy_sticky_header.dart';

Example:

class Example extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return StickyHeader(
      child: ListView.builder(
        itemCount: 100,
        itemBuilder: (context, index) {
          // Custom header widget.
          if (index % 3 == 0) {
            return StickyContainerWidget(
              index: index,
              child: Container(
                color: Color.fromRGBO(Random().nextInt(256),
                    Random().nextInt(256), Random().nextInt(256), 1),
                padding: const EdgeInsets.only(left: 16.0),
                alignment: Alignment.centerLeft,
                width: double.infinity,
                height: 50,
                child: Text(
                  'Header #$index',
                  style: const TextStyle(
                    color: Colors.white,
                    fontSize: 16,
                  ),
                ),
              ),
            );
          }
          // Custom item widget.
          return Container(
            width: double.infinity,
            height: 80,
            color: Colors.white,
          );
        },
      ),
    );
  }
}

For more features, please go to the example project to see the details.

Screenshots

screenshot1 screenshot2 screenshot3
screenshot4 screenshot5 screenshot6
screenshot7 screenshot8 screenshot9

Contribution

You are welcome to contribute here 😄!

You can open an issue, if you find a bug, or want a new feature.

You can open up a PR, if you fixed a bug or implemented a new feature.

License

MIT License

Copyright (c) 2022 crasowas

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.

所属分类

源码仓库

使用此插件的项目

暂无相关数据。