【问题标题】:Flutter CustomScrollView scrolls when there are not enough itemsFlutter CustomScrollView 在没有足够项目时滚动
【发布时间】:2023-04-05 16:28:02
【问题描述】:

在使用 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

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

【问题讨论】:

    标签: flutter flutter-layout flutter-sliver


    【解决方案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.
    

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 2021-11-07
      • 2022-12-28
      • 2021-08-24
      • 2021-11-15
      • 1970-01-01
      • 2020-04-25
      • 2019-06-21
      • 1970-01-01
      相关资源
      最近更新 更多