flutter如何實(shí)現(xiàn)頂部?？康腖istview，可滾動(dòng)到指定posiiton，并監(jiān)聽(tīng)到當(dāng)前頭部position

先看我實(shí)現(xiàn)的效果圖


日歷滾動(dòng)視圖.gif

剛從原生安卓轉(zhuǎn)flutter，安卓有個(gè)庫(kù)可以實(shí)現(xiàn)頂部?？浚簊e.emilsjolander:stickylistheaders:2.5.2
這個(gè)庫(kù)有兩個(gè)方法

1.setSelection（int index），可以滾動(dòng)到list指定位置

2.setOnStickyHeaderChangedListener 當(dāng)?？康念^部發(fā)生改變則觸發(fā)

agenda_view.getAgendaListView().setOnStickyHeaderChangedListener((l, header, itemPosition, headerId) -> { Log.d(LOG_TAG, String.format("onStickyHeaderChanged, position = %d, headerId = %d", itemPosition, headerId)); });
這兩個(gè)方法是非常有用的，不過(guò)我在flutter沒(méi)有找到這樣的庫(kù)
ListView不能滾動(dòng)到指定位置，但是可以監(jiān)聽(tīng)到滾動(dòng)超出屏幕的 距離offset，如果想要計(jì)算當(dāng)前position，那么item的高度要一致，
計(jì)算如下：int position=offset/item高度；

對(duì)于item的高度不一致呢？ListView就獲取不了當(dāng)前滾動(dòng)的position了；

于是繼續(xù)找?guī)?/p>

1. sticky_headers: ^0.3.0+2

這個(gè)庫(kù)是在item里面區(qū)分開(kāi)頭部和內(nèi)容，外層可以用ListView、GridView、CustomScrollView或 SingleChildScrollView來(lái)包裹，一開(kāi)始覺(jué)的這些滾動(dòng)list，都沒(méi)法實(shí)時(shí)獲取?？款^部的索引。于是又找第二個(gè)庫(kù)（這里主要是想偷懶，看看有沒(méi)有現(xiàn)成且完全符合功能的庫(kù)）

2.easy_sticky_header: ^1.0.5

這個(gè)庫(kù)是可以實(shí)時(shí)獲取頭部索引的，這位作者很費(fèi)心，講解也很仔細(xì)，由于太復(fù)雜我沒(méi)一時(shí)也沒(méi)看懂其原理，然后拿到本地跑起來(lái)，發(fā)現(xiàn)它沒(méi)有浮動(dòng)的頭部?？?，而且也不好實(shí)現(xiàn)側(cè)邊欄效果 如下圖


image.png

3.side_header_list_view

傳送門(mén)https://github.com/renefloor/side_header_list_view
這個(gè)庫(kù)實(shí)現(xiàn)?？康姆绞?完全是靠計(jì)算來(lái)實(shí)現(xiàn) ，不過(guò)有要求必須要指定item高度itemExtend，研究了好一會(huì)，想魔改，最后還是放棄了

4.flutter_sticky_header: ^0.6.5

這個(gè)庫(kù)實(shí)現(xiàn)了側(cè)壁欄 頭部?？浚Ч€不錯(cuò)，最后發(fā)現(xiàn)不能夠監(jiān)聽(tīng)到?？款^部的索引
，而且作者好像也不更新維護(hù)了，項(xiàng)目還是4~5年前創(chuàng)建的，最后一次提交是10個(gè)月前

折騰了兩天，沒(méi)辦法，兜兜轉(zhuǎn)轉(zhuǎn) 還是回到第一個(gè)sticky_headers，難道沒(méi)有ListView既能跳轉(zhuǎn)到指定位置，又能實(shí)時(shí)獲取?？款^部的索引嗎？哎~，真給我找到了，早知道就不用那么費(fèi)時(shí)間了
這個(gè)庫(kù)就是scrollable_positioned_list: ^0.3.8
再結(jié)合sticky_headers: ^0.3.0+2 ，完全可以得到我想要的效果。

監(jiān)聽(tīng)頭部變化 代碼

// 參考 https://blog.bombox.org/2020-06-30/flutter-chat-listview/

final itemPositionsListener = ItemPositionsListener.create(); // 監(jiān)聽(tīng)滾動(dòng)到哪個(gè)位置
//ScrollablePositionedList.builder(
     // itemCount: dateEventList.length,
      //itemScrollController: itemScrollController,
      //itemPositionsListener: itemPositionsListener,
     // initialScrollIndex: scrollIndex,
     // itemBuilder: (context, index) {
     // },
 );
// 監(jiān)聽(tīng)變化
itemPositionsListener.itemPositions.addListener(() {
      int newPosition = getIndex(itemPositionsListener.itemPositions, false);
      if (newPosition != currentPosition) {
          print("當(dāng)前${currentPosition}");
      }
});

  int getIndex(ValueListenable<Iterable<ItemPosition>> itemPositions,
      bool wholeVisible) {
    var visibleItems = itemPositions.value.where((i) {
      if (wholeVisible) {
        return i.itemLeadingEdge >= 0 && i.itemTrailingEdge <= 1;
      } else {
        return i.itemTrailingEdge > 0 && i.itemLeadingEdge < 1;
      }
    });
    // 取最小index
    ItemPosition firstVisibleItem =
        visibleItems.fold(itemPositions.value.first, (v, i) {
      if (v == null) {
        return i;
      } else if (i.index < v.index) {
        return i;
      } else {
        return v;
      }
    });
    return firstVisibleItem.index;
  }

2024-8-26 自己研究發(fā)現(xiàn)監(jiān)聽(tīng)頭部變化代碼不用這么麻煩，框架本身就有提供

itemPositionsListener.itemPositions.addListener(() {
      final positions = itemPositionsListener.itemPositions.value;
      // 判斷當(dāng)前可視區(qū)域 是否包含今天
      final visibleItemsSet =
      positions.map((itemPosition) => itemPosition.index).toSet();
      var arr = visibleItemsSet.toList();
      arr.sort();
      print('firstChild.index -- ${arr.first}');
      print('displaying -- ${arr.toString()}');
       if (arr.first!= currentPosition) {
          // 頭部變更邏輯
        }
    });

5.偶然間看到一個(gè)框架scroll-to-index，可以滾動(dòng)到指定位置，評(píng)論中有個(gè)需求，就是實(shí)時(shí)獲取當(dāng)前currentindex，和我們的需求很很像
QQ截圖20240823144541.png

根據(jù)評(píng)論推薦的庫(kù)就是 ：scrollview_observer: ^1.21.0，目前188個(gè)start，而scrollable_positioned_list是谷歌發(fā)布的，目前是1771個(gè)start，性能我估計(jì)差別不大，關(guān)鍵是scrollview_observer改動(dòng)小，侵入性較小，還是比較推薦的
庫(kù)地址傳送門(mén)：https://pub.dev/packages/scrollview_observer

image.png

這個(gè)庫(kù)可以實(shí)時(shí)監(jiān)聽(tīng)當(dāng)前可視item，以及currentindex，同時(shí)可以滾動(dòng)到指定的index，即使沒(méi)有加載過(guò)也可以滾動(dòng)，
測(cè)試之后性能不錯(cuò)，關(guān)鍵是原本如果使用listview的話，改動(dòng)很小,直接全部復(fù)制，即可測(cè)試
缺點(diǎn)：如果你的數(shù)量很大，比如上千條，你想渲染完成之后，默認(rèn)滾動(dòng)500索引，會(huì)滾動(dòng)較久，沒(méi)法迅速滾動(dòng)到該索引，
當(dāng)然首次可以加個(gè)loading處理這個(gè)問(wèn)題，看實(shí)際情況使用

import 'package:flutter/material.dart';
import 'package:scrollview_observer/scrollview_observer.dart';

class ScrollviewObserverPage extends StatefulWidget {
  const ScrollviewObserverPage({super.key});

  @override
  State<ScrollviewObserverPage> createState() => _ScrollviewObserverPageState();
}

class _ScrollviewObserverPageState extends State<ScrollviewObserverPage> {
  ScrollController controller = ScrollController();
  late ListObserverController scrollController;

  @override
  void initState() {
    // TODO: implement initState
    scrollController = ListObserverController(controller: controller);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('既能滾動(dòng)到指定條目又能監(jiān)聽(tīng)當(dāng)前current，可視區(qū)區(qū)域items'),
      ),
      body: ListViewObserver(
        child: _buildListView(),
        controller: scrollController,
        onObserve: (resultModel) {
          print('firstChild.index -- ${resultModel.firstChild?.index}');
          print('displaying -- ${resultModel.displayingChildIndexList}');
        },
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          scrollController.jumpTo(index: 500);
        },
      ),
    );
  }

  _buildListView() {
    return ListView(
      controller: controller,
      children: [
        ...List.generate(1000, (index) {
          double height= index%2 == 0? 200.0: 100.0;
          return Container(
            margin: EdgeInsets.only(top: 15),
            decoration: BoxDecoration(
                color: (index%2 == 0) ? Colors.red : Colors.green,
                borderRadius: BorderRadius.circular(5)
            ),
            padding: const EdgeInsets.all(8.0),
            child: Column(
              children: [
                Text('ITEM $index'),
              ],
            ),
          );
        })
      ],
    );
  }
}
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡(jiǎn)書(shū)系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容