快捷導(dǎo)航

Flutter 首頁(yè)必用組件NestedScrollView的示例詳解

更新時(shí)間：2020年05月08日 08:41:01 作者：老孟Flutter

今天介紹的組件是NestedScrollView，大部分的App首頁(yè)都會(huì)用到這個(gè)組件。對(duì)Flutter 首頁(yè)必用組件NestedScrollView的相關(guān)知識(shí)感興趣的一起看看吧

昨天Flutter 1.17版本重磅發(fā)布，新的版本主要是優(yōu)化性能、修復(fù)bug，有人覺(jué)得此版本毫無(wú)亮點(diǎn)，但也從另一方面體現(xiàn)了Flutter目前針對(duì)移動(dòng)端已經(jīng)較為完善，想了解具體內(nèi)容，文末有鏈接，如果你想升級(jí)到最新版本，建議慎重，有些人升級(jí)后項(xiàng)目無(wú)法運(yùn)行。

今天介紹的組件是NestedScrollView，大部分的App首頁(yè)都會(huì)用到這個(gè)組件。

可以在其內(nèi)部嵌套其他滾動(dòng)視圖的滾動(dòng)視圖，其滾動(dòng)位置是固有鏈接的。

在普通的ScrollView中，如果有一個(gè)Sliver組件容納了一個(gè)TabBarView，它沿相反的方向滾動(dòng)（例如，允許用戶(hù)在標(biāo)簽所代表的頁(yè)面之間水平滑動(dòng)，而列表則垂直滾動(dòng)），則該TabBarView內(nèi)部的任何列表都不會(huì)相互作用與外部ScrollView。例如，瀏覽內(nèi)部列表以滾動(dòng)到頂部不會(huì)導(dǎo)致外部ScrollView中的SliverAppBar折疊以展開(kāi)。

滾動(dòng)隱藏AppBar

比如實(shí)現(xiàn)如下場(chǎng)景，當(dāng)列表滾動(dòng)時(shí)，隱藏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,),
)

效果如下：

SliverAppBar展開(kāi)折疊

用法如下：

NestedScrollView(
 headerSliverBuilder: (BuildContext context, bool innerBoxIsScrolled) {
  return <Widget>[SliverAppBar(
   expandedHeight: 230.0,
   pinned: true,
   flexibleSpace: FlexibleSpaceBar(
    title: Text('復(fù)仇者聯(lián)盟'),
    background: Image.network(
     'http://img.haote.com/upload/20180918/2018091815372344164.jpg',
     fit: BoxFit.fitHeight,
    ),
   ),
  )];
 },
 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,),
)

效果如下：

與TabBar配合使用

用法如下：

NestedScrollView(
 headerSliverBuilder: (BuildContext context, bool innerBoxIsScrolled) {
  return <Widget>[
   SliverAppBar(
    expandedHeight: 230.0,
    pinned: true,
    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: '技術(shù)'),
      ],
     ),
    ),
   ),
  ];
 },
 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;
 }
}

效果如下：

其他屬性

通過(guò)scrollDirection和reverse參數(shù)控制其滾動(dòng)方向，用法如下：

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

scrollDirection滾動(dòng)方向，分為垂直和水平方向。

reverse參數(shù)表示反轉(zhuǎn)滾動(dòng)方向，并不是由垂直轉(zhuǎn)為水平，而是垂直方向滾動(dòng)時(shí)，默認(rèn)向下滾動(dòng)，reverse設(shè)置false，滾動(dòng)方向改為向上，同理水平滾動(dòng)改為水平向左。

controller為滾動(dòng)控制器，可以監(jiān)聽(tīng)滾到的位置，設(shè)置滾動(dòng)的位置等，用法如下：

_scrollController = ScrollController();

//監(jiān)聽(tīng)滾動(dòng)位置
  _scrollController.addListener((){
   print('${_scrollController.position}');
  });
  //滾動(dòng)到指定位置
  _scrollController.animateTo(20.0);

CustomScrollView(
	controller: _scrollController,
	...
)

physics表示可滾動(dòng)組件的物理滾動(dòng)特性，具體查看ScrollPhysics

交流

Flutter博客地址（近200個(gè)控件用法）：http://laomengit.com

總結(jié)

到此這篇關(guān)于Flutter 首頁(yè)必用組件NestedScrollView的文章就介紹到這了,更多相關(guān)Flutter 首頁(yè)必用組件NestedScrollView內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: