Listview.builder 将一个小部件定位在另一个小部件上

Question

我正在尝试制作像 Instagram 这样的应用程序。但是由于其他图片，我无法完整查看放大后的图片。

代码：

List colors = [
    Colors.green,
    Colors.blue,
    Colors.red,
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Demo"),
      ),
      body: ListView.builder(
        itemCount: 3,
        itemBuilder: (_, int index) {
          TransformationController controller = TransformationController();
          return Container(
            child: InteractiveViewer(
              transformationController: controller,
              onInteractionEnd: (_) {
                setState(() {
                  controller.toScene(Offset.zero);
                });
              },
              child: ColorFiltered(
                colorFilter: ColorFilter.mode(colors[index], BlendMode.color),
                child: FlutterLogo(),
              ),
            ),
            height: 200,
            width: 200,
          );
        },
      ),
    );
  }

注意：由于 listview.builder，我不能使用像 stack 这样的小部件

Answer 1

您可以使用可见性小部件或不透明度小部件来更改当前未平移的图像的可见性。请参阅下面的代码，我使用 AnimatedOpacity 只是为了让图像的消失看起来不会太突然，但您也可以使用 Opacity 小部件。

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: const Text("Flutter Demo")),
        body: MyStatefulWidget(),
      ),
    );
  }
}

class MyStatefulWidget extends StatefulWidget {
  @override
  _MyStatefulWidgetState createState() => _MyStatefulWidgetState();
}

class _MyStatefulWidgetState extends State<MyStatefulWidget> {
  static List colors = [
    Colors.green,
    Colors.blue,
    Colors.red,
  ];
  final List<double> _opacity = List.generate(colors.length, (index) => 1);
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("Demo"),
      ),
      body: ListView.builder(
        itemCount: 3,
        itemBuilder: (_, int index) {
          final TransformationController controller =
              TransformationController();
          return AnimatedOpacity(
            opacity: _opacity[index],
            duration: const Duration(milliseconds: 100),
            child: Container(
              child: InteractiveViewer(
                transformationController: controller,
                onInteractionStart: (details) {
                  for (int i = 0; i < _opacity.length; i++) {
                    _opacity[i] = i == index ? 1 : 0;
                  }
                  setState(() {});
                },
                onInteractionEnd: (_) {
                  setState(() {
                    _opacity.fillRange(0, _opacity.length, 1);
                    controller.toScene(Offset.zero);
                  });
                },
                child: ColorFiltered(
                  colorFilter: ColorFilter.mode(colors[index], BlendMode.color),
                  child: const FlutterLogo(),
                ),
              ),
              height: 200,
              width: 200,
            ),
          );
        },
      ),
    );
  }
}