ScrollPhysics
簡述:用來指定可滾動部件的滾動特性
源碼
神奇的ScrollPhysics與Simulation
ScrollPhysics | 釋義 |
---|---|
BouncingScrollPhysics | 允許滾動出邊界缔杉,超過邊界時會有回彈效果,會響應(yīng)滾動事件 |
ClampingScrollPhysics | 不允許滾動出邊界,會響應(yīng)滾動事件 |
AlwaysScrollableScrollPhysics | 一直響應(yīng)滾動事件 |
NeverScrollableScrollPhysics | 禁止?jié)L動奕纫,不響應(yīng)滾動事件 |
FixedExtentScrollPhysics | ListWheelScrollView滾輪使用時,item都會停止在中間位置蚯瞧,不會停在分割線 |
PageScrollPhysics | PageView滾輪使用時里初,item都會停止在一頁,不會停止在分割線位置 |
RangeMaintainingScrollPhysics | 當(dāng)內(nèi)容突然改變尺寸時埠巨,試圖將滾動位置保持在范圍內(nèi)的滾動物理 |
Scaffold(
appBar: AppBar(
title: Text('AlwaysScrollableScrollPhysicsPage'),
),
body: NotificationListener(
child: Scaffold(
body: ListView.builder(
controller: scrollController,
// physics: const AlwaysScrollableScrollPhysics(),
physics: const BouncingScrollPhysics (),
// physics: const ClampingScrollPhysics (),
// physics: const NeverScrollableScrollPhysics (),
itemCount: 50,
itemBuilder: (context, index) {
return Padding(
padding: const EdgeInsets.only(top: 8.0,left: 16,right: 16),
child: Container(
color: Colors.deepOrange[400],
height: 50,
alignment: Alignment.center,
child: Text('$index',style: TextStyle(color: Colors.white),),
),
);
},
),
),
onNotification: (scrollNotification) {
print('$scrollNotification');
if (scrollNotification is ScrollStartNotification) {
showToast("小部件已開始滾動 ");
}
return true;
},
),
);
BouncingScrollPhysics
只有在滾動控件的高度超過屏幕高度時,才會有效果现拒。
日志:
Performing hot reload...
Syncing files to device Android SDK built for x86...
I/flutter ( 7619): ScrollStartNotification(depth: 0 (local), FixedScrollMetrics(0.0..[511.0]..2389.0), DragStartDetails(Offset(157.0, 393.5)))
I/flutter ( 7619): UserScrollNotification(depth: 0 (local), FixedScrollMetrics(0.0..[511.0]..2389.0), direction: ScrollDirection.reverse)
I/flutter ( 7619): ScrollUpdateNotification(depth: 0 (local), FixedScrollMetrics(1.2..[511.0]..2387.8), scrollDelta: 1.1666666666666667, DragUpdateDetails(Offset(0.0, -4.0)))
I/flutter ( 7619): ScrollUpdateNotification(depth: 0 (local), FixedScrollMetrics(4.7..[511.0]..2384.3), scrollDelta: 3.49609375, DragUpdateDetails(Offset(0.0, -3.5)))
I/flutter ( 7619): ScrollUpdateNotification(depth: 0 (local), FixedScrollMetrics(10.7..[511.0]..2378.3), scrollDelta: 5.996093750000001, DragUpdateDetails(Offset(0.0, -6.0)))
ClampingScrollPhysics
Performing hot reload...
Syncing files to device Android SDK built for x86...
I/flutter ( 7619): ScrollStartNotification(depth: 0 (local), FixedScrollMetrics(0.0..[511.0]..2389.0), DragStartDetails(Offset(204.5, 141.5)))
I/flutter ( 7619): UserScrollNotification(depth: 0 (local), FixedScrollMetrics(0.0..[511.0]..2389.0), direction: ScrollDirection.forward)
I/flutter ( 7619): OverscrollIndicatorNotification(depth: 0 (local), side: leading edge)
I/flutter ( 7619): OverscrollNotification(depth: 0 (local), FixedScrollMetrics(0.0..[511.0]..2389.0), overscroll: -1.0, velocity: 0.0, DragUpdateDetails(Offset(0.0, 1.0)))
I/flutter ( 7619): OverscrollNotification(depth: 0 (local), FixedScrollMetrics(0.0..[511.0]..2389.0), overscroll: -6.0, velocity: 0.0, DragUpdateDetails(Offset(0.0, 6.0)))
AlwaysScrollableScrollPhysics
Performing hot reload...
Syncing files to device Android SDK built for x86...
Reloaded 0 libraries in 154ms.
I/flutter ( 7619): ScrollStartNotification(depth: 0 (local), FixedScrollMetrics(0.0..[511.0]..2389.0), DragStartDetails(Offset(192.5, 169.0)))
I/flutter ( 7619): UserScrollNotification(depth: 0 (local), FixedScrollMetrics(0.0..[511.0]..2389.0), direction: ScrollDirection.forward)
I/flutter ( 7619): OverscrollIndicatorNotification(depth: 0 (local), side: leading edge)
I/flutter ( 7619): OverscrollNotification(depth: 0 (local), FixedScrollMetrics(0.0..[511.0]..2389.0), overscroll: -3.5, velocity: 0.0, DragUpdateDetails(Offset(0.0, 3.5)))
I/flutter ( 7619): OverscrollNotification(depth: 0 (local), FixedScrollMetrics(0.0..[511.0]..2389.0), overscroll: -1.0, velocity: 0.0, DragUpdateDetails(Offset(0.0, 1.0)))
NeverScrollableScrollPhysics
不會有滾動日志
Performing hot reload...
Syncing files to device Android SDK built for x86...
Reloaded 2 of 565 libraries in 750ms.
FixedExtentScrollPhysics
ListWheelScrollView使用時辣垒,每次滾動,都會停留在item處于正中央的位置印蔬,不會停留在分割線上勋桶。
Center(
child: Stack(
alignment: Alignment.center,
children: [
//ListWheelScrollView中間的分割線
Container(
width: double.infinity,
height: 60,
decoration: BoxDecoration(
border: Border(
top: BorderSide(width: 2,color: Colors.black),
bottom: BorderSide(width: 2,color: Colors.black)
)
),
),
//滾輪view
Container(
margin: EdgeInsets.only(left: 16, right: 16),
height: 200,
child: ListWheelScrollView(
controller: _fixedExtentScrollController,
physics: FixedExtentScrollPhysics(),
children: List.generate(20, (index) {
return Container(
width: double.infinity,
color: Colors.deepOrange[400],
alignment: Alignment.center,
child: Text(
"$index",
style: TextStyle(fontSize: 18.0,color: Colors.white),
),
);
}),
itemExtent: 60.0,
),
),
],
),
);
PageScrollPhysics
PageView的pageSnapping屬性默認是true,類似吸附效果一樣,一頁頁滾動侥猬,每次只滾動一頁例驹,不會停止在分割線位置。
如果pageSnapping設(shè)置成false,效果會如下
PageScrollPhysics也可以做到pageSnapping為true的效果:
PageView(
//能達到跟頁面捕捉一樣的效果
physics: PageScrollPhysics(),
//關(guān)閉頁面捕捉
pageSnapping: false,
scrollDirection:Axis.horizontal, //設(shè)置滾動方向退唠,默認是水平方向
children: [
Container(
color: Colors.orange,
child: Center(
child: Text('PageView-1'),
),
),
Container(
color: Colors.yellow,
child: Center(
child: Text('PageView-2'),
),
),
Container(
color: Colors.pinkAccent,
child: Center(
child: Text('PageView-3'),
),
),
],
);