如何在Flutter中实现滚动时组件从右向左移动？

当然可以实现这种滚动时组件从右向左移动的效果，核心是通过监听滚动偏移量来动态调整组件的水平位置，下面是具体的实现方案和代码示例：

实现思路 #

使用ScrollController监听页面滚动事件，将滚动偏移值映射为目标组件的X轴偏移量，随着滚动距离增加，组件逐步从右向左移动，还可以限制最大移动距离避免组件移出屏幕范围。

完整代码示例 #

import 'package:flutter/material.dart';

class ScrollLeftMoveDemo extends StatefulWidget {
  const ScrollLeftMoveDemo({super.key});

  @override
  State<ScrollLeftMoveDemo> createState() => _ScrollLeftMoveDemoState();
}

class _ScrollLeftMoveDemoState extends State<ScrollLeftMoveDemo> {
  late ScrollController _scrollController;
  double _componentOffsetX = 0.0;
  // 组件最大左移距离，可根据需求调整
  final double _maxLeftDistance = 220.0;

  @override
  void initState() {
    super.initState();
    _scrollController = ScrollController()
      ..addListener(() {
        setState(() {
          // 计算组件偏移量：滚动偏移量除以系数控制移动速度，负值表示向左移动
          _componentOffsetX = -(_scrollController.offset / 1.8);
          // 限制最大左移距离
          if (_componentOffsetX < -_maxLeftDistance) {
            _componentOffsetX = -_maxLeftDistance;
          }
        });
      });
  }

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('滚动左移效果演示')),
      body: ListView(
        controller: _scrollController,
        padding: const EdgeInsets.symmetric(vertical: 20),
        children: [
          // 占位列表项，让页面可滚动
          for (int i = 0; i < 15; i++)
            Padding(
              padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 12),
              child: Container(
                height: 90,
                color: Colors.grey[100],
                child: Center(child: Text('列表条目 $i', style: TextStyle(fontSize: 16))),
              ),
            ),
          // 滚动时左移的目标组件
          Transform.translate(
            offset: Offset(_componentOffsetX, 0),
            child: Container(
              width: 320,
              height: 160,
              margin: const EdgeInsets.symmetric(horizontal: 16, vertical: 20),
              color: Colors.deepOrange,
              child: const Center(
                child: Text(
                  '滚动时我会从右向左移动',
                  style: TextStyle(color: Colors.white, fontSize: 18, fontWeight: FontWeight.w500),
                ),
              ),
            ),
          ),
          // 继续添加占位内容，确保滚动能触发组件移动
          for (int i = 0; i < 10; i++)
            Padding(
              padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 12),
              child: Container(
                height: 90,
                color: Colors.grey[100],
                child: Center(child: Text('列表条目 ${15 + i}', style: TextStyle(fontSize: 16))),
              ),
            ),
        ],
      ),
    );
  }
}

自定义调整说明 #

• 调整_maxLeftDistance可以设置组件最多向左移动的距离
• 修改滚动偏移量的计算系数（示例中是/1.8）可以控制组件移动的速度，系数越小移动越快
• 如果需要更平滑的过渡动画，可以替换Transform.translate为AnimatedBuilder，结合AnimationController将滚动偏移量转为动画值，实现更流畅的移动效果

内容的提问来源于stack exchange，提问作者Kareem JO