Flutter中如何在SingleChildScrollView滚动时固定指定Widget

要实现w3滚动到指定位置后固定的效果，核心思路是通过Stack叠加布局分离固定组件与滚动内容，同时保留原位置的占位容器避免布局跳动。以下是修改后的完整代码：

import 'package:flutter/material.dart';

class MyWidget extends StatefulWidget {
  @override
  _MyWidgetState createState() => _MyWidgetState();
}

class _MyWidgetState extends State<MyWidget> {
  final GlobalKey _key = GlobalKey();
  late ScrollController _controller;
  bool _isStuck = false;
  late double _screenHeight;
  // 可替换为 MediaQuery.of(context).size.height - 50，按需求调整固定位置
  final double _stuckTopOffset = 120; 

  @override
  void initState() {
    super.initState();
    _controller = ScrollController();
    WidgetsBinding.instance.addPostFrameCallback(_afterLayout);
  }

  void _afterLayout(_) {
    _screenHeight = MediaQuery.of(context).size.height;
    // 若要动态适配屏幕底部50的位置，取消下面注释：
    // _stuckTopOffset = _screenHeight - 50;
    _controller.addListener(_onScroll);
  }

  void _onScroll() {
    final renderBox = _key.currentContext?.findRenderObject() as RenderBox?;
    if (renderBox == null) return;

    final Offset offset = renderBox.localToGlobal(Offset.zero);
    final double startY = offset.dy;

    setState(() {
      _isStuck = startY <= _stuckTopOffset;
    });
  }

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

  // 提取w3组件，避免重复代码
  Widget get _w3 => RepaintBoundary(
        child: Container(
          height: 100,
          color: Colors.blue.shade400,
          key: _key,
          child: const Text('w3'),
        ),
      );

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Stack(
        children: [
          // 滚动内容部分
          SingleChildScrollView(
            controller: _controller,
            child: Column(
              children: [
                Container(
                  height: 400,
                  color: Colors.red,
                  child: const Text('w1'),
                ),
                Container(
                  height: 400,
                  color: Colors.green,
                  child: const Text('w2'),
                ),
                // w3固定时，显示同高度占位容器防止布局跳动
                _isStuck ? const SizedBox(height: 100) : _w3,
                Container(
                  height: 500,
                  color: Colors.yellow,
                  child: const Text('w4'),
                ),
                Container(
                  height: 500,
                  color: Colors.orange,
                  child: const Text('w5'),
                ),
              ],
            ),
          ),
          // 固定的w3组件，仅在_isStuck为true时显示
          if (_isStuck)
            Positioned(
              top: _stuckTopOffset,
              left: 0,
              right: 0,
              child: _w3,
            ),
        ],
      ),
    );
  }
}

关键修改点说明： #

1. 布局结构调整：使用Stack将滚动内容与固定组件分离，固定的w3通过Positioned定位到指定位置。
2. 占位容器：当w3进入固定状态时，在原Column位置替换为同高度的SizedBox，防止下方组件突然上移导致的布局跳动。
3. 滚动监听优化：
   • 提取独立的_onScroll方法，代码结构更清晰
   • 增加空安全判断，避免_key.currentContext为空时的异常
   • 支持动态计算固定位置，适配不同屏幕尺寸
4. 资源释放：添加dispose方法销毁ScrollController，避免内存泄漏。
5. 组件复用：提取_w3变量，避免重复编写相同组件代码。

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