flutter_lazy_indexed_stack

套件介紹

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

一個擴展內建 IndexedStack 的 Flutter 套件，支援其子項的延遲載入。它確保僅當前可見的 widget 會被建立與呈現，進而提升大型堆疊中包含耗時 widget 時的效能。適用於記憶體效率與即時渲染至關重要的情境。此套件維持與 IndexedStack 相同的 API，但新增延遲初始化功能，讓整合至既有專案變得無縫順暢。

適用情境

大型標籤頁介面
記憶體效率導航
動態內容切換
按需元件渲染
複雜的 UI 與重型組件

主要特色

堆疊子項的延遲加載
與 IndexedStack 相同的 API
性能提升
減少記憶體使用
無縫整合

適合對象

開發者優化UI效能
具有許多標籤頁或螢幕的應用程式
使用 IndexedStack 和重型組件的項目
分頁密集型應用
高度互動式儀表板

使用建議

不適合立即的子渲染需求
僅限基於堆疊的佈局
可能需要小心的狀態管理
最佳搭配穩定的索引值使用
預設不支援動畫過渡

原始 README

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

Lazy Indexed Stack 😴🥞

A Flutter package that exposes an IndexedStack that can be lazily loaded.

IndexedStack is a widget that shows its children one at a time, preserving the state of all the children. But it renders all the children at once.

With LazyIndexedStack, you can load the children lazily, and only when they are needed. This comes in handy if you have a lot of children, and you don't want to load them all at once or if you have a child that loads content asynchronously.

Usage

The LazyIndexedStack API is the same as IndexedStack. A basic implementation requires two parameters:

A List<Widget> of children that are going to be lazy loaded under the hood.
An int index that indicates which child is going to be shown.

Example

class HomePage extends StatefulWidget {
  const HomePage({super.key, required this.title});

  final String title;

  @override
  State<HomePage> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  int index = 0;

  void changeIndex(int newIndex) => setState(() => index = newIndex);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Column(
        children: [
          Expanded(
            child: LazyIndexedStack(
              index: index,
              children: List.generate(3, (i) => Text('$i')),
            ),
          ),
          BottomNavigationBar(
            currentIndex: index,
            onTap: changeIndex,
            items: const [
              BottomNavigationBarItem(
                icon: Icon(Icons.filter_1),
                label: '1',
              ),
              BottomNavigationBarItem(
                icon: Icon(Icons.filter_2),
                label: '2',
              ),
              BottomNavigationBarItem(
                icon: Icon(Icons.filter_3),
                label: '3',
              ),
            ],
          ),
        ],
      ),
    );
  }
}