搜尋套件、儲存庫與 APP 分類

套件詳情v6.2.1

extended_nested_scroll_view

擴展嵌套滾動視圖以修復固定標題和內部可滾動組件的同步問題。

AndroidiOSWebmacOSWindowsLinux
近 30 天下載
4.4萬
喜歡數
315
Pub 分數
140

安裝套件

flutter pub add extended_nested_scroll_view

套件介紹

根據套件公開資料產生的選型評估,僅供參考。

一個 Flutter 套件,擴展內建的 NestedScrollView,以解決固定標題和同步內部滾動視圖的常見問題。它確保在使用嵌套滾動視圖時具有順暢的滾動行為,特別是當標題保持固定而內部內容滾動時。非常適合具有多個可滾動區段的複雜 UI,例如可摺疊標題。該套件由 fluttercandies.com 維護,並支援所有主要平台,包括行動裝置、Web 和桌面。

適用情境

  • 帶有固定標題的複雜佈局
  • 嵌套滾動視圖中的同步滾動
  • 可摺疊標題設計
  • 多部分可滾動介面
  • 自定滾動協調
  • 具有動態內容的響應式 UI

主要特色

  • 修復固定標題同步問題
  • 支援所有 Flutter 平台
  • 增強的滾動協調
  • 與現有 NestedScrollView 的輕鬆整合
  • 嵌套捲動的優化效能
  • 擴展原生 NestedScrollView 功能

適合對象

  • 開發高級可滾動 UI 的開發者
  • 可摺疊或固定標題的應用程式
  • 需要可靠嵌套滾動行為的團隊
  • 跨多個平台的UI密集型應用程式
  • 尋求穩定滾動同步的Flutter開發者

使用建議

  • 需要理解 NestedScrollView 的機制
  • 可能會為簡單的滾動情況增加輕微開銷
  • 最適合複雜的滾動層次結構
  • 基本可滾動佈局不需要
  • 超出滾動同步之外的自訂功能有限

原始 README

以下為關聯原始碼儲存庫的 README 原文快照,最新內容請造訪原始碼儲存庫。

extended_nested_scroll_view

pub package GitHub stars GitHub forks GitHub license GitHub issues FlutterCandies QQ 群

Language: English | 中文简体

NestedScrollView: extended nested scroll view to fix following issues.

1.pinned sliver header issue

2.inner scrollables in tabview sync issue

3.do without ScrollController in NestedScrollView's body

Web demo for ExtendedNestedScrollView

Example for issue 1

give total height of pinned sliver headers in pinnedHeaderSliverHeightBuilder callback

 var tabBarHeight = primaryTabBar.preferredSize.height;
      var pinnedHeaderHeight =
          //statusBar height
          statusBarHeight +
              //pinned SliverAppBar height in header
              kToolbarHeight;

    ExtendedNestedScrollView(
        pinnedHeaderSliverHeightBuilder: () {
          return pinnedHeaderHeight;
        }
       )   ,
       

Example for issue 2

We usually keep list scroll position with following:

scene onlyOneScrollInBody description
AutomaticKeepAliveClientMixin true ScrollPosition will not be disposed, set onlyOneScrollInBody to true so that we can know which list is isActived.
PageStorageKey false ScrollPosition will be disposed, PageStorageKey just record the position info,the scroll positions in ExtendedNestedScrollView will always single one.
    ExtendedNestedScrollView(
       onlyOneScrollInBody: true,
    )

ExtendedVisibilityDetector

Provide ExtendedVisibilityDetector to point out which list is visible

   ExtendedVisibilityDetector(
      uniqueKey: const Key('Tab1'),
      child: ListView(),
   )

Do without ScrollController in NestedScrollView's body

  • due to we can't set ScrollController for list in NestedScrollView's body(it will breaking behaviours of InnerScrollController in NestedScrollView),provide Demos

  • pull to refresh

  • load more

  • scroll to top

    show how to do it without ScrollController

  • pinned header height

    show how to change pinned header height dynamically.

所屬分類

依賴

依賴清單 1 項

原始碼儲存庫

使用此套件的專案