分类导航

Flutter 发布时间：2022-05-03 发布网站：大佬教程 code.js-code.com

大佬教程收集整理的这篇文章主要介绍了Flutter 首页必用组件NestedScrollView，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。

Flutter 首页必用组件NestedScrollView

可以在其内部嵌套其他滚动视图的滚动视图，其滚动位置是固有链接的。

在普通的ScrollView中，如果有一个Sliver组件容纳了一个TabBarView，它沿相反的方向滚动（例如，允许用户在标签所代表的页面之间水平滑动，而列表则垂直滚动），则该TabBarView内部的任何列表都不会相互作用与外部ScrollView。例如，浏览内部列表以滚动到顶部不会导致外部ScrollView中的SliverAppBar折叠以展开。

滚动隐藏AppBar

比如实现如下场景，当列表滚动时，隐藏AppBar，用法如下：

nestedScrollView(
  headerSliverBuilder: (BuildContext context,bool innerBoxIsScrolled) {
    return <Widget>[SliverAppBar(
      title: Text('老孟'),)];
  },body: ListView.builder(itemBuilder: (BuildContext context,int indeX){
    return Container(
      height: 80,color: Colors.primaries[index % Colors.primaries.length],alignment: Alignment.center,child: Text(
        '$index',style: TextStyle(color: Colors.white,fontSize: 20),),);
  },itemCount: 20,)

效果如下：

Flutter 首页必用组件NestedScrollView

SliverAppBar展开折叠

用法如下：

nestedScrollView(
  headerSliverBuilder: (BuildContext context,bool innerBoxIsScrolled) {
    return <Widget>[SliverAppBar(
      expandedHeight: 230.0,pinned: true,flexibleSpace: FlexibleSpaceBar(
        title: Text('复仇者联盟'),BACkground: Image.network(
          'http://img.haote.com/upload/20180918/2018091815372344164.jpg',fit: BoxFit.fitHeight,)

效果如下：

Flutter 首页必用组件NestedScrollView

与TabBar配合使用

用法如下：

nestedScrollView(
  headerSliverBuilder: (BuildContext context,bool innerBoxIsScrolled) {
    return <Widget>[
      SliverAppBar(
        expandedHeight: 230.0,flexibleSpace: Padding(
          padding: EdgeInsets.symmetric(vertical: 8),child: PageView(),SliverPersistentHeader(
        pinned: true,delegate: StickyTabBarDelegate(
          child: TabBar(
            labelColor: Colors.black,controller: this._tabController,tabs: <Widget>[
              Tab(text: '资讯'),Tab(text: '技术'),],];
  },body: TabBarView(
    controller: this._tabController,children: <Widget>[
      refreshInDicator(
        onrefresh: (){
          print(('onrefresh'));
        },child: _buildTabNewsList(_newsKey,_newsList),_buildTabNewsList(_technologyKey,_technologyList),)

StickyTabBarDelegate 代码如下：

class StickyTabBarDelegate extends SliverPersistentHeaderDelegate {
  final TabBar child;

  StickyTabBarDelegate({@required this.chilD});

  @override
  Widget build(
      BuildContext context,double shrinkOffset,bool overlapsContent) {
    return Container(
      color: Theme.of(context).BACkgroundColor,child: this.child,);
  }

  @override
  double get maxExtent => this.child.preferredSize.height;

  @override
  double get minextent => this.child.preferredSize.height;

  @override
  bool shouldRebuild(SliverPersistentHeaderDelegate oldDelegatE) {
    return true;
  }
}

效果如下：

Flutter 首页必用组件NestedScrollView

其他属性

通过scrollDirection和reverse参数控制其滚动方向，用法如下：

nestedScrollView(
  scrollDirection: Axis.horizontal,reverse: true,...
)

scrollDirection滚动方向，分为垂直和水平方向。

reverse参数表示反转滚动方向，并不是由垂直转为水平，而是垂直方向滚动时，默认向下滚动，reverse设置false，滚动方向改为向上，同理水平滚动改为水平向左。

controller为滚动控制器，可以监听滚到的位置，设置滚动的位置等，用法如下：

_scrollController = ScrollController();

//监听滚动位置
    _scrollController.addListener((){
      print('${_scrollController.position}');
    });
    //滚动到指定位置
    _scrollController.animateTo(20.0);

CustomScrollView(
	controller: _scrollController,...
)

physics表示可滚动组件的物理滚动特性，具体查看ScrollPhysics