🐕

AbsorbPointerでリスト表示複数要素同時押し制御について

に公開

AbsorbPointerでリストの同時押しを制御!

リスト表示で要素自体がボタン押下できると同時押しできて煩わしいですよね?
そこで利用するのがAbsorbPointe!

AbsorbPointerがツリーごとイベントを飲み込むので、
リストの1行目を押している間は2行目以降はタップできません。←ここが重要

https://api.flutter.dev/flutter/widgets/AbsorbPointer-class.html

公式引用

When absorbing is true, this widget prevents its subtree from receiving pointer events by terminating hit testing at itself. It still consumes space during layout and paints its child as usual. It just prevents its children from being the target of located events, because it returns true from RenderBox.hitTest.

下記コードで解決!

  /// 二重タップ防止フラグ
    final isPush = useRef<bool>(true);
  /// 以下リスト 
    for (final (index, lesson) in list.lessons.indexed) ...[
              AbsorbPointer( /// ここでラップする
                absorbing: !isPush.value,
                child: ListItem(
                  index: index,
                  onTap: () async {
                    if (lesson.Url != null) {
                      /// 二度押し防止
                      if (!isPush.value) return;
                      isPush.value = false;

                      /// w遷移
                      await hogeRoute(
                        url: lesson.Url,
                      ).push(context);

                      /// 連続押下出来ない様に待つ
                      Future.delayed(
                        const Duration(seconds: 3),
                        () => isPush.value = true,
                      );
                    }
                  },
        ],

//// リストビュー

    AbsorbPointer(
          absorbing: !isPush.value,,             
          child: ListView.builder(
            itemCount: cranes.length,
            itemBuilder: (context, index) {
            return hogehoge()
           } ) 

以上

Discussion