Flutter Web实现按钮随页面滚动后固定显示在App Bar

需求说明 #

初始状态：按钮属于页面常规内容流，随页面向下滚动；滚动后状态：当原按钮在视口中不可见时，自动在AppBar中显示相同功能的按钮。

核心思路 #

通过监听页面滚动状态，判断页面流中的原按钮是否处于视口范围内，根据检测结果控制AppBar中备用按钮的显示/隐藏状态。

具体实现步骤 #

• 1. 基础组件准备：定义页面流中的原按钮、AppBar中的备用按钮，以及用于滚动监听的ScrollController。
• 2. 视口可见性判断：借助GlobalKey获取原按钮的渲染对象，通过Flutter原生的视口计算逻辑，判断按钮是否处于视口内。
• 3. 状态更新控制：根据视口检测结果，更新AppBar中按钮的显示状态。

代码示例 #

import 'package:flutter/material.dart';
import 'package:flutter/rendering.dart';

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

  @override
  State<ScrollAdaptiveButtonPage> createState() => _ScrollAdaptiveButtonPageState();
}

class _ScrollAdaptiveButtonPageState extends State<ScrollAdaptiveButtonPage> {
  final ScrollController _scrollController = ScrollController();
  final GlobalKey _buttonKey = GlobalKey();
  bool _showAppBarButton = false;

  @override
  void initState() {
    super.initState();
    _scrollController.addListener(_checkButtonVisibility);
  }

  void _checkButtonVisibility() {
    final renderObject = _buttonKey.currentContext?.findRenderObject();
    if (renderObject != null && renderObject is RenderBox) {
      final viewport = RenderAbstractViewport.of(renderObject);
      final offset = _scrollController.offset;
      final revealOffset = viewport.getOffsetToReveal(renderObject, 0.0);
      
      // 判断按钮是否完全移出视口
      setState(() {
        _showAppBarButton = revealOffset.offset > offset || 
                            (revealOffset.offset + renderObject.size.height) < offset;
      });
    }
  }

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

  // 抽离按钮点击逻辑，保证两个按钮行为一致
  void _onButtonTap() {
    print('操作按钮被点击');
    // 这里添加你的业务逻辑
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('滚动吸附按钮示例'),
        actions: [
          if (_showAppBarButton)
            Padding(
              padding: const EdgeInsets.only(right: 16),
              child: ElevatedButton(
                onPressed: _onButtonTap,
                child: const Text('操作按钮'),
              ),
            )
        ],
      ),
      body: ListView(
        controller: _scrollController,
        children: [
          // 页面顶部占位内容
          Container(
            height: 300,
            color: Colors.blue[100],
            child: const Center(child: Text('顶部区域')),
          ),
          // 页面流中的原按钮
          Padding(
            padding: const EdgeInsets.symmetric(vertical: 16),
            child: Center(
              key: _buttonKey,
              child: ElevatedButton(
                onPressed: _onButtonTap,
                child: const Text('操作按钮'),
              ),
            ),
          ),
          // 长列表内容，用于触发滚动
          ...List.generate(20, (index) => Container(
            height: 100,
            color: index % 2 == 0 ? Colors.grey[200] : Colors.white,
            child: Center(child: Text('列表项 $index')),
          ))
        ],
      ),
    );
  }
}

补充优化方案 #

如果觉得手动计算视口逻辑繁琐，可以使用第三方包visibility_detector，通过VisibilityDetector组件直接监听按钮的可见性，代码会更简洁：

1. 在pubspec.yaml中添加依赖：visibility_detector: ^0.4.0+2
2. 替换视口判断逻辑：

// 替换原来的_checkButtonVisibility方法和initState中的监听
@override
Widget build(BuildContext context) {
  return Scaffold(
    // ...其他代码不变
    body: ListView(
      controller: _scrollController,
      children: [
        // ...其他内容不变
        VisibilityDetector(
          key: _buttonKey,
          onVisibilityChanged: (info) {
            setState(() {
              _showAppBarButton = info.visibleFraction == 0;
            });
          },
          child: Padding(
            padding: const EdgeInsets.symmetric(vertical: 16),
            child: Center(
              child: ElevatedButton(
                onPressed: _onButtonTap,
                child: const Text('操作按钮'),
              ),
            ),
          ),
        ),
        // ...其他内容不变
      ],
    ),
  );
}

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