套件詳情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.