flutter使用ExtendedNestedScrollView结合Tabar实现吸顶效果
Flutter是一种跨平台的移动应用开发框架，它允许开发者使用一套代码同时在Android和iOS上构建高质量的应用。Flutter提供了丰富的UI组件和动画效果，可以帮助开发者轻松实现吸顶效果。
为了实现吸顶效果，我们可以使用Flutter的ExtendedNestedScrollView组件结合TabBar组件。ExtendedNestedScrollView是一个可以实现类似于Android中的NestedScrollView的组件，它允许将多个滚动视图组合在一起，并实现各自的滚动效果。
首先，我们需要在pubspec.yaml文件中引入extended_nested_scroll_view和flutter_svg插件，用于实现ExtendedNestedScrollView和TabBar的效果。在dependencies中添加如下代码：
```
extended_nested_scroll_view: ^0.3.0
```
然后，在需要实现吸顶效果的页面中，导入所需的包：
```
import 'package:flutter/material.dart';
import 'package:flutter_svg/flutter_svg.dart';
import 'package:extended_nested_scroll_view/extended_nested_scroll_view.dart'
as extended;
```
接下来，我们可以使用ExtendedNestedScrollView组件来实现吸顶效果。ExtendedNestedScrollView组件有两个必需的参数：headerSliverBuilder和body。headerSliverBuilder用于构建吸顶的SliverAppBar，body用于构建滚动的视图。
下面是一个使用ExtendedNestedScrollView的例子：
```dart
class MyPage extends StatelessWidget
Widget build(BuildContext context)
return Scaffold
body: extended.NestedScrollView
headerSliverBuilder: (BuildContext context, bool innerBoxIsScrolled)
return <Widget>
SliverAppBar
title: Text('吸顶效果'),
floating: true,
pinned: true,
snap: true,
SliverPersistentHeader
delegate: _SliverAppBarDelegate
TabBar
tabs:
Tab
text: 'Item 1',
Tab
text: 'Item 2',
],
pinned: true,
];
},
body: TabBarView
children:
// 第一个Tab对应的布局
Container
child: Center
child: Text('Tab 1'),
flutter开发app
// 第二个Tab对应的布局
Container
child: Center
child: Text('Tab 2'),
],
}
class _SliverAppBarDelegate extends SliverPersistentHeaderDelegate
_SliverAppBarDelegate(this._tabBar);
final TabBar _tabBar;
double get minExtent => _tabBar.preferredSize.height;
double get maxExtent => _tabBar.preferredSize.height;
Widget build
BuildContext context, double shrinkOffset, bool overlapsContent)
return Container
color: Colors.white,
child: _tabBar,
}
bool shouldRebuild(_SliverAppBarDelegate oldDelegate)
return false;
}
```
在上面的例子中，我们使用SliverAppBar来实现标题栏的效果，并设置floating为true实现吸顶效果。然后，使用SliverPersistentHeader来创建一个TabBar，将其设置为pinned实现TabBar的吸顶效果。最后，使用TabBarView来切换不同的Tab所对应的布局。
综上所述，ExtendedNestedScrollView结合TabBar可以帮助我们轻松实现吸顶效果。我们可
以在headerSliverBuilder中使用SliverAppBar和SliverPersistentHeader来实现吸顶的效果，然后使用TabBarView来切换不同的Tab所对应的布局。这样，我们就能够在Flutter中实现吸顶效果了。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。