Flutter索引管理插件indexed的使用

Indexed 是一个允许你对 Stack 中的子组件进行排序的插件，类似于 CSS 中的 z-index 功能。你可以通过它来控制不同组件在堆叠中的层次顺序。下面我们将详细介绍如何使用这个插件，并提供完整的示例代码。

在线演示与视频演示

• 在线演示
• 视频演示

开始使用 🚀

使用 Indexed Widget

你可以通过两种方式使用 Indexed 插件：

1. 使用 Indexed Widget

Indexer(
    children: [
        Indexed(IndexedInterface(
          // 当使用 AnimatedPositioned 时建议添加 key
          key: UniqueKey(),
          child: Positioned(
            // ...你的组件内容...
          )
        )),
    ],
);

2. 实现 IndexedInterface

Indexer(
    children: [
        MyExtendsIndexed(),
        MyImplementsIndexed(),
    ],
);

// 继承
class IndexedExtendsDemo extends IndexedInterface {
    int index = 5;
}

// 实现
class IndexedExtendsDemo extends AnimatedWidget implements IndexedInterface {
    int index = 1000;

    IndexedExtendsDemo({Key? key, required Animation<double> animation})
        : super(key: key, listenable: animation);

    @override
    Widget build(BuildContext context) {
        // ...你的组件内容...
    }
}

示例代码

下面是一个完整的示例代码，展示了如何在 Stack 中使用 Indexed 来控制组件的层次顺序：

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Indexed Example')),
        body: Center(
          child: Stack(
            children: [
              Indexer(
                children: [
                  Indexed(
                    IndexedInterface(
                      key: UniqueKey(),
                      child: Positioned(
                        top: 50,
                        left: 50,
                        child: Container(
                          width: 100,
                          height: 100,
                          color: Colors.red,
                        ),
                      ),
                    ),
                  ),
                  Indexed(
                    IndexedInterface(
                      key: UniqueKey(),
                      child: Positioned(
                        top: 80,
                        left: 80,
                        child: Container(
                          width: 100,
                          height: 100,
                          color: Colors.blue,
                        ),
                      ),
                    ),
                  ),
                ],
              ),
            ],
          ),
        ),
      ),
    );
  }
}

class IndexedInterface extends SingleChildRenderObjectWidget {
  final int index;

  IndexedInterface({Key? key, required Widget child, this.index = 0}) : super(key: key, child: child);

  @override
  RenderObject createRenderObject(BuildContext context) {
    return RenderIndexed(index: index);
  }

  @override
  void updateRenderObject(BuildContext context, covariant RenderIndexed renderObject) {
    renderObject.index = index;
  }
}

class RenderIndexed extends RenderProxyBox {
  RenderIndexed({required int index}) : _index = index;

  int _index;

  set index(int value) {
    if (value == _index) return;
    _index = value;
    markNeedsPaint();
  }

  @override
  bool hitTestSelf(Offset position) => true;

  @override
  void paint(PaintingContext context, Offset offset) {
    context.canvas.save();
    context.canvas.translate(offset.dx, offset.dy);
    context.paintChild(child!, Offset.zero);
    context.canvas.restore();
  }
}

下一步

• ✅ Indexer
• ❌ Indexer.shadow(shadow:[1,1,100],children:[...]) // 即将推出
• ✅ Indexed (堆叠中的项目)

支持 ☺️

如果你觉得这个插件对你有帮助，可以通过以下方式支持作者：

更多包：Kplayer

希望这些信息能帮助你在 Flutter 项目中更好地使用 Indexed 插件！