亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

Flutter獲取ListView當前正在顯示的Widget信息(應(yīng)用場景)

 更新時間：2022年05月31日 14:47:03   作者：LinXunFeng  
ListView是Flutter里最常用的Widget了，當屏幕放不下的時候，它可以自帶滾動功能,用法也很簡單,本文通過實例代碼給大家介紹Flutter獲取ListView當前正在顯示的Widget信息，感興趣的朋友一起看看吧

一、概述

Flutter 中的 ListView 相信大家都用的很熟了，不過有沒有人遇到過一些這樣的需求：

  • 詳情頁滾動到某一指定模塊后，停止?jié)L動并根據(jù)該指定模塊的大小彈出全屏新手引導(dǎo)
  • 詳情頁在滾動過程中，頂部的模塊定位導(dǎo)航欄需要及時更新指示器下標
  • 視頻列表在滾動過程中，適當位置的子部件會自動進行播放視頻
  • 等等

在日常開發(fā)過程中這種類似的功能需求還是蠻多的，因此我封裝了一個庫：flutter_scrollview_observer

相信可以很好的幫助大家解決這些問題 ??

二、應(yīng)用場景

下面我們來看看常見的應(yīng)用場景：

1、獲取最頂部的子部件信息

可以獲取當前的第一個子部件和所有正在顯示的子部件信息

2、視頻列表自動播放

當子部件進入列表中間區(qū)域時，自動播放視頻

3、模塊定位

當滾動到一些特定模塊時，頂部的 TabBar 的指示器切換到對應(yīng)模塊 tab

三、使用

1、基本使用

創(chuàng)建ListView，并在其builder回調(diào)中，將 SliverListView 的BuildContext記錄起來

BuildContext? _sliverListViewContext;
...
ListView _buildListView() {
  return ListView.separated(
    itemBuilder: (ctx, index) {
      // 在 builder 回調(diào)中，將 BuildContext 記錄起來
      if (_sliverListViewContext != ctx) {
        _sliverListViewContext = ctx;
      }
      return _buildListItemView(index);
    },
    separatorBuilder: (ctx, index) {
      return _buildSeparatorView();
    },
    itemCount: 50,
  );
}

注：在使用過程中，需要記錄 SliverListView 的 BuildContext，ListView 最終也是使用 SliverListView 來進行布局的

構(gòu)建ListViewObserver

  • child: 將構(gòu)建的ListView做為ListViewObserver的子部件
  • sliverListContexts: 該回調(diào)中需要返回被觀察的ListView的BuildContext
  • onObserve: 該回調(diào)可以監(jiān)聽到當前正在顯示的子部件的相關(guān)信息
ListViewObserver(
  child: _buildListView(),
  sliverListContexts: () {
    return [if (_sliverListViewContext != null) _sliverListViewContext!];
  },
  onObserve: (resultMap) {
    final model = resultMap[_sliverListViewContext];
    if (model == null) return;

    // 打印當前正在顯示的第一個子部件
    print('firstChild.index -- ${model.firstChild.index}');

    // 打印當前正在顯示的所有子部件下標
    print('displaying -- ${model.displayingChildIndexList}');
  },
)

除了上述幾個常用參數(shù)外，還有：

  • leadingOffset：頂部偏移，當列表的視窗會固定被其它視圖擋住時使用
  • dynamicLeadingOffset：動態(tài)頂部偏移，當列表的視窗會動態(tài)被其它視圖擋住時使用

這里看一下圖就明白了

// 導(dǎo)航欄半透明
flutter: firstChild.index -- 0
flutter: displaying -- [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11]
flutter: firstChild.index -- 0
flutter: displaying -- [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]
// 導(dǎo)航欄完全不透明
flutter: firstChild.index -- 2
flutter: displaying -- [2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]

滾動過程會改變頂部的導(dǎo)航欄透明度，在這個前提下：

  • 當半透明時，我們希望列表的所有可見子部件從最頂部開始算起
  • 當完成不透明時，我們希望列表的所有可見子部件從導(dǎo)航欄底部開始算起
ListViewObserver(
  ...
  dynamicLeadingOffset: () {
    if (_navBgAlpha < 1) {
      return 0;
    }
    return _safeAreaPaddingTop + _navContentHeight;
  },
  ...
),
  • toNextOverPercent：內(nèi)部邏輯在取到第一個子部件后，如果該子部件被擋住的大小與自身大小的比例超過了該值，則會取下一個子部件為第一個子部件。

2、手動觸發(fā)

默認是ListView在滾動的時候才會觀察到相關(guān)數(shù)據(jù)。

如果需要在非滾動狀態(tài)下進行一次觀察，可以使用ListViewOnceObserveNotification進行手動觸發(fā)

ListViewOnceObserveNotification().dispatch(_sliverListViewContext);

注：如果頻繁觸發(fā)，且觀察結(jié)果相同，則 onObserve 只會回調(diào)一次

3、子部件信息

觀察到的模型數(shù)據(jù)：

class ListViewObserveModel {
  /// 第一個子部件模型數(shù)據(jù)
  final ListViewObserveDisplayingChildModel firstChild;

  /// 正在顯示的所有子部件模型數(shù)據(jù)
  final List<ListViewObserveDisplayingChildModel> displayingChildModelList;

  /// 正在顯示的所有子部件下標
  List<int> get displayingChildIndexList =>
      displayingChildModelList.map((e) => e.index).toList();
}

子部件模型數(shù)據(jù)：

class ListViewObserveDisplayingChildModel {
  /// 子部件下標
  final int index;

  /// 子部件的 RenderObject
  final RenderBox renderObject;
}

GitHub: LinXunFeng/flutter_scrollview_observer

到此這篇關(guān)于Flutter獲取ListView當前正在顯示的Widget信息的文章就介紹到這了,更多相關(guān)Flutter獲取當前Widget信息內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

相關(guān)文章

最新評論