Flutter中WebView滚动被SliverAppBar遮挡的问题如何解决？

核心问题是固定的SliverAppBar会覆盖WebView顶部内容，需要让WebView内容始终从AppBar底部开始显示。可以通过动态调整WebView的顶部内边距实现，内边距大小等于当前SliverAppBar的实际高度，而AppBar的高度可通过CustomScrollView的滚动偏移计算得出。

具体实现步骤 #

1. 定义SliverAppBar的展开高度和折叠高度为常量，方便后续计算。
2. 创建ValueNotifier保存当前AppBar的高度，用于动态更新WebView的内边距。
3. 给CustomScrollView的滚动控制器添加监听，实时计算并更新AppBar的当前高度。
4. 用ValueListenableBuilder包裹WebView，根据AppBar的当前高度设置顶部内边距。
5. 保留原有SliverToNestedScrollBoxAdapter的滚动联动逻辑，确保WebView和CustomScrollView滚动同步。

修改后的完整代码 #

import 'dart:ui';
import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';
import 'package:webview_flutter/webview_flutter.dart';

// 定义AppBar的展开和折叠高度
final double _expandedHeight = 200;
final double _collapsedHeight = 56;

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

  @override
  State<YourPage> createState() => _YourPageState();
}

class _YourPageState extends State<YourPage> {
  final ScrollController scrollController = ScrollController();
  final WebViewController webViewController = WebViewController();
  final ValueNotifier<double> scrollHeightNotifier = ValueNotifier(0);
  final ValueNotifier<double> _appBarHeightNotifier = ValueNotifier(_expandedHeight);

  @override
  void initState() {
    super.initState();
    // 监听滚动控制器，计算当前AppBar高度
    scrollController.addListener(_updateAppBarHeight);
    // 初始化WebView（示例）
    webViewController.loadRequest(Uri.parse("https://example.com"));
    // 可根据实际内容高度更新scrollHeightNotifier，此处为示例值
    scrollHeightNotifier.value = 2000;
  }

  void _updateAppBarHeight() {
    // 计算滚动偏移的有效值（0到展开与折叠高度的差值）
    double clampedOffset = scrollController.offset.clamp(0, _expandedHeight - _collapsedHeight);
    // 当前AppBar高度 = 展开高度 - 滚动偏移有效值
    double currentHeight = _expandedHeight - clampedOffset;
    _appBarHeightNotifier.value = currentHeight;
  }

  @override
  void dispose() {
    scrollController.removeListener(_updateAppBarHeight);
    scrollController.dispose();
    webViewController.dispose();
    scrollHeightNotifier.dispose();
    _appBarHeightNotifier.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: Scaffold(
        body: CustomScrollView(
          controller: scrollController,
          slivers: <Widget>[
            SliverAppBar(
              title: const Text('aaa'),
              expandedHeight: _expandedHeight,
              collapsedHeight: _collapsedHeight,
              pinned: true,
              flexibleSpace: FlexibleSpaceBar(
                background: Image.asset(
                  'assets/images/titleimage.png',
                  fit: BoxFit.cover,
                ),
              ),
            ),
            ValueListenableBuilder<double>(
              valueListenable: scrollHeightNotifier,
              builder: (
                BuildContext context,
                double scrollHeight,
                Widget? child,
              ) {
                return SliverToNestedScrollBoxAdapter(
                  childExtent: scrollHeight,
                  onScrollOffsetChanged: (double scrollOffset) {
                    double y = scrollOffset;
                    if (defaultTargetPlatform == TargetPlatform.android) {
                      y *= window.devicePixelRatio;
                    }
                    webViewController.scrollTo(0, y.ceil());
                  },
                  child: child,
                );
              },
              child: ValueListenableBuilder<double>(
                valueListenable: _appBarHeightNotifier,
                builder: (context, appBarHeight, child) {
                  // 添加顶部内边距，确保WebView内容从AppBar底部开始
                  return Padding(
                    padding: EdgeInsets.only(top: appBarHeight),
                    child: child,
                  );
                },
                child: WebViewWidget(controller: webViewController),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

补充说明 #

• 这种方法通过动态内边距让WebView内容始终避开SliverAppBar的区域，无需手动控制WebView的初始滚动位置，避免了平台差异带来的适配问题。
• 滚动联动逻辑保持不变，确保CustomScrollView和WebView的滚动状态同步。

内容的提问来源于stack exchange，提问作者Дмитрий Бобылев