Scrollable-1 滾動列表與動態加載

王叔不禿

Scrollable

• 在Flutter裡面, 把Column換成ListView就可以有滾動功能.
• Flutter裡面要用到類似recyleview的話就是用ListView.builder

body: ListView.builder(
  itemBuilder: (context, index) {
    return Container(
        color: Colors.blue[(index %5)*100],
        height: 100,
        alignment: Alignment.center,
        child: Text("$index"));
  },
),

• 透過itemCount來設定itemBuilder長度
• ListView.separated可以用來分割列表
• 緩衝區的尺寸根據元素的尺寸, 大約是螢幕的1/3
• 也可以透過cacheExtent來設定緩衝區的尺寸

範例檔

markcqhsu/flutter_-scrollable1

ListView

• 在ListView外面包一層Scrollbar會有滾動條.
• Scrollbar需要搭配itemCount, 才會知道總共有多少可以滑動. 如果沒有設定的話, 因為列表會是無限長, 所以滾動條會卡在畫面上方.
• 透過itemExtent來固定列表尺寸的話, 可以避免滑動的時候會有晃動卡頓的問題發生. 可以讓Flutter事先就知道列表的尺寸.
• 透過scrollDirection: Axis.horizontal 來調整滾動方向.
• physics: ClampingScrollPhysics(),//滾到頂上就不會動了
• physics: BouncingScrollPhysics(),//類似iOS的滾動動作
• physics: NeverScrollableScrollPhysics(),//禁止滾動
• physics: AlwaysScrollableScrollPhysics(),//禁止滾動

範例檔

markcqhsu/flutter_listView

Scrollbar & RefreshIndicator

• 永遠顯示滾動條：isAlwaysShown, 需要搭配controller.
• 畫面上有超過一個ListView的時候, 也會需要搭配controller.
• 攔截ListView滾動的事件：NotificationListener
• 在iOS上面使用Scrollbar的時候要注意數量(itemcount)不能無限大.
• 下拉更新：RefreshIndicator

範例檔

markcqhsu/flutter_RefreshIndicator