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

问题描述 投票:2回答:1

使用条子和条子应用栏时滚动出现问题。当视频中不需要滚动时,如何防止滚动视图滚动。并且如果有足够的滚动项目,则可以滚动(效果很好)

我关注了这篇中等职位。您可以看到他有同样的问题。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个回答
0
投票

https://gist.github.com/iRbouh/219a81b3f2e32c3ef725972b45627f2e

这可能会解决您的问题,而不是我的解决方案

© www.soinside.com 2019 - 2024. All rights reserved.