Flutter中SABT组件切换滚动方向时行为异常排查

问题根源 #

你将SABT组件放在SliverAppBar的title属性中，这里的上下文获取FlexibleSpaceBarSettings时，在滚动方向切换的瞬间会出现浮点精度误差或布局计算波动，导致currentExtent短暂大于minExtent，触发错误的组件切换逻辑。

修复方案1：基于expandedScale的稳定判断 #

修改SABT的状态监听逻辑，使用FlexibleSpaceBarSettings提供的expandedScale（归一化的折叠比例，0为完全折叠，1为完全展开），并加入微小阈值避免浮点误差：

class SABT extends StatefulWidget {
  final Widget firstChild;
  final Widget secondChild;

  const SABT({
    Key? key,
    required this.firstChild,
    required this.secondChild,
  }) : super(key: key);

  @override
  _SABTState createState() => _SABTState();
}

class _SABTState extends State<SABT> {
  ScrollPosition? _position;
  bool _visibleFirst = true;

  @override
  void dispose() {
    _position?.removeListener(_positionListener);
    super.dispose();
  }

  @override
  void didChangeDependencies() {
    super.didChangeDependencies();
    _position?.removeListener(_positionListener);
    _position = Scrollable.of(context)?.position;
    _position?.addListener(_positionListener);
    _positionListener();
  }

  void _positionListener() {
    final FlexibleSpaceBarSettings? settings =
        context.dependOnInheritedWidgetOfExactType<FlexibleSpaceBarSettings>();

    // 用expandedScale判断，0.01阈值处理浮点误差
    bool visibleFirst = settings == null || settings.expandedScale <= 0.01;

    if (_visibleFirst != visibleFirst) {
      setState(() => _visibleFirst = visibleFirst);
    }
  }

  @override
  Widget build(BuildContext context) {
    return _visibleFirst ? widget.firstChild : widget.secondChild;
  }
}

修复方案2：直接通过滚动偏移判断（更稳定） #

如果方案1仍有波动，可以不依赖FlexibleSpaceBarSettings，直接计算滚动偏移是否达到折叠阈值：

import 'package:flutter/material.dart';

class SABT extends StatefulWidget {
  final Widget firstChild;
  final Widget secondChild;
  final double expandedHeight;
  final double minExtent;

  const SABT({
    Key? key,
    required this.firstChild,
    required this.secondChild,
    required this.expandedHeight,
    this.minExtent = kToolbarHeight,
  }) : super(key: key);

  @override
  _SABTState createState() => _SABTState();
}

class _SABTState extends State<SABT> {
  ScrollPosition? _position;
  bool _visibleFirst = true;

  @override
  void dispose() {
    _position?.removeListener(_positionListener);
    super.dispose();
  }

  @override
  void didChangeDependencies() {
    super.didChangeDependencies();
    _position?.removeListener(_positionListener);
    _position = Scrollable.of(context)?.position;
    _position?.addListener(_positionListener);
    _positionListener();
  }

  void _positionListener() {
    if (_position == null) return;

    // 计算折叠阈值：滚动偏移 >= 展开高度 - 最小高度时，处于折叠状态
    final foldThreshold = widget.expandedHeight - widget.minExtent;
    bool visibleFirst = _position!.pixels >= foldThreshold - 1;

    if (_visibleFirst != visibleFirst) {
      setState(() => _visibleFirst = visibleFirst);
    }
  }

  @override
  Widget build(BuildContext context) {
    return _visibleFirst ? widget.firstChild : widget.secondChild;
  }
}

对应的SliverAppBar调用需要传入expandedHeight：

SliverAppBar(
  pinned: true,
  elevation: 0,
  stretch: true,
  expandedHeight: 500,
  title: SABT(
    firstChild: Text("first title"),
    secondChild: Text("second title"),
    expandedHeight: 500,
  ),
  flexibleSpace: FlexibleSpaceBar(
    background: Container(color: Colors.purple),
  ),
),

关键优化点 #

• 用归一化的expandedScale或直接滚动偏移判断，避免currentExtent的浮点精度问题
• 加入微小阈值（0.01或1像素），过滤滚动方向切换时的临时波动
• 简化UI构建逻辑，去掉冗余的Visibility嵌套

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