flutter用NestedScrollView的項(xiàng)目必須知道的坑

時(shí)間：2019年06月04日17:09:41

作者：CrazyQ1

轉(zhuǎn)載請(qǐng)注名

本人來(lái)自：http://www.flutterj.com/

做企業(yè)項(xiàng)目遇到了個(gè)坑，

那這個(gè)坑是怎么遇到的呢诗力，剛開(kāi)始是已經(jīng)做好了商品詳情頁(yè)：

詳情頁(yè)面用的是NestedScrollView組件，輪播圖那一塊用的是SliverAppBar膜廊，

也就是寫在NestedScrollView的頭部，然后下面的都是在身體部分了淫茵，

身體部分是可以滑動(dòng)的爪瓜，剛開(kāi)始是沒(méi)任何問(wèn)題，正吵妆瘢滑動(dòng)運(yùn)行铆铆，

但是來(lái)了這個(gè)需求：

是在商品詳情加個(gè)tabbar，然后我就加在SliverAppBar里面的bottom內(nèi)個(gè)丹喻，

加上去顯示也是沒(méi)什么問(wèn)題薄货，但是錨點(diǎn)這個(gè)需求實(shí)現(xiàn)的時(shí)候就來(lái)了問(wèn)題了。

大家都知道碍论，想要錨點(diǎn)(jumpTo到指定位置)谅猾，嘚讓他的body也加個(gè)控制器啊，

然后我就把之前給的滾動(dòng)組件

new SingleChildScrollView(

? child: new Column(children: widget.widgets),

);

改成了

new ListView(children: widget.widgets);

雖然SingleChildScrollView也是可以加控制器并且jumpTo的鳍悠，

但是我感覺(jué)用ListView比較舒服税娜，代碼也比較簡(jiǎn)潔，所以就用這個(gè)藏研，

但是用哪個(gè)實(shí)現(xiàn)的效果都是差不多的敬矩。

然鵝

驚人的一幕就出現(xiàn)了。

NestedScrollView的頭部?jī)?nèi)容完全固定蠢挡，滑動(dòng)body部分是不能控制到頭部的弧岳，

但是滑動(dòng)頭部就是可以控制頭部，

也就是頭部和身體部分分開(kāi)了袒哥。

這是為什么呢缩筛？

因?yàn)镹estedScrollView是有內(nèi)外兩個(gè)控制器的:

out控制header，inner控制body堡称。只有當(dāng)out不能滾動(dòng)了才會(huì)滾動(dòng)inner

body不寫控制器就沒(méi)事,寫了就出現(xiàn)這種情況瞎抛，

而且我去測(cè)試了下打印控制器最大滾動(dòng)位置發(fā)現(xiàn)只有300左右，

也就是只能打印出頭部的却紧，

print(_C.position.maxScrollExtent);

那我要怎么去實(shí)現(xiàn)這個(gè)功能啊桐臊，只能在輪播圖內(nèi)跳來(lái)跳去，

難道是貧窮限制了我的想象嗎晓殊？

頭部固定解決方案：（不是唯一的）

既然都說(shuō)了是有內(nèi)外兩個(gè)控制器那我們一定有辦法來(lái)獲取并使用他的內(nèi)部控制器断凶，

第一步：（嘗試封裝body為有狀態(tài)類來(lái)從context中取到內(nèi)控制器）

@override

? Widget build(BuildContext context) {

? ? return new Scaffold(

? ? ? body: new NestedScrollView(

? ? ? ? ? controller: _ctl,

? ? ? ? ? headerSliverBuilder: _sliverBuilder,

? ? ? ? ? body: new BodyView(widget.widgets, type)),

? ? );

? }

BodyView就是我們封裝的，

class BodyView extends StatefulWidget {

? final List<Widget> widgets;

? final int type;

? BodyView(this.widgets, this.type);

? @override

? _BodyViewState createState() => _BodyViewState();

}

class _BodyViewState extends State<BodyView> {

? @override

? Widget build(BuildContext context) {

? ? return new SingleChildScrollView(

? ? ? child: new Column(children: widget.widgets),

? ? );

? }

}

第二步：（type是干啥的先不用管）

class BodyView extends StatefulWidget {

? ...

}

class _BodyViewState extends State<BodyView> {

? Type typeOf<T>() => T;

? ScrollController _innerC;

? @override

? void initState() {

? ? super.initState();

? ? PrimaryScrollController primaryScrollController =

? ? ? ? context.ancestorWidgetOfExactType(typeOf<PrimaryScrollController>());

? ? _innerC = primaryScrollController.controller;

? }

? @override

? Widget build(BuildContext context) {

? ? ...

? }

}

我們定義了一個(gè)類型和控制器巫俺，然后再初始化的時(shí)候?qū)懥艘粋€(gè)主控制器认烁，

主控制器的值是從上下文的父類取的類型，然后typeOf的泛型就是我們寫的

主控制器，那么內(nèi)控制器就是等于我們?nèi)〉降倪@個(gè)控制器却嗡，

頭部固定問(wèn)題就完美解決了

只要能取到舶沛，就算不用也是可以的

當(dāng)然也可以直接使用:

@override

Widget build(BuildContext context) {

? _actions(widget.type);

? return PrimaryScrollController(controller: _innerC, child: new SingleChildScrollView(

? ? child: new Column(children: widget.widgets),

? ));

}

這個(gè)都無(wú)所謂的。

但是我們發(fā)現(xiàn)兩個(gè)控制器開(kāi)始分開(kāi)的窗价，打印外控制器最大滾動(dòng)還是300左右梭伐，

但是打印內(nèi)控制器最大滾動(dòng)位置是body的全部梭稚，2k左右，

那么我這個(gè)需求還有沒(méi)有解決方案了？

當(dāng)然是有的：

點(diǎn)擊錨點(diǎn)跳轉(zhuǎn)解決方案

第一步（直接使用外部控制器jumpTo）

@override

void initState() {

? super.initState();

? tabs = ['商品', '評(píng)價(jià)', '詳情'];

? _tabC = new TabController(length: tabs.length, vsync: this);

? _tabC.addListener(() => _onTabChanged());

}

_onTabChanged() {

? setState(() {

? ? switch (_tabC.index) {

? ? ? case 0:

? ? ? ? _ctl.jumpTo(0.1);

? ? ? ? type = 0;

? ? ? ? break;

? ? ? case 1:

? ? ? ? type = 1;

? ? ? ? break;

? ? ? case 2:

? ? ? ? type = 2;

? ? ? ? break;

? ? }

? });

}

_tabC就是外部控制器朴沿，在初始化的時(shí)候監(jiān)聽(tīng)tabbar是否被點(diǎn)擊烁挟，

如果被點(diǎn)擊的話直接寫個(gè)tab改變的方法愚隧，tabbar的三個(gè)Bar分別是0个少，1，2否灾，

所以我們也接收一個(gè)0卖擅，1，2墨技，來(lái)處理惩阶，

然后直接給它jumpTo跳轉(zhuǎn)，然后那個(gè)type就是我們的BodyView接收的

具體有什么用呢扣汪？

class BodyView extends StatefulWidget {

...

}

class _BodyViewState extends State<BodyView> {

? ...

? _actions(int type) {

? ? setState(() {

? ? ? _binding.addPostFrameCallback((callback) {

? ? ? ? switch (type) {

? ? ? ? ? case 1:

? ? ? ? ? ? _innerC.jumpTo(1000);

? ? ? ? ? ? print(_innerC.position.maxScrollExtent);

? ? ? ? ? ? break;

? ? ? ? ? case 2:

? ? ? ? ? ? _innerC.jumpTo(2000);

? ? ? ? ? ? break;

? ? ? ? }

? ? ? });

? ? });

? }

? @override

? void initState() {

? ? ...

? }

? @override

? Widget build(BuildContext context) {

? ? _actions(widget.type);

? ? ...

? }

}

我們可以看到断楷，這邊也是監(jiān)聽(tīng)接收的int類型，

如果監(jiān)聽(tīng)到傳過(guò)來(lái)的是0的話就調(diào)到我們的頂部崭别，（heard控制器控制）

如果監(jiān)聽(tīng)到傳過(guò)來(lái)的是1的話就調(diào)到我們想要到的評(píng)論的位置冬筒。

如果監(jiān)聽(tīng)到傳過(guò)來(lái)的是2的話就跳到我們想要的商品詳情的位置。

Position為null的解決方案

當(dāng)我以為這樣就沒(méi)問(wèn)題的時(shí)候發(fā)現(xiàn)又出現(xiàn)了一個(gè)錯(cuò)誤茅主，

真的是坑一個(gè)接著一個(gè)啊舞痰，

解決方案為：

調(diào)用第一幀繪制完畢之后再執(zhí)行jumpTo

具體：

class BodyView extends StatefulWidget {

? ? ...

}

class _BodyViewState extends State<BodyView> {

? WidgetsBinding _binding = WidgetsBinding.instance;

? _actions(int type) {

? ? setState(() {

? ? ? _binding.addPostFrameCallback((callback) {

? ? ? ? ...

? ? });

? }

}

我們寫了一個(gè)小部件綁定的東西，讓他能監(jiān)聽(tīng)第一幀是否繪制完畢诀姚，

繪制完畢之后再執(zhí)行jumpTo

這樣就只差獲取評(píng)論和商品詳情的組件位置然后傳入具體的Offset就完美執(zhí)行了响牛，

因?yàn)闀r(shí)間關(guān)系就到這了，任何問(wèn)題可以加我微信：zonggeyl_com來(lái)問(wèn)我赫段。

接下來(lái)我把我這個(gè)文件的整體代碼發(fā)出來(lái)呀打，能看的懂的可以看一下，

直接運(yùn)行肯定是不能運(yùn)行的糯笙，因?yàn)槔锩嬲{(diào)用的資源文件和封裝你們都沒(méi)有贬丛，

要懂查看和使用，

import 'package:flutter/material.dart';

class SliverAppBarPage extends StatefulWidget {

? SliverAppBarPage({

? ? this.widgets,

? ? this.headerView,

? ? this.height = 200,

? ? this.background,

? });

? final List<Widget> widgets;

? final Widget headerView;

? final Widget background;

? final double height;

? @override

? State<StatefulWidget> createState() => new SliverAppBarPageState();

}

class SliverAppBarPageState extends State<SliverAppBarPage>

? ? with TickerProviderStateMixin {

? TabController _tabC;

? ScrollController _ctl = new ScrollController();

? int type;

? List tabs;

? WidgetsBinding _binding = WidgetsBinding.instance;

? @override

? void initState() {

? ? super.initState();

? ? tabs = ['商品', '評(píng)價(jià)', '詳情'];

? ? _tabC = new TabController(length: tabs.length, vsync: this);

? ? _tabC.addListener(() => _onTabChanged());

? }

? _onTabChanged() {

? ? setState(() {

? ? ? switch (_tabC.index) {

? ? ? ? case 0:

? ? ? ? ? _binding.addPostFrameCallback((callback) => _ctl.jumpTo(0.1));

? ? ? ? ? type = 0;

? ? ? ? ? break;

? ? ? ? case 1:

? ? ? ? ? type = 1;

? ? ? ? ? break;

? ? ? ? case 2:

? ? ? ? ? type = 2;

? ? ? ? ? break;

? ? ? }

? ? });

? }

? List<Widget> _sliverBuilder(BuildContext context, bool innerBoxIsScrolled) {

? ? return <Widget>[

? ? ? new SliverAppBar(

? ? ? ? centerTitle: true,

? ? ? ? expandedHeight: widget.height,

? ? ? ? floating: false,

? ? ? ? pinned: true,

? ? ? ? backgroundColor: Colors.white,

? ? ? ? elevation: 0,

? ? ? ? brightness: Brightness.light,

? ? ? ? leading: new InkWell(

? ? ? ? ? child: innerBoxIsScrolled

? ? ? ? ? ? ? ? new Container(

? ? ? ? ? ? ? ? ? width: 15,

? ? ? ? ? ? ? ? ? height: 20.0,

? ? ? ? ? ? ? ? ? child: new Image.asset('assets/images/nav_ic_back.webp',

? ? ? ? ? ? ? ? ? ? ? color: innerBoxIsScrolled ? mainFontColor : Colors.white),

? ? ? ? ? ? ? ? )

? ? ? ? ? ? ? : new Container(

? ? ? ? ? ? ? ? ? padding: EdgeInsets.only(left: 10.0),

? ? ? ? ? ? ? ? ? alignment: Alignment.center,

? ? ? ? ? ? ? ? ? child: new Container(

? ? ? ? ? ? ? ? ? ? height: 35,

? ? ? ? ? ? ? ? ? ? width: 35,

? ? ? ? ? ? ? ? ? ? decoration: BoxDecoration(

? ? ? ? ? ? ? ? ? ? ? ? color: Color.fromRGBO(0, 0, 0, 0.2),

? ? ? ? ? ? ? ? ? ? ? ? borderRadius: BorderRadius.circular(17.5)),

? ? ? ? ? ? ? ? ? ? child: new Image.asset('assets/images/nav_ic_back.webp',

? ? ? ? ? ? ? ? ? ? ? ? color:

? ? ? ? ? ? ? ? ? ? ? ? ? ? innerBoxIsScrolled ? mainFontColor : Colors.white),

? ? ? ? ? ? ? ? ? ),

? ? ? ? ? ? ? ? ),

? ? ? ? ? onTap: () => Navigator.pop(context),

? ? ? ? ),

? ? ? ? title: new Text(

? ? ? ? ? innerBoxIsScrolled ? '商品詳情' : '',

? ? ? ? ? style: TextStyle(color: Color(0xff000000), fontSize: 19.0),

? ? ? ? ),

? ? ? ? bottom: innerBoxIsScrolled

? ? ? ? ? ? ? new PreferredSize(

? ? ? ? ? ? ? ? child: new Container(

? ? ? ? ? ? ? ? ? padding: EdgeInsets.symmetric(horizontal: 80.0),

? ? ? ? ? ? ? ? ? child: new TabBar(

? ? ? ? ? ? ? ? ? ? ? controller: _tabC,

? ? ? ? ? ? ? ? ? ? ? indicatorSize: TabBarIndicatorSize.label,

? ? ? ? ? ? ? ? ? ? ? labelColor: Color(0xffFF4F73),

? ? ? ? ? ? ? ? ? ? ? indicatorColor: Color(0xffFF4F73),

? ? ? ? ? ? ? ? ? ? ? unselectedLabelColor: Color(0xff000000),

? ? ? ? ? ? ? ? ? ? ? labelStyle: new TextStyle(fontSize: 14.0),

? ? ? ? ? ? ? ? ? ? ? labelPadding: EdgeInsets.only(bottom: 20),

? ? ? ? ? ? ? ? ? ? ? indicatorPadding: EdgeInsets.only(

? ? ? ? ? ? ? ? ? ? ? ? ? bottom: 15, top: 10, left: 5, right: 5.0),

? ? ? ? ? ? ? ? ? ? ? tabs: tabs.map((item) => new Text('$item')).toList()),

? ? ? ? ? ? ? ? ),

? ? ? ? ? ? ? ? preferredSize: Size(30, 50))

? ? ? ? ? ? : null,

? ? ? ? actions: <Widget>[],

? ? ? ? flexibleSpace: new FlexibleSpaceBar(

? ? ? ? ? ? centerTitle: true,

? ? ? ? ? ? title: widget.headerView,

? ? ? ? ? ? background: widget.background),

? ? ? ),

? ? ];

? }

? @override

? Widget build(BuildContext context) {

? ? return new Scaffold(

? ? ? body: new NestedScrollView(

? ? ? ? ? controller: _ctl,

? ? ? ? ? headerSliverBuilder: _sliverBuilder,

//? ? ? ? body: new SingleChildScrollView(

//? ? ? ? ? controller: _ctl,

//? ? ? ? ? ? child: new Column(children: widget.widgets)),

//? ? ? ),

? ? ? ? ? body: new BodyView(widget.widgets, type)),

? ? );

? }

}

class BodyView extends StatefulWidget {

? final List<Widget> widgets;

? final int type;

? BodyView(this.widgets, this.type);

? @override

? _BodyViewState createState() => _BodyViewState();

}

class _BodyViewState extends State<BodyView> {

? Type typeOf<T>() => T;

? ScrollController _innerC;

? WidgetsBinding _binding = WidgetsBinding.instance;

? _actions(int type) {

? ? setState(() {

? ? ? _binding.addPostFrameCallback((callback) {

? ? ? ? switch (type) {

? ? ? ? ? case 1:

? ? ? ? ? ? _innerC.jumpTo(1000);

? ? ? ? ? ? print(_innerC.position.maxScrollExtent);

? ? ? ? ? ? break;

? ? ? ? ? case 2:

? ? ? ? ? ? _innerC.jumpTo(2000);

? ? ? ? ? ? break;

? ? ? ? }

? ? ? });

? ? });

? }

? @override

? void initState() {

? ? super.initState();

? ? PrimaryScrollController primaryScrollController =

? ? ? ? context.ancestorWidgetOfExactType(typeOf<PrimaryScrollController>());

? ? _innerC = primaryScrollController.controller;

? }

? @override

? Widget build(BuildContext context) {

? ? _actions(widget.type);

? ? return new SingleChildScrollView(

? ? ? child: new Column(children: widget.widgets),

? ? );

? }

}

關(guān)注公眾號(hào)“Flutter前線”给涕，各種Flutter項(xiàng)目實(shí)戰(zhàn)經(jīng)驗(yàn)技巧豺憔，干活知識(shí)额获，F(xiàn)lutter面試題答案，等你來(lái)領(lǐng)取焕阿。

最后編輯于：2019.12.09 23:49:19

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者

人面猴
序言：七十年代末咪啡，一起剝皮案震驚了整個(gè)濱河市首启，隨后出現(xiàn)的幾起案子暮屡，更是在濱河造成了極大的恐慌，老刑警劉巖毅桃，帶你破解...
沈念sama閱讀 207,113評(píng)論 6贊 481
死咒
序言：濱河連續(xù)發(fā)生了三起死亡事件褒纲，死亡現(xiàn)場(chǎng)離奇詭異，居然都是意外死亡钥飞，警方通過(guò)查閱死者的電腦和手機(jī)莺掠，發(fā)現(xiàn)死者居然都...
沈念sama閱讀 88,644評(píng)論 2贊 381
救了他兩次的神仙讓他今天三更去死
文/潘曉璐我一進(jìn)店門，熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái)读宙，“玉大人彻秆，你說(shuō)我怎么就攤上這事〗嵴ⅲ” “怎么了唇兑？”我有些...
開(kāi)封第一講書人閱讀 153,340評(píng)論 0贊 344
道士緝兇錄：失蹤的賣姜人
文/不壞的土叔我叫張陵，是天一觀的道長(zhǎng)桦锄。經(jīng)常有香客問(wèn)我扎附，道長(zhǎng)，這世上最難降的妖魔是什么结耀？我笑而不...
開(kāi)封第一講書人閱讀 55,449評(píng)論 1贊 279
?港島之戀（遺憾婚禮）
正文為了忘掉前任留夜，我火速辦了婚禮，結(jié)果婚禮上图甜，老公的妹妹穿的比我還像新娘碍粥。我一直安慰自己，他們只是感情好黑毅，可當(dāng)我...
茶點(diǎn)故事閱讀 64,445評(píng)論 5贊 374
惡毒庶女頂嫁案：這布局不是一般人想出來(lái)的
文/花漫我一把揭開(kāi)白布嚼摩。她就那樣靜靜地躺著，像睡著了一般博肋。火紅的嫁衣襯著肌膚如雪低斋。梳的紋絲不亂的頭發(fā)上，一...
開(kāi)封第一講書人閱讀 49,166評(píng)論 1贊 284
城市分裂傳說(shuō)
那天匪凡，我揣著相機(jī)與錄音膊畴，去河邊找鬼。笑死病游，一個(gè)胖子當(dāng)著我的面吹牛唇跨，可吹牛的內(nèi)容都是我干的稠通。我是一名探鬼主播，決...
沈念sama閱讀 38,442評(píng)論 3贊 401
雙鴛鴦連環(huán)套：你想象不到人心有多黑
文/蒼蘭香墨我猛地睜開(kāi)眼买猖，長(zhǎng)吁一口氣：“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼改橘！你這毒婦竟也來(lái)了？” 一聲冷哼從身側(cè)響起玉控，我...
開(kāi)封第一講書人閱讀 37,105評(píng)論 0贊 261
萬(wàn)榮殺人案實(shí)錄
序言：老撾萬(wàn)榮一對(duì)情侶失蹤飞主，失蹤者是張志新（化名）和其女友劉穎，沒(méi)想到半個(gè)月后高诺，有當(dāng)?shù)厝嗽跇?shù)林里發(fā)現(xiàn)了一具尸體碌识，經(jīng)...
沈念sama閱讀 43,601評(píng)論 1贊 300
?護(hù)林員之死
正文獨(dú)居荒郊野嶺守林人離奇死亡，尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛以下內(nèi)容為張勛視角年9月15日...
茶點(diǎn)故事閱讀 36,066評(píng)論 2贊 325
?白月光啟示錄
正文我和宋清朗相戀三年虱而，在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了筏餐。大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
茶點(diǎn)故事閱讀 38,161評(píng)論 1贊 334
活死人
序言：一個(gè)原本活蹦亂跳的男人離奇死亡牡拇，死狀恐怖魁瞪，靈堂內(nèi)的尸體忽然破棺而出，到底是詐尸還是另有隱情惠呼，我是刑警寧澤导俘，帶...
沈念sama閱讀 33,792評(píng)論 4贊 323
?日本核電站爆炸內(nèi)幕
正文年R本政府宣布，位于F島的核電站罢杉，受9級(jí)特大地震影響趟畏，放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜滩租，卻給世界環(huán)境...
茶點(diǎn)故事閱讀 39,351評(píng)論 3贊 307
男人毒藥：我在死后第九天來(lái)索命
文/蒙蒙一赋秀、第九天我趴在偏房一處隱蔽的房頂上張望。院中可真熱鬧律想，春花似錦猎莲、人聲如沸。這莊子的主人今日做“春日...
開(kāi)封第一講書人閱讀 30,352評(píng)論 0贊 19
一樁弒父案著洼，背后竟有這般陰謀
文/蒼蘭香墨我抬頭看了看天上的太陽(yáng)。三九已至而叼，卻和暖如春身笤，著一層夾襖步出監(jiān)牢的瞬間，已是汗流浹背葵陵。一陣腳步聲響...
開(kāi)封第一講書人閱讀 31,584評(píng)論 1贊 261
情欲美人皮
我被黑心中介騙來(lái)泰國(guó)打工液荸，沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留，地道東北人脱篙。一個(gè)月前我還...
沈念sama閱讀 45,618評(píng)論 2贊 355
代替公主和親
正文我出身青樓娇钱，卻偏偏與公主長(zhǎng)得像伤柄，于是被迫代替她去往敵國(guó)和親。傳聞我的和親對(duì)象是個(gè)殘疾皇子文搂，可洞房花燭夜當(dāng)晚...
茶點(diǎn)故事閱讀 42,916評(píng)論 2贊 344