expandable_page_view

套件介紹

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

expandable_page_view 套件透過根據目前可見頁面的內容動態調整其高度，增強了 Flutter 的 PageView。這允許每個頁面具有不同的高度，同時保持整體佈局的流暢與響應式捲動。適用於表單、卡片或動態清單等可變高度內容的應用程式。該套件支援所有主要平台，包括 Android、iOS、Web、macOS、Windows 和 Linux，確保在各種裝置上的行為一致。

適用情境

動態表單頁面
可變高度的卡片佈局
響應式可捲動內容
互動式引導畫面
內容密集型儀表板

主要特色

高度適應目前頁面
頁面之間的平滑過渡
跨平台相容性
與 PageView 的簡單整合
支援嵌套滾動檢視

適合對象

具有可變高度頁面的應用程式
尋求響應式滾動行為的開發者
需要自適應UI佈局的項目
具有動態內容的移動和網路應用
希望獲得靈活滾動體驗的UI設計師

使用建議

可能影響大量內容下的效能
需要仔細處理滾動物理效果
不適合固定高度的頁面設計
超出高度調節之外的自訂功能有限
最好與可預測的頁面內容大小一起使用

原始 README

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

A PageView widget adjusting its height to currently displayed page. It accepts the same parameters as classic PageView.

Horizontal	Vertical

Getting Started

In the pubspec.yaml of your flutter project, add the following dependency:

dependencies:
  ...
  expandable_page_view: ^1.0.17

Import it:

import 'package:expandable_page_view/expandable_page_view.dart';

Usage Examples

Fixed Expandable Page View

In order to create a fixed page view just pass a list of widgets to children parameter:

ExpandablePageView(
  children: [
     ExamplePage(Colors.blue, "1", 100),
     ExamplePage(Colors.green, "2", 200),
     ExamplePage(Colors.red, "3", 300),
  ],
),

Dynamically built Expandable Page View

If You have multiple pages to display, and You want to build them dynamically while scrolling, use .builder constructor and pass itemCount and itemBuilder parameters:

ExpandablePageView.builder(
  itemCount: 3,
  itemBuilder: (context, index) {
    return ExamplePage(Colors.blue, index.toString(), (index + 1) * 100.0);
  },
),

Loop Mode

To create an infinitely scrolling page view, set loop: true:

ExpandablePageView(
  loop: true,
  children: [
    ExamplePage(Colors.blue, "1", 100),
    ExamplePage(Colors.green, "2", 200),
    ExamplePage(Colors.red, "3", 300),
  ],
),

Programmatic Control in Loop Mode

To programmatically navigate pages in loop mode (e.g., for auto-play carousels or custom indicators), use ExpandablePageController:

final controller = ExpandablePageController(itemCount: 3);

ExpandablePageView(
  controller: controller,
  loop: true,
  children: [
    ExamplePage(Colors.blue, "1", 100),
    ExamplePage(Colors.green, "2", 200),
    ExamplePage(Colors.red, "3", 300),
  ],
),

// Navigate programmatically
controller.jumpToPage(2);
controller.animateToPage(0, duration: Duration(milliseconds: 300), curve: Curves.ease);

// Read current page
print(controller.page);     // e.g., 1.5 (fractional during scroll)
print(controller.realPage); // e.g., 1 (rounded)

Note: ExpandablePageController uses shortest-path navigation — animating from page 0 to the last page will scroll backward (1 step) rather than forward through all pages.

Check out example project to play with ExpandablePageView.

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