Flutter 在 Android 端的滾動視圖,比如 SingleChildScrollView 和 ListView 等,如果不加處理,在拉到頂或者拉到底的時候,是有一個帶有 accentColor 顏色的水波紋效果的,同時 iOS 端是一個軟性回彈效果,如果想在 iPhone 上保留 iOS 的效果,但是 Android 端去除這個效果,可以按以下操作:
import 'package:flutter/material.dart';
class NoShadowScrollBehavior extends ScrollBehavior {
@override
Widget buildViewportChrome(BuildContext context, Widget child, AxisDirection axisDirection) {
switch (getPlatform(context)) {
case TargetPlatform.iOS:
case TargetPlatform.macOS:
return child;
case TargetPlatform.android:
case TargetPlatform.fuchsia:
case TargetPlatform.linux:
case TargetPlatform.windows:
return GlowingOverscrollIndicator(
child: child,
//不顯示頭部水波紋
showLeading: false,
//不顯示尾部水波紋
showTrailing: false,
axisDirection: axisDirection,
color: Theme.of(context).accentColor,
);
}
return null;
}
}
自定義一個 NoShadowScrollBehavior ,代碼很簡單,利用 switch 的穿透,在蘋果設(shè)備上原樣返回子 Widget ,而其他平臺,包括 Android ,將 showLeading 和 showTrailing 設(shè)置為 false ,然后用 ScrollConfiguration 包裹 ScrollView 或者 ListView,在 behavior 里將上方的 NoShadowScrollBehavior 賦值即可:
~~~
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("title"),
),
body: ScrollConfiguration(
behavior: NoShadowScrollBehavior(),
child: SingleChildScrollView(
child: Container(
//主視圖
),
),
),
);
}
~~~
以上。