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

Posted 2023-05-07

【中文标题】Listview.builder 将一个小部件定位在另一个小部件上

【英文标题】：Listview.builder Positioning a widget on another widget

【发布时间】：2021-03-17 12:42:22

【问题描述】：

我正在尝试制作像 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 这样的小部件

【参考方案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,
            ),
          );
        ,
      ),
    );
  

【讨论】：

感谢您的回答，您的意见很棒，但我希望缩放后的图像位于其他可见图像之上。不过还是谢谢你的回复。