如何在 Flutter 中以编程方式更改小部件堆栈的 Z-Index

Question

正如您在此 Stack 中所见，黄色立方体位于紫色立方体的下方。

单击时，我想更改黄色立方体的索引，将其从索引 0 转换为 1，将紫色立方体从索引 1 转换为 0，反之亦然。

我尝试了 IndexedStack，但它只显示 children 列表中的一个 child。

class _FlipIndex extends State<FlipIndex> {

  int currentIndex = 0;

  @override
  Widget build(BuildContext context) {
    return Center(
      child: GestureDetector(
        onTap: (){
          // Change Z-Index of widget
        },
        child: Stack(
          alignment: Alignment.center,
          children: [
            Transform.translate(
              offset: Offset(-30.0, 0.0),
              child: Container(
                width: 100,
                height: 100,
                decoration: BoxDecoration(
                  color: Colors.yellow,
                  shape: BoxShape.rectangle,
                ),
              ),
            ),
            Transform.translate(
              offset: Offset(30.0, 0.0),
              child: Container(
                width: 100,
                height: 100,
                decoration: BoxDecoration(
                  color: Colors.purple,
                  shape: BoxShape.rectangle,
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

Answer 1

试试这个：

class _FlipIndex extends State<FlipIndex> {
  List<Widget> _stackChildren = [];
  int currentIndex = 0;

  @override
  void initState() {
    super.initState();
    _stackChildren.add(_stackChild(Colors.yellow, 30));
    _stackChildren.add(_stackChild(Colors.green, -30));
  }

  //call this function for swapping items
  void _swapOrder() {
    Widget _first = _stackChildren[0];
    _stackChildren.removeAt(0);
    _stackChildren.add(_first);
    setState(() {});
  }

  Widget _stackChild(Color childColor, double xOffset) {
    return Transform.translate(
      key: UniqueKey(),
      offset: Offset(xOffset, 0.0),
      child: Container(
        width: 100,
        height: 100,
        decoration: BoxDecoration(
          color: childColor,
          shape: BoxShape.rectangle,
        ),
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    return Center(
      child: GestureDetector(
        onTap: () {
          _swapOrder();
        },
        child: Stack(
          alignment: Alignment.center,
          children: _stackChildren,
        ),
      ),
    );
  }
}

Answer 2

试试这个包 https://pub.dev/packages/indexed

示例图片：

此包允许您使用 index 订购堆栈内的项目，如 CSS 中的 z-index。

您可以轻松更改项目的顺序，方法是更改 index 属性

这是其工作原理的示例

Indexer(
    children: [
        Indexed(
          index: 100,
          child: Positioned(
            //...
          )
        ),
        Indexed(
          index: 1000,
          child: Positioned(
            //...
          )
        ),
        Indexed(
          index: 3,
          child: Positioned(
            //...
          )
        ),
    ],
);

如果您正在使用一些复杂小部件的 bloc，您可以扩展或实现 IndexedInterface class 并覆盖 index getter:

class IndexedDemo extends IndexedInterface {
    int index = 5;
}

或实施

class IndexedDemo extends AnimatedWidget implements IndexedInterface {
    int index = 1000;
    //...

    //...
}

然后像 Indexed class 小部件一样使用它：

Indexer(
    children: [
        IndexedDemo(
          index: 100,
          child: Positioned(
            //...
          )
        ),
        IndexedFoo(
          index: 1000,
          child: Positioned(
            //...
          )
        ),
    ],
);

在线demo 视频 demo

如何在 Flutter 中以编程方式更改小部件堆栈的 Z-Index

How to programmatically change Z-Index of widget Stack in Flutter

dart

flutter

flutter-layout

flutter-animation

flutter-web