使用過(guò)
ListView的讀者們應(yīng)該了解到ListView的一個(gè)特性脐供，即若ListView在滾動(dòng)至頂部或底部后繼續(xù)滾動(dòng)只厘，組件中將會(huì)出現(xiàn)一條帶有默認(rèn)主體顏色的波紋唠椭。在某些情況下么伯，我們?yōu)榱嗣烙^并不希望顯示過(guò)度滾動(dòng)波紋盯仪，這個(gè)時(shí)候我們應(yīng)該怎么操作呢紊搪？
?? 方法一 配置一個(gè) ScrollConfiguration
第一步 定義一個(gè) ScrollBehavior
class _OverScrollBehavior extends ScrollBehavior {
@override
Widget buildViewportChrome(BuildContext context, Widget child, AxisDirection axisDirection) {
if (getPlatform(context) == TargetPlatform.android || getPlatform(context) == TargetPlatform.fuchsia) {
return GlowingOverscrollIndicator(
child: child,
showLeading: false,
showTrailing: false,
axisDirection: axisDirection,
color: Theme.of(context).accentColor,
);
} else {
return child;
}
}
}
第二步 將 ScrollBehavior 配置到 ScrollConfiguration 中
class Demo extends StatelessWidght {
@override
Widget build(BuildContext context) {
return ScrollConfiguration(
behavior: _OverScrollBehavior(),
child: ListView(
...
),
);
}
}
是不是覺(jué)得如果每個(gè) ListView 都需要單獨(dú)封裝的話未免也太麻煩了點(diǎn)？
沒(méi)關(guān)系磨总，已經(jīng)幫你們想到了嗦明！作者已經(jīng)幫你們封裝好了現(xiàn)成的倉(cāng)庫(kù)，我們只需要直接調(diào)用就行蚪燕！
?? 方法二 直接使用現(xiàn)成第三方庫(kù) noripple_overscroll（推薦）
第一步 進(jìn)入 pub.dev 查看依賴的最新版本
進(jìn)入依賴的倉(cāng)庫(kù)主頁(yè)后娶牌，檢查到最新的依賴版本。
截止至文章發(fā)布馆纳，版本為 0.0.2
第二步 安裝依賴
dependencies:
noripple_overscroll: ^0.0.2 # 具體版本因依賴版本發(fā)布而異诗良，具體參見(jiàn) Pub 倉(cāng)庫(kù)
第三步 引入依賴并使用
這個(gè)依賴使用非常簡(jiǎn)單，我們只需要將需要取消顯示波紋的ListView傳入即可鲁驶。
class _NorippleDemo extends StatelessWidget {
@override
Widget build(BuildContext context) {
return NoRippleOverScroll( // 調(diào)用 NoRippleOverScroll
child: ListView( // 傳入 ListView
...
),
);
}
}
做到這里鉴裹，波紋已經(jīng)被取消了。
