Flutter CustomScrollView 在没有足够项目时滚动

Posted 2023-02-23

【中文标题】Flutter CustomScrollView 在没有足够项目时滚动

【英文标题】：Flutter CustomScrollView scrolls when there are not enough items

【发布时间】：2019-12-13 17:09:52

【问题描述】：

在使用 slivers 和 sliver appbar 时出现滚动问题。当不需要像视频中那样滚动时，如何防止滚动视图滚动。如果有足够的项目滚动它应该滚动（完美）

我关注了这篇中等帖子。你可以看到他也有同样的问题。 https://medium.com/@diegoveloper/flutter-collapsing-toolbar-sliver-app-bar-14b858e87abe

https://youtu.be/l1EwM9GAfxw

class HomeScreen extends StatelessWidget
  @override
  Widget build(BuildContext context) 
    return Scaffold(
      body: NestedScrollView(
        headerSliverBuilder: (context, innerBoxIsScrolled) => [
          SliverAppBar(
            brightness: Brightness.dark,
            backgroundColor: Colors.amber.withOpacity(0.5),
            expandedHeight: 166,
            flexibleSpace: FlexibleSpaceBar(
              collapseMode: CollapseMode.pin,
              background: SafeArea(
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    Container(
                      height: 80,
                      width: 80,
                      child: Placeholder(),
                    ),
                    Row(
                      children: [
                        Text(
                          'sdalkf',
                        ),
                      ],
                    ),
                  ],
                ),
              ),
            ),
          ),
          SliverPersistentHeader(
            delegate: SliverAppBarDelegate(
              MediaQuery.of(context).padding.top,
              Container(
                color: Colors.amber.withOpacity(0.5),
                child: SafeArea(
                  bottom: false,
                  child: Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      Text('sdfaklladsjfkladslkf\nsadjflkasjklfs\nsdkjlfjlkadslfjk'),
                    ],
                  ),
                ),
              ),
            ),
            pinned: true,
          ),
        ],
        body: GridView.builder(
          itemCount: 3,
          padding: EdgeInsets.zero,
          gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 3, childAspectRatio: 0.68),
          itemBuilder: (context, index) => Padding(
            padding: const EdgeInsets.symmetric(horizontal: 8),
            child: Container(
              color: Colors.black54,
            ),
          ),
        ),
      ),
    );
  

class SliverAppBarDelegate extends SliverPersistentHeaderDelegate 
  final Widget child;
  final double topSafeArea;

  _SliverAppBarDelegate(this.topSafeArea, this.child);

  @override
  double get minExtent => 105 + topSafeArea;

  @override
  double get maxExtent => 105 + topSafeArea;

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

  @override
  bool shouldRebuild(_SliverAppBarDelegate oldDelegate) 
    return false;
  

相关：

Flutter SliverAppBar with Tabs overlays content

以上链接不是解决方案，而是临时修复

【参考方案1】：

将滚动视图的physics行为设置为AlwaysScrollableScrollPhysics

来自文档：

/// Scroll physics that always lets the user scroll.
///
/// This overrides the default behavior which is to disable scrolling
/// when there is no content to scroll. It does not override the
/// handling of overscrolling.