Flutter实现磁吸附滚动效果：不同高度容器的滚动停靠方案

要实现不同高度Container的滚动吸附，你可以通过ScrollController监听滚动状态，在滚动结束后计算目标位置并自动滚动到对应容器的顶部。以下是完整实现代码：

import 'package:flutter/material.dart';

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

  @override
  State<ScrollSnapPage> createState() => _ScrollSnapPageState();
}

class _ScrollSnapPageState extends State<ScrollSnapPage> {
  final ScrollController _scrollController = ScrollController();
  // 存储每个容器的顶部偏移量
  final List<double> _containerOffsets = [];
  // 标记自动滚动状态，避免重复触发逻辑
  bool _isAutoScrolling = false;

  @override
  void initState() {
    super.initState();
    _scrollController.addListener(_onScroll);
    // 页面渲染完成后计算容器位置
    WidgetsBinding.instance.addPostFrameCallback((_) {
      _calculateContainerOffsets();
    });
  }

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

  // 计算每个容器的顶部偏移
  void _calculateContainerOffsets() {
    final renderBox = context.findRenderObject() as RenderBox;
    final columnRender = renderBox.firstChild as RenderBox;
    double currentOffset = 0;
    _containerOffsets.clear();

    for (int i = 0; i < columnRender.childCount; i++) {
      final child = columnRender.getChildAt(i) as RenderBox;
      _containerOffsets.add(currentOffset);
      currentOffset += child.size.height;
    }
  }

  void _onScroll() {
    if (_isAutoScrolling) return;

    // 仅在用户停止滚动时触发吸附
    if (!_scrollController.position.isScrollingNotifier.value) {
      _snapToNearestContainer();
    }
  }

  // 滚动到最近的容器顶部
  void _snapToNearestContainer() {
    final currentOffset = _scrollController.offset;
    double nearestOffset = 0;
    double minDistance = double.infinity;

    for (final offset in _containerOffsets) {
      final distance = (currentOffset - offset).abs();
      if (distance < minDistance) {
        minDistance = distance;
        nearestOffset = offset;
      }
    }

    // 偏移过小时不触发滚动，避免抖动
    if ((currentOffset - nearestOffset).abs() < 10) return;

    setState(() => _isAutoScrolling = true);
    _scrollController.animateTo(
      nearestOffset,
      duration: const Duration(milliseconds: 300),
      curve: Curves.easeOut,
    ).then((_) {
      setState(() => _isAutoScrolling = false);
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SingleChildScrollView(
        controller: _scrollController,
        child: Column(
          children: [
            Container(
              height: 400,
              width: double.maxFinite,
              color: Colors.amber,
            ),
            Container(
              height: 500,
              width: double.maxFinite,
              color: Colors.red,
            ),
            Container(
              height: 100,
              width: double.maxFinite,
              color: Colors.green,
            ),
          ],
        ),
      ),
    );
  }
}

关键逻辑说明 #

• 滚动监听：通过ScrollController监听滚动状态，在用户停止滚动时触发吸附逻辑。
• 容器位置计算：利用RenderBox获取每个Container的高度和顶部偏移，提前存储偏移数据。
• 吸附判断：计算当前滚动偏移与各容器顶部的距离，选择最近的目标位置执行平滑滚动。
• 防重复触发：用_isAutoScrolling标记避免自动滚动过程中重复触发监听，防止页面抖动。

如果容器高度是动态变化的，可在高度更新后重新调用_calculateContainerOffsets()刷新偏移列表，确保吸附位置准确。

内容的提问来源于stack exchange，提问作者Bart Van de Veire