在滚动ListView时显示和隐藏容器>> [

Question

如何在向下滚动Container时显示带有动画的ListView，并在向上滚动时将其隐藏。

我要附加的视频并不是我想要的确切实现，而只是给您一个想法。

示例视频

https://imgur.com/a/auEzJQk

---

编辑：

[每次向下滚动时，我需要显示Container，而每次向上滚动时，我都希望将其隐藏。它不应该取决于ListView的索引。

如何在向下滚动ListView时显示带有动画的容器，并在向上滚动时将其隐藏。我要附加的视频并不是我想要的确切实现，而只是给您一个想法。 ...

Answer 1

不确定我是否正确回答了您的问题，这是您要达到的目标吗？

Answer 2

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    const double HEIGHT = 96;
    final ValueNotifier<double> notifier = ValueNotifier(0);
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        appBar: AppBar(title: const Text('Test')),
        body: Stack(
          children: [
            NotificationListener<ScrollNotification>(
              onNotification: (n) {
                if (n.metrics.pixels <= HEIGHT) {
                  notifier.value = n.metrics.pixels;
                }
                return false;
              },
              child: ListView.builder(
                itemCount: 42,
                itemBuilder: (context, index) {
                  return Container(
                    height: 64,
                    padding: const EdgeInsets.all(16),
                    alignment: Alignment.centerLeft,
                    child: Text('Item $index'),
                  );
                },
              ),
            ),
            HideableWidget(height: HEIGHT, notifier: notifier),
          ],
        ),
      ),
    );
  }
}

class HideableWidget extends StatelessWidget {
  final double height;
  final ValueNotifier<double> notifier;

  HideableWidget({@required this.height, @required this.notifier});

  @override
  Widget build(BuildContext context) {
    return ValueListenableBuilder<double>(
      valueListenable: notifier,
      builder: (context, value, child) {
        return Transform.translate(
          offset: Offset(0, value - height),
          child: Container(
            height: 80,
            color: Colors.red,
          ),
        );
      },
    );
  }
}

Answer 3

我为您解决了问题。这是演示代码