Flutter ListView滚动时如何设置屏幕首项居中动画效果？

要实现滚动时自动将屏幕内首个Item切换为居中（X轴旋转0度），核心是跟踪当前屏幕内可见的首个Item索引，并动态更新旋转状态。以下是具体实现步骤：

1. 核心思路 #

• 使用ScrollController监听列表滚动，计算当前屏幕内首个可见Item的索引
• 用状态变量保存该索引，在itemBuilder中根据索引判断是否应用旋转效果
• 固定Item高度，确保滚动位置与索引计算准确

2. 完整代码示例 #

import 'package:flutter/material.dart';

class RotatingListView extends StatefulWidget {
  final List posts;

  const RotatingListView({super.key, required this.posts});

  @override
  State<RotatingListView> createState() => _RotatingListViewState();
}

class _RotatingListViewState extends State<RotatingListView> {
  final ScrollController _scrollController = ScrollController();
  int _currentCenterIndex = 0;
  final double _itemHeight = 200;

  @override
  void initState() {
    super.initState();
    _scrollController.addListener(_onScroll);
    // 初始渲染后计算一次初始索引
    WidgetsBinding.instance.addPostFrameCallback((_) {
      _updateCurrentCenterIndex();
    });
  }

  void _onScroll() {
    _updateCurrentCenterIndex();
  }

  void _updateCurrentCenterIndex() {
    if (_scrollController.hasClients) {
      final double offset = _scrollController.offset;
      // 根据滚动偏移计算首个可见Item的索引
      int newIndex = (offset / _itemHeight).floor();
      // 限制索引范围，避免越界
      newIndex = newIndex.clamp(0, widget.posts.length - 1);
      if (newIndex != _currentCenterIndex) {
        setState(() {
          _currentCenterIndex = newIndex;
        });
      }
    }
  }

  @override
  void dispose() {
    _scrollController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return ListView.builder(
      controller: _scrollController,
      itemExtent: _itemHeight, // 固定Item高度，确保索引计算准确
      itemCount: widget.posts.length,
      itemBuilder: (context, index) {
        final item = widget.posts[index];
        return Transform(
          transform: Matrix4.identity()
            ..setEntry(3, 2, 0.001)
            ..rotateX(index != _currentCenterIndex ? 45 : 0),
          child: Container(
            height: _itemHeight,
            width: 300,
            child: Center(
              child: Text(index.toString()),
            ),
          ),
        );
      },
    );
  }
}

3. 优化：添加旋转过渡动画 #

如果需要切换Item时的旋转有平滑动画，可以用AnimatedBuilder结合AnimationController实现：

// 在状态类中添加动画相关变量
late AnimationController _rotationController;
late Animation<double> _rotationAnimation;

@override
void initState() {
  super.initState();
  _scrollController.addListener(_onScroll);
  _rotationController = AnimationController(
    duration: const Duration(milliseconds: 300),
    vsync: this,
  );
  _rotationAnimation = Tween<double>(begin: 0, end: 45).animate(
    CurvedAnimation(parent: _rotationController, curve: Curves.easeInOut),
  );
  WidgetsBinding.instance.addPostFrameCallback((_) {
    _updateCurrentCenterIndex();
  });
}

// 修改_updateCurrentCenterIndex，触发动画
void _updateCurrentCenterIndex() {
  if (_scrollController.hasClients) {
    final double offset = _scrollController.offset;
    int newIndex = (offset / _itemHeight).floor();
    newIndex = newIndex.clamp(0, widget.posts.length - 1);
    if (newIndex != _currentCenterIndex) {
      setState(() {
        _currentCenterIndex = newIndex;
      });
      // 触发动画
      _rotationController.reset();
      _rotationController.forward();
    }
  }
}

// 修改itemBuilder中的Transform为AnimatedBuilder
itemBuilder: (context, index) {
  final item = widget.posts[index];
  return AnimatedBuilder(
    animation: _rotationAnimation,
    builder: (context, child) {
      final rotationAngle = index == _currentCenterIndex ? 0 : _rotationAnimation.value;
      return Transform(
        transform: Matrix4.identity()
          ..setEntry(3, 2, 0.001)
          ..rotateX(rotationAngle * (3.14159 / 180)), // 转弧度
        child: child,
      );
    },
    child: Container(
      height: _itemHeight,
      width: 300,
      child: Center(
        child: Text(index.toString()),
      ),
    ),
  );
},

// 记得dispose动画控制器
@override
void dispose() {
  _scrollController.dispose();
  _rotationController.dispose();
  super.dispose();
}

关键说明 #

• itemExtent必须与Item实际高度一致，否则滚动偏移与索引的计算会出错
• clamp方法用于限制索引范围，避免因滚动过度导致索引越界
• 动画优化部分通过AnimationController实现平滑过渡，提升用户体验

内容的提问来源于stack exchange，提问作者Mohammed Bekele