パッケージ、リポジトリ、アプリカテゴリを検索

パッケージ詳細v6.2.1

extended_nested_scroll_view

固定ヘッダーと内部スクロール可能なコンポーネントの同期問題を修正するために、ネストされたスクロールビューを拡張しました。

AndroidiOSWebmacOSWindowsLinux
30日間ダウンロード
4.4万
いいね数
315
Pub ポイント
140

パッケージをインストール

flutter pub add extended_nested_scroll_view

パッケージ概要

公開情報に基づく選定ガイドです。参考としてご利用ください。

ネストされたスクロールビューでよく発生するピン留めヘッダーと同期された内部スクロール可能な要素の問題を解決するために、組み込みの NestedScrollView を拡張する Flutter パッケージです。特にヘッダーが固定されたまま内部コンテンツがスクロールされる場合に、滑らかなスクロール動作を保証します。複数のスクロール可能セクションを持つ折りたたみ式ヘッダーのような複雑な 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 件

ソースリポジトリ

このパッケージを使用しているプロジェクト