在颤动中调整 Z-Index

Question

我尝试将一个元素放置在颤动中的另一个元素之上。使用transform: Matrix4.translationValues，它可以设置一个负值，但上面的元素有一个更大的z-index。我怎么能调整呢？要了解我需要什么：

这就是我所拥有的

这就是我需要的

我的代码

class _AlbumDetailState extends State<AlbumDetail> {
  @override
  Widget build(BuildContext context) {
    final theme = Theme.of(context);
    final routeArgs =
        ModalRoute.of(context).settings.arguments as Map<String, int>;
    final albumID = routeArgs['id'];
    final index = routeArgs['index'];
    final picturesData = Provider.of<Pictures>(context, listen: true);

    Future<void> _addPictureToGallery() async {
      final picker = ImagePicker();
      final imageFile =
          await picker.getImage(source: ImageSource.gallery, maxWidth: 600);

      final appDir = await syspath.getApplicationDocumentsDirectory();

      final fileName = path.basename(imageFile.path);

      final savedImage =
          await File(imageFile.path).copy('${appDir.path}/$fileName');

      print(savedImage);

      picturesData.add(Picture(
          album: albumID, path: savedImage.path, timestamp: Timestamp.now()));
    }

    return Scaffold(
      body: CustomScrollView(
        slivers: <Widget>[
          SliverAppBar(
            title: Text("Album"),
            flexibleSpace: FlexibleSpaceBar(
                background: Container(
              color: Colors.transparent,
              child: Hero(
                tag: "open_gallery" + index.toString(),
                child: Image(
                  image: NetworkImage('https://placeimg.com/640/480/any'),
                  fit: BoxFit.cover,
                ),
              ),
            )),
            expandedHeight: 350,
            backgroundColor: Colors.green,
            pinned: true,
            stretch: false,
          ),
          SliverToBoxAdapter(
            child: FutureBuilder(
                future: picturesData.getPicturesFromAlbum(albumID),
                builder: (BuildContext context, AsyncSnapshot snapshot) {
                  if (snapshot.hasData && snapshot.data.length == 0) {
                    return Center(
                      child: Text("Noch keine Bilder vorhanden"),
                    );
                  }
                  if (!snapshot.hasData ||
                      snapshot.connectionState == ConnectionState.waiting) {
                    return Center(
                      child: CircularProgressIndicator(),
                    );
                  } else {
                    return Column(
                      crossAxisAlignment: CrossAxisAlignment.center,
                      mainAxisAlignment: MainAxisAlignment.center,
                      children: <Widget>[
                        Container(
                          alignment: Alignment.center,
                          transform: Matrix4.translationValues(0.0, -75.0, 0.0),
                          width: MediaQuery.of(context).size.width - 50,
                          height: 150,
                          color: Colors.black87,
                          margin: EdgeInsets.only(top: 50),
                          child: Text(
                            "Headline",
                            style: Theme.of(context)
                                .textTheme
                                .headline2
                                .copyWith(color: theme.colorScheme.onPrimary),
                          ),
                        ),
                        StaggeredGridView.countBuilder(
                          physics: NeverScrollableScrollPhysics(),
                          shrinkWrap: true,
                          crossAxisCount: 6,
                          itemCount: snapshot.data.length,
                          itemBuilder: (BuildContext context, int index) =>
                              Container(
                                  child: Image.file(
                            File(snapshot.data[index].path),
                            fit: BoxFit.cover,
                          )),
                          staggeredTileBuilder: (int index) =>
                              new StaggeredTile.count(2, index.isEven ? 2 : 1),
                          mainAxisSpacing: 5.0,
                          crossAxisSpacing: 5.0,
                        ),
                      ],
                    );
                  }
                }),
          )
        ],
      ),
    );
  }
}

问题：z-index 在我的元素上不正确。我的标题在上面。如何调整z-index？我从 CSS 中知道这一点。有没有办法通过颤振来解决这个问题？

Answer 1

实现重叠小部件的一种方法是使用Stack 小部件。您可以查看docs了解更多详情。

Answer 2

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

https://raw.githubusercontent.com/physia/kflutter/main/indexed/doc/assets/demo.gif

此包允许您使用 index 像 z-index 在 css 中订购堆栈内的项目 这是它如何工作的示例

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

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

class IndexedDemo extends IndexedInterface {
    int index = 5;
}

或实现

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

    //...
}

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

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

在线demo 视频demo