如何在鼠标悬停时zoom 列表项，使其始终可见(Web 平台上的 Flutter)

我认为这正是你想要的(也可以勾选live demo on DartPad):

解决方案是:

1. 使用包裹ListView的外层Stack；
2. 在Stack中，在其前面再添加ListView个项目，项目数量和项目大小相同；
3. 然后，忽略这个新ListView上有IgnorePointer的指针事件，这样后面的一个将接收滚动/点击/点击事件；
4. 通过收听滚动事件NotificationListener<ScrollNotification>，在后ListView和前ListView之间同步滚动；

Here's the code

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key, required this.title}) : super(key: key);

  final String title;

  @override
  State createState() => _MyHomePageState();
}

class _MyHomePageState extends State {
  final double zoomTargetHeight = 320;
  final double zoomTargetWidth = 500;
  final double zoomOriginalHeight = 225;
  final double zoomOriginalWidth = 400;

  late final ScrollController _controllerBack;
  late final ScrollController _controllerFront;

  @override
  void initState() {
    super.initState();
    _controllerBack = ScrollController();
    _controllerFront = ScrollController();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SingleChildScrollView(
        child: Column(
          children: [
            Image.network("https://source.unsplash.com/random/1600x900?cars"),
            Container(
              color: Colors.black87,
              child: Padding(
                padding: const EdgeInsets.all(20.0),
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    const SizedBox(
                      height: 12,
                    ),
                    const Text(
                      "List of items",
                      style: TextStyle(color: Colors.white),
                    ),
                    const SizedBox(
                      height: 12,
                    ),
                    SizedBox(
                      height: 225,
                      child: NotificationListener<ScrollNotification>(
                        onNotification: (notification) {
                          _controllerFront.jumpTo(_controllerBack.offset);
                          return true;
                        },
                        child: Stack(
                          clipBehavior: Clip.none,
                          children: [
                            ListView.separated(
                              controller: _controllerBack,
                              clipBehavior: Clip.none,
                              scrollDirection: Axis.horizontal,
                              itemBuilder: (context, index) {
                                return buildBackCard(index);
                              },
                              separatorBuilder: (context, index) {
                                return const SizedBox(
                                  width: 12,
                                );
                              },
                              itemCount: 10,
                            ),
                            IgnorePointer(
                              child: ListView.separated(
                                controller: _controllerFront,
                                clipBehavior: Clip.none,
                                scrollDirection: Axis.horizontal,
                                itemBuilder: (context, index) {
                                  return buildFrontCard(index);
                                },
                                separatorBuilder: (context, index) {
                                  return const SizedBox(
                                    width: 12,
                                  );
                                },
                                itemCount: 10,
                              ),
                            ),
                          ],
                        ),
                      ),
                    ),
                    const SizedBox(
                      height: 200,
                    ),
                  ],
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }

  final Map _showZoom = {};

  Widget buildBackCard(int index) {
    return MouseRegion(
      onEnter: (event) {
        setState(() {
          _showZoom["$index"] = true;
        });
      },
      onExit: (event) {
        setState(() {
          _showZoom["$index"] = false;
        });
      },
      child: ClipRRect(
        borderRadius: BorderRadius.circular(20),
        child: Stack(
          children: [
            Image.network(
              "https://source.unsplash.com/random/400x225?sig=$index&cars",
            ),
            Container(
              color: Colors.black.withAlpha(100),
              height: zoomOriginalHeight,
              width: zoomOriginalWidth,
            ),
          ],
        ),
      ),
    );
  }

  Widget buildFrontCard(int index) {
    Widget child;
    double scale;
    if (_showZoom["$index"] == null || !_showZoom["$index"]!) {
      scale = 1;
      child = SizedBox(
        height: zoomOriginalHeight,
        width: zoomOriginalWidth,
      );
    } else {
      scale = zoomTargetWidth / zoomOriginalWidth;
      child = Stack(
        clipBehavior: Clip.none,
        children: [
          Container(
            height: zoomOriginalHeight,
            width: zoomOriginalWidth,
            decoration: BoxDecoration(
              borderRadius: BorderRadius.circular(20.0),
              image: DecorationImage(
                image: NetworkImage(
                    "https://source.unsplash.com/random/400x225?sig=$index&cars"),
                fit: BoxFit.cover,
              ),
            ),
          ),
        ],
      );
    }
    return AnimatedScale(
      duration: const Duration(milliseconds: 400),
      scale: scale,
      child: child,
    );
  }
}