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

Koe*_*ren 5 flutter flutter-sliver flutter-layout

使用 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,
            ),
          ),
        ),
      ),
    );
  }
}
Run Code Online (Sandbox Code Playgroud)
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;
  }
}
Run Code Online (Sandbox Code Playgroud)

相关:

Flutter SliverAppBar 与 Tabs 覆盖内容

上面的链接不是解决方案而是临时修复

Has*_*jmi 0

physics将ScrollView 的行为 设置为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.
Run Code Online (Sandbox Code Playgroud)