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',
              ),
            ],
          ),
        ],
      ),
    );
  }
}