Flutter滚动列表Tile重叠方向反转问题求助

我在Flutter应用中使用ListView.builder实现列表，通过Align组件让Tile产生重叠效果。正向滚动时表现正常，但反向滚动时，已滚出屏幕的Tile重叠方向会发生反转。

原实现代码 #

HomeScreen #

class HomeScreen extends StatelessWidget {
  const HomeScreen({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      floatingActionButton: SizedFABWidget(),
      body: SafeArea(
        child: ListView.builder(
          itemCount: 5,
          itemBuilder: (context, index) {
            return const CardListViewWidget();
          },
        ),
      ),
    );
  }
}

CardListViewWidget #

class CardListViewWidget extends StatelessWidget {
  final List<String> test = [
    '1',
    '2',
    '3',
    '4',
    '5',
    '6',
    '7',
    '8',
    '9',
    '10',
    '11',
    '12',
    '2',
    '3',
    '4',
    '5',
    '6',
    '7',
    '8',
    '9',
    '10',
    '11',
    '12'
  ];

  CardListViewWidget({super.key});

  @override
  Widget build(BuildContext context) {
    return SizedBox(
      width: Get.width,
      height: kBottomListHeight,
      child: ListView.builder(
          itemCount: test.length,
          itemBuilder: (context, index) {
            return AlignWidget(
              list: test,
              index: index,
            );
          }),
    );
  }
}

AlignWidget #

class AlignWidget extends StatelessWidget {
  final int index;
  final List list;

  const AlignWidget({required this.index, required this.list, super.key});

  @override
  Widget build(BuildContext context) {
    return Align(
      heightFactor: 0.28,
      alignment: Alignment.topCenter,
      child: SizedBox(
        height: kHeight * 0.4,
        child: ListTile(
          shape: RoundedRectangleBorder(
            side: const BorderSide(color: Colors.black12),
            borderRadius: kBorderRadius45,
          ),
          tileColor: getColor(index),
        ),
      ),
    );
  }
}

问题原因 #

问题根源在于Align的heightFactor属性与ListView.builder的item复用机制冲突。heightFactor会将Align组件的高度设置为子组件高度的0.28倍，结合Alignment.topCenter，正向滚动时Tile顶部对齐父容器顶部，形成向上重叠的效果。但当ListView复用已滚出屏幕的item时，反向滚动过程中item的布局约束上下文发生变化，Align的动态高度计算逻辑会导致Tile的偏移方向反转，最终出现重叠方向颠倒的问题。

解决方案 #

放弃使用Align的动态高度计算，改用Transform.translate设置固定偏移量，同时给每个item的父容器设置固定高度，确保复用item时布局约束一致，从而稳定重叠方向。

修改后的AlignWidget #

class AlignWidget extends StatelessWidget {
  final int index;
  final List list;

  const AlignWidget({required this.index, required this.list, super.key});

  // 可根据需求调整重叠偏移量
  final double overlapOffset = -60;

  @override
  Widget build(BuildContext context) {
    return SizedBox(
      // 固定父容器高度，避免复用时光栅计算异常
      height: kHeight * 0.4 + overlapOffset.abs(),
      child: Transform.translate(
        // 第一个item不偏移，后续item向上偏移实现重叠
        offset: Offset(0, index == 0 ? 0 : overlapOffset),
        child: SizedBox(
          height: kHeight * 0.4,
          child: ListTile(
            shape: RoundedRectangleBorder(
              side: const BorderSide(color: Colors.black12),
              borderRadius: kBorderRadius45,
            ),
            tileColor: getColor(index),
          ),
        ),
      ),
    );
  }
}

补充优化（针对横向列表） #

如果你的列表是横向滚动，需给CardListViewWidget中的ListView.builder添加滚动方向配置：

ListView.builder(
  scrollDirection: Axis.horizontal,
  itemCount: test.length,
  itemBuilder: (context, index) {
    return AlignWidget(
      list: test,
      index: index,
    );
  },
)

方案说明 #

1. 固定偏移量：通过Transform.translate的固定Y轴偏移，直接控制Tile的重叠位置，避免依赖Align的动态高度计算。
2. 固定父容器高度：确保ListView复用item时，布局约束不会随滚动方向变化，从根源上避免偏移方向反转。
3. 稳定重叠逻辑：仅第一个item不偏移，后续item统一向上偏移，保持后一个Tile叠在前一个上方的效果，无论滚动方向如何都不会改变。

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