Flutter高效索引堆栈管理插件efficient_indexed_stack的使用

Flutter高效索引堆栈管理插件efficient_indexed_stack的使用

IndexedStack 小部件在 Flutter 中会立即初始化给定的 children。然而，此插件处理初始化过程，使得子部件可以按需懒加载。

简单使用

以下是最小化使用 EfficientIndexedStack 的示例：

EfficientIndexedStack(
  index: index,
  itemCount: itemCount,
  itemBuilder: (_, index) => MyCoolWidget(
    index,
    key: GlobalKey(), // <<-- 重要
  ),
),

初始化多少个子部件？

你可以通过设置 keepAliveDistance 参数来决定哪些索引必须保持活动状态。例如：

EfficientIndexedStack(
  keepAliveDistance: 4,
  index: activeIndex,
  itemCount: itemCount,
  itemBuilder: (_, index) => MyCoolWidget(
    index,
    key: GlobalKey(), // <<-- 重要
  ),
),

哪些索引是活动的？

你可以通过设置 indexCalculationStrategy 参数来决定哪些索引应该保持活动状态。

IndexCalculationStrategy.aroundCurrentIndex

此选项基于 keepAliveDistance 初始化当前索引及其前后索引：

EfficientIndexedStack(
  indexCalculationStrategy: IndexCalculationStrategy.aroundCurrentIndex,
  keepAliveDistance: 3,
  index: 4,
  itemCount: 10,
  itemBuilder: (_, index) => MyCoolWidget(
    index,
    key: GlobalKey(), // <<-- 重要
  ),
),

// 0, (1), (2), (3), [4], (5), (6), (7), 8, 9

IndexCalculationStrategy.beforeCurrentIndex

此选项仅初始化当前索引之前的索引：

EfficientIndexedStack(
  indexCalculationStrategy: IndexCalculationStrategy.beforeCurrentIndex,
  keepAliveDistance: 3,
  index: 4,
  itemCount: 10,
  itemBuilder: (_, index) => MyCoolWidget(
    index,
    key: GlobalKey(), // <<-- 重要
  ),
),

// 0, (1), (2), (3), [4], 5, 7, 8, 9

IndexCalculationStrategy.afterCurrentIndex

此选项仅初始化当前索引之后的索引：

EfficientIndexedStack(
  indexCalculationStrategy: IndexCalculationStrategy.afterCurrentIndex,
  keepAliveDistance: 3,
  index: 4,
  itemCount: 10,
  itemBuilder: (_, index) => MyCoolWidget(
    index,
    key: GlobalKey(), // <<-- 重要
  ),
),

// 0, 1, 2, 3, [4], (5), (7), (8), 9

一旦你更新当前索引，只有新的索引会被初始化，其他索引将被销毁。

完整示例 Demo

以下是完整的示例代码，展示了如何使用 EfficientIndexedStack 插件：

import 'package:example/my_cool_widget.dart';
import 'package:flutter/material.dart';
import 'package:efficient_indexed_stack/efficient_indexed_stack.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatefulWidget {
  const MyApp({super.key});

  [@override](/user/override)
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  int activeIndex = 0;
  final itemCount = 30;

  int get maxIndex => itemCount - 1;

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        appBar: AppBar(
          title: Text('Active index : $activeIndex'),
          actions: [
            IconButton(
              icon: const Icon(Icons.arrow_left_rounded),
              onPressed: () => setState(() {
                activeIndex = (activeIndex - 1).clamp(0, maxIndex);
              }),
            ),
            const SizedBox(width: 24),
            IconButton(
              icon: const Icon(Icons.arrow_right_rounded),
              onPressed: () => setState(() {
                activeIndex = (activeIndex + 1).clamp(0, maxIndex);
              }),
            ),
          ],
        ),
        body: EfficientIndexedStack(
          index: activeIndex,
          itemCount: itemCount,
          keepAliveDistance: 3,
          itemBuilder: (_, index) => MyCoolWidget(
            index,
            key: GlobalKey(),
          ),
        ),
      ),
    );
  }
}

更多关于Flutter高效索引堆栈管理插件efficient_indexed_stack的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter高效索引堆栈管理插件efficient_indexed_stack的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


当然，关于efficient_indexed_stack这个Flutter插件，它是一个用于高效管理索引堆栈（Indexed Stack）的实用工具。在Flutter中，IndexedStack允许你根据索引显示其子组件中的一个，而efficient_indexed_stack则在此基础上提供了性能优化，尤其是在堆栈中包含大量子组件时。

以下是一个使用efficient_indexed_stack的示例代码，展示了如何高效地管理索引堆栈：

首先，确保在你的pubspec.yaml文件中添加efficient_indexed_stack依赖：

dependencies:
  flutter:
    sdk: flutter
  efficient_indexed_stack: ^最新版本号  # 请替换为实际最新版本号

然后运行flutter pub get来安装依赖。

接下来，是一个简单的Flutter应用示例，展示如何使用efficient_indexed_stack：

import 'package:flutter/material.dart';
import 'package:efficient_indexed_stack/efficient_indexed_stack.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Efficient Indexed Stack Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int _selectedIndex = 0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Efficient Indexed Stack Demo'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            SizedBox(
              height: 300,
              child: EfficientIndexedStack(
                index: _selectedIndex,
                children: List.generate(
                  20, // 假设我们有20个子组件
                  (index) => Center(
                    child: Text(
                      'Page $index',
                      style: TextStyle(fontSize: 24),
                    ),
                  ),
                ),
              ),
            ),
            SizedBox(height: 20),
            Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: List.generate(
                20,
                (index) => ElevatedButton(
                  onPressed: () {
                    setState(() {
                      _selectedIndex = index;
                    });
                  },
                  child: Text('Go to Page $index'),
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

在这个示例中：

  1. 我们创建了一个简单的Flutter应用，包含一个EfficientIndexedStack组件。
  2. EfficientIndexedStack的index属性用于指定当前显示的子组件的索引。
  3. children属性接受一个子组件列表，这里我们生成了20个简单的Center组件，每个组件包含一个文本标签。
  4. 在页面底部，我们创建了一行按钮，每个按钮对应一个子组件的索引。点击按钮时，会更新_selectedIndex状态，从而触发EfficientIndexedStack重新渲染对应的子组件。

通过这种方式，efficient_indexed_stack可以帮助你高效地管理大量子组件的堆栈显示，尤其适用于需要频繁切换显示内容的场景。

回到顶部