flutter Scrollable.ensureVisible添加动画

在 Flutter 中，`Scrollable.ensureVisible()` 是一个用于滚动到指定位置并显示其内容的方法，通常用于滚动视图（如 `ListView` 或 `ScrollView`）。默认情况下，这个过程并不包含动画效果。如果你想要添加平滑的动画过渡，可以自定义滚动行为，并结合一些动画库，比如 `AnimatedBuilder` 和 `Tween`。

下面是一个简单的例子，展示了如何给 `ensureVisible()` 添加一个淡入淡出（Fade-in/fade-out）动画：

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

class CustomScrollable extends StatefulWidget {
  @override
  _CustomScrollableState createState() => _CustomScrollableState();
}

class _CustomScrollableState extends State<CustomScrollable> {
  final ScrollController _scrollController = ScrollController();

  // 使用动画关键帧（Tween）
  final Animation<double> _fadeAnimation = Tween(begin: 0.0, end: 1.0).animate(
    CurvedAnimation(parent: _scrollController.position,
        curve: Curves.easeInOut),
  );

  void _ensureVisible(int index) {
    _scrollController.animateTo(
      index * 100, // 假设每个item高度为100
      duration: Duration(milliseconds: 500),
      curve: Curves.easeInOutQuart, // 设置动画曲线
      intraFrameCallback: (pos) {
        setState(() {
          _fadeAnimation.value = pos; // 根据滚动位置更新动画进度
        });
      },
    ).whenComplete(() {
      // 淡入完成后的处理...
    });
  }

  @override
  Widget build(BuildContext context) {
    return ListView.builder(
      controller: _scrollController,
      itemCount: 10,
      itemBuilder: (context, index) {
        return Container(
          height: 100,
          child: Center(child: Text('Item $index')),
          visibility: _fadeAnimation.value > 0.5 ? Visibility.visible : Visibility.hidden,
        );
      },
      itemBuilder: (context, index) {
        if (_scrollController.position.isFirst || _scrollController.position.isLast)
          return Container(); // 防止首尾滚动时出现闪烁

        return GestureDetector(
          onTap: () {
            _ensureVisible(index);
          },
          child: Container(),
        );
      },
    );
  }
}

在这个示例中，我们创建了一个 `_fadeAnimation` 来控制渐变透明度。当滚动到指定位置时，会根据 `_scrollController` 的位置更新 `_fadeAnimation`，使其从完全透明变为完全可见。`intraFrameCallback` 参数用于实时更新元素的可见状态。