Flutter SliverPersistentHeader 导致“滚动时底部溢出”

Posted 2023-02-23

【中文标题】Flutter SliverPersistentHeader 导致“滚动时底部溢出”

【英文标题】：Flutter SliverPersistentHeader is causing "bottom overflow when scroll"

【发布时间】：2020-05-23 19:56:05

【问题描述】：

我有一个SliverPersistentHeader，当用户滚动屏幕时会导致bottom overflowed。

我该如何解决？

    return CustomScrollView(
      slivers: <Widget>[
        SliverPersistentHeader(
          pinned: false,
          delegate: DynamicSliverHeaderDelegate(
            maxHeight: 256,
            minHeight: 186,
            child: Column(
              mainAxisAlignment: MainAxisAlignment.start,
              crossAxisAlignment: CrossAxisAlignment.start,
              children: <Widget>[
                _topo(context, grupo),
                _infoGrupo(context, grupo),
              ],
            ),
          ),
        ),

        // TODO: Lista do grupo 
        SliverFillViewport(
          delegate: SliverChildListDelegate(
            [
              Container(
                padding: EdgeInsets.only(top: 100),
                color: Colors.green.withOpacity(0.2),
                child: Column(
                  children: <Widget>[
                    Text('TODO... A construir'),
                  ],
                ),
              ),
            ],
          ),
        ),
      ],
    );

// .....

class DynamicSliverHeaderDelegate extends SliverPersistentHeaderDelegate 
  final Widget child;
  final double maxHeight;
  final double minHeight;

  const DynamicSliverHeaderDelegate(
    @required this.child,
    this.maxHeight = 250,
    this.minHeight = 80,
  );

  @override
  Widget build(
      BuildContext context, double shrinkOffset, bool overlapsContent) 
    return child;
  

  // @override
  // bool shouldRebuild(DynamicSliverHeaderDelegate oldDelegate) => true;

  @override
  bool shouldRebuild(DynamicSliverHeaderDelegate oldDelegate) 
    return maxHeight != oldDelegate.maxHeight ||
        minHeight != oldDelegate.minHeight ||
        child != oldDelegate.child;
  

  @override
  double get maxExtent => maxHeight;

  @override
  double get minExtent => minHeight;

【参考方案1】：

通过使用SingleChildScrollView´ withNeverScrollableScrollPhysics` physics 包装 DynamicSliverHeaderDelegate 列子级来解决此问题。

return CustomScrollView(
  slivers: <Widget>[
    SliverPersistentHeader(
      pinned: false,
      delegate: DynamicSliverHeaderDelegate(
        maxHeight: 256,
        minHeight: 186,
        child: Column(
          mainAxisAlignment: MainAxisAlignment.start,
          crossAxisAlignment: CrossAxisAlignment.start,
          children: <Widget>[
            _topo(context, grupo),
            _infoGrupo(context, grupo),
          ],
        ),
      ),
    ),
    // TODO: Lista do grupo 
    // ...
  ],
);

【讨论】：

抱歉，您能更新一下您的代码吗？它丢失并且没有显示最终结果-谢谢！

@romaneso 作者解释了解决方案。明确地说，我用我的答案中的修复更新了代码。

【参考方案2】：

完整的解决方法是：

 return CustomScrollView(
      slivers: <Widget>[
        SliverPersistentHeader(
          pinned: false,
          delegate: DynamicSliverHeaderDelegate(
            maxHeight: 256,
            minHeight: 186,
            child: SingleChildScrollView(
              physics: const NeverScrollableScrollPhysics(),
              child: Column(
                mainAxisAlignment: MainAxisAlignment.start,
                crossAxisAlignment: CrossAxisAlignment.start,
                children: <Widget>[
                  _topo(context, grupo),
                  _infoGrupo(context, grupo),
                ],
              ),
            ),
          ),
        ),
        // TODO: Lista do grupo
        // ...
      ],
    );