插件详情v0.1.2

vertical_scrollable_tabview

一个 Flutter 小部件，用于同步 ScrollView 和自定义标签视图。

AndroidiOSWebmacOSWindowsLinux

pub.dev API 文档源代码

近 30 天下载: 1210
喜欢数: 105
Pub 分数: 150

安装插件

flutter pub add vertical_scrollable_tabview

插件介绍

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

一个 Flutter 小部件，可将垂直 ScrollView 与自定义标签视图同步，确保在滚动和标签导航之间实现流畅的联动。它允许用户通过垂直滑动来浏览内容，同时对应的标签指示器会动态更新。适用于需要基于标签组织内容并支持连续滚动的内容密集型界面。该包支持所有主要平台，包括 Android、iOS、Web、macOS、Windows 和 Linux，使其适用于跨平台应用。

适合场景

内容密集型仪表板
带标签的垂直导航
带标签指示器的滚动列表
移动和网页应用布局
动态标签页同步

主要特点

同步滚动和标签选择
可自定义标签外观
跨平台兼容性
流畅的滚动体验
支持多个平台

适合对象

开发分页垂直界面的开发者
需要同步滚动和标签导航的应用
跨平台 Flutter 项目
具有大量垂直内容的 UI

使用建议

可能需要额外的样式来实现自定义设计
使用超大数据集时的性能影响
仅限垂直滚动
需要仔细处理滚动位置状态
不适用于横向制表布局

原始 README

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

vertical_scrollable_tabview

A Flutter widget which synchronize a ScrollView and a custom tab view.

The main idea is to create a custom tab view synchronizing with inner ScrollView. The scroll activity will trigger custom tab view at the top to follow the index of the inner scroll view widget.

exposes Scrollbar and CustomScrollView parameters to VerticalScrollableTabView

Demo

Installation

Add dependency for package on your pubspec.yaml:

dependencies:
    vertical_scrollable_tabview: <latest>
    scroll_to_index: <latest>

Usage

To use this widget we must first define how our tabs will look like.

VerticalScrollableTabView

you need to implement TabController and AutoScrollController

Import Parameter :point_down:

Parameter	Definition
`autoScrollController`	Scrollbar's controller and CustomScrollView's controller.
`tabController`	Trailing widget for a tab, typically an TabController.
`listItemData`	It must be List< dynamic > Type
`eachItemChild`	A item child that in ListView.Builder, First parameter is an object that you put in listItemData, Second parameter is the index in ListView.Builder
`verticalScrollPosition`	A Item Position
`TabBar`	A TabBar, That required in slivers[SliverAppbar(bottom:TabBar())]

Copy parameters from Scrollbar

Parameter	Definition ( parameter from Scrollbar )
`scrollbarThumbVisibility`	thumbVisibility
`scrollbarTrackVisibility`	trackVisibility
`scrollbarThickness`	thickness
`scrollbarRadius`	radius
`scrollbarNotificationPredicate`	notificationPredicate
`scrollInteractive`	interactive
`scrollbarOrientation`	scrollbarOrientation

Copy parameters from CustomScrollView

Parameter	Definition ( parameter from CustomScrollView )
`scrollDirection`	scrollDirection
`reverse`	reverse
`primary`	primary
`physics`	physics
`scrollBehavior`	scrollBehavior
`shrinkWrap`	shrinkWrap
`center`	center
`anchor`	anchor
`cacheExtent`	cacheExtent
`slivers`	slivers
`semanticChildCount`	semanticChildCount
`dragStartBehavior`	dragStartBehavior
`keyboardDismissBehavior`	keyboardDismissBehavior
`restorationId`	restorationId
`clipBehavior`	clipBehavior

Example

** IMPORTANT** DON'T FORGET IMPLEMENT TabController and AutoScrollController

import 'package:vertical_scrollable_tabview/vertical_scrollable_tabview.dart';
VerticalScrollableTabView(
    autoScrollController: autoScrollController,          <- Required AutoScrollController
    tabController: tabController,                        <- Required TabBarController
    listItemData: data,<- Required List<dynamic>
    verticalScrollPosition: VerticalScrollPosition.begin,
    eachItemChild: (object, index) =>
        CategorySection(category: object as Category),    <- Object and index
    slivers: [                                            <- Required slivers 
      SliverAppBar(                                       <- Required SliverAppBar 
        bottom: TabBar(
          isScrollable: true,
          controller: tabController,
          indicatorPadding: const EdgeInsets.symmetric(horizontal: 16.0),
          indicatorColor: Colors.cyan,
          labelColor: Colors.cyan,
          unselectedLabelColor: Colors.white,
          indicatorWeight: 3.0,
          tabs: data.map((e) {
            return Tab(text: e.title);
          }).toList(),
          onTap: (index) {
            VerticalScrollableTabBarStatus.setIndex(index);  <- Required
          },
        ),
      ),
    ],
  ),

for full example, please see this Demo.