Flutter之ScrollPhysics

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

只有在滾動控件的高度超過屏幕高度時,才會有效果现拒。

BouncingScrollPhysics.gif

日志:
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

ClampingScrollPhysics.gif
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

ClampingScrollPhysics.gif
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

不會有滾動日志

NeverScrollableScrollPhysics.gif

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,
            ),
          ),


        ],
      ),
    );
FixedExtentScrollPhysics.gif

PageScrollPhysics

PageView的pageSnapping屬性默認是true,類似吸附效果一樣,一頁頁滾動侥猬,每次只滾動一頁例驹,不會停止在分割線位置。

如果pageSnapping設(shè)置成false,效果會如下

scroPhysics.gif

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'),
          ),
        ),
      ],
    );
scroPhysics_6.gif
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末鹃锈,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子瞧预,更是在濱河造成了極大的恐慌屎债,老刑警劉巖,帶你破解...
    沈念sama閱讀 206,482評論 6 481
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件垢油,死亡現(xiàn)場離奇詭異盆驹,居然都是意外死亡,警方通過查閱死者的電腦和手機滩愁,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 88,377評論 2 382
  • 文/潘曉璐 我一進店門躯喇,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人硝枉,你說我怎么就攤上這事玖瘸。” “怎么了檀咙?”我有些...
    開封第一講書人閱讀 152,762評論 0 342
  • 文/不壞的土叔 我叫張陵雅倒,是天一觀的道長。 經(jīng)常有香客問我弧可,道長蔑匣,這世上最難降的妖魔是什么劣欢? 我笑而不...
    開封第一講書人閱讀 55,273評論 1 279
  • 正文 為了忘掉前任,我火速辦了婚禮裁良,結(jié)果婚禮上凿将,老公的妹妹穿的比我還像新娘。我一直安慰自己价脾,他們只是感情好牧抵,可當(dāng)我...
    茶點故事閱讀 64,289評論 5 373
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著侨把,像睡著了一般犀变。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上秋柄,一...
    開封第一講書人閱讀 49,046評論 1 285
  • 那天获枝,我揣著相機與錄音,去河邊找鬼骇笔。 笑死省店,一個胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的笨触。 我是一名探鬼主播懦傍,決...
    沈念sama閱讀 38,351評論 3 400
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼芦劣!你這毒婦竟也來了谎脯?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 36,988評論 0 259
  • 序言:老撾萬榮一對情侶失蹤持寄,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后娱俺,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體稍味,經(jīng)...
    沈念sama閱讀 43,476評論 1 300
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 35,948評論 2 324
  • 正文 我和宋清朗相戀三年荠卷,在試婚紗的時候發(fā)現(xiàn)自己被綠了模庐。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 38,064評論 1 333
  • 序言:一個原本活蹦亂跳的男人離奇死亡油宜,死狀恐怖掂碱,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情慎冤,我是刑警寧澤疼燥,帶...
    沈念sama閱讀 33,712評論 4 323
  • 正文 年R本政府宣布,位于F島的核電站蚁堤,受9級特大地震影響醉者,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 39,261評論 3 307
  • 文/蒙蒙 一撬即、第九天 我趴在偏房一處隱蔽的房頂上張望立磁。 院中可真熱鬧,春花似錦剥槐、人聲如沸唱歧。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,264評論 0 19
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽颅崩。三九已至,卻和暖如春温圆,著一層夾襖步出監(jiān)牢的瞬間挨摸,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 31,486評論 1 262
  • 我被黑心中介騙來泰國打工岁歉, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留得运,地道東北人。 一個月前我還...
    沈念sama閱讀 45,511評論 2 354
  • 正文 我出身青樓锅移,卻偏偏與公主長得像熔掺,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子非剃,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 42,802評論 2 345

推薦閱讀更多精彩內(nèi)容