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，我不能使用像堆栈这样的小部件

Answer 1

您可以使用 Visibility 小部件或 Opacity 小部件来更改当前未平移的图像的可见性。 请参阅下面的代码，我正在使用 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,
            ),
          );
        },
      ),
    );
  }
}