flutter sliver 多种滚动组合开发指南
视频https://youtu.be/4mho1kZ_YQU
https://www.bilibili.com/video/BV1WW4y1d7ZC/
前言有不少同学工作中遇到须要把几个不同滚动行为组件(顶部 appBar、内容固定块、tabBar 切换、tabBarView视图、自适应高度、横向滚动)黏贴成一个组件。
这时候就须要 sliver 出场了,本文将会写一个多种滚动的组合。
业务场景剖析上面是淘宝、小红书的常见状况。
原文 https://ducafecat.com/blog/flutter-sliver-scroll知识点 sliverSliver 是 Flutter 中用于构建可滚动视图的根本构建块之一。Sliver 是可滚动区域中的一小部分,具备固定的大小和地位,能够依据须要动静加载和卸载。Sliver 通常用于创立高性能、高度灵便的可滚动视图,例如列表、网格、瀑布流等。
在 Flutter 中,有许多不同类型的 Sliver 组件,每个组件都有特定的作用和用处。上面是一些常见的 Sliver 组件:
SliverAppBar:一个带有滚动成果的利用栏,能够在向上滚动时暗藏,并在向下滚动时显示。SliverList:将子组件搁置在一个垂直列表中,能够依据须要动静加载和卸载列表项。SliverGrid:将子组件搁置在一个网格中,能够依据须要动静加载和卸载网格项。SliverPadding:为子组件提供填充,以使它们与其余 Sliver 组件的大小和地位保持一致。SliverToBoxAdapter:将一个一般的组件包装成一个 Sliver 组件,以便将其搁置在 CustomScrollView 中。参考步骤第一步:Sliver 横向滚动lib/page.dart
Widget _mainView() { return CustomScrollView( slivers: [ // 横向滚动 SliverToBoxAdapter( child: SizedBox( height: 100, child: PageView( children: [ Container( color: Colors.yellow, child: const Center(child: Text('横向滚动')), ), Container(color: Colors.green), Container(color: Colors.blue), ], ), ), ), ...SliverToBoxAdapter 进行包装能力 slivers 应用。 @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar(title: const Text('Sliver Scroll')), body: _mainView(), ); }第二步:固定高度的 tabView return CustomScrollView( slivers: [ ... // 固定高度内容 SliverToBoxAdapter( child: Container( height: 200, color: Colors.greenAccent, child: const Center(child: Text('固定高度内容')), ), ), // tabView 内容 SliverToBoxAdapter( child: DefaultTabController( length: 3, child: Column( children: [ const TabBar( tabs: [ Tab(text: 'Tab 1'), Tab(text: 'Tab 2'), Tab(text: 'Tab 3'), ], ), SizedBox( height: 200, child: TabBarView( children: [ Container(color: Colors.yellow), Container(color: Colors.green), Container(color: Colors.blue), ], ), ), ], ), ), ),外层嵌套 DefaultTabController ,能力让 TabBar、TabBarView 顺利工作。第三步:自适应高度的 tabView实现 SliverPersistentHeaderDelegate 抽象类
...