Le déplacement de la souris dans le projet Web Flutter ne permet pas d'obtenir l'effet de défilement

Lors de la réalisation du projet Web Flutter, j'ai constaté que la liste ListView ne peut pas être défilée en faisant glisser la souris. J'ai essayé de trouver que le pavé tactile peut être utilisé pour faire défiler, mais si l'utilisateur utilise un ordinateur sans pavé tactile ou si la liste défile horizontalement , les exigences du projet ne peuvent pas être réalisées. Dans le processus de résolution du problème, les méthodes suivantes ont été essayées :

1. Essayez d'utiliser l'événement de clic pour simuler le geste de balayage

Si vous ne pouvez pas utiliser la souris pour faire glisser dans le projet Web, pouvez-vous envisager de définir un bouton qui simule le déclenchement du geste de glissement pour obtenir l'effet de défilement lorsque le bouton est cliqué.

L'ensemble du processus déclenche trois événements, la souris vers le bas (PointerDownEvent), le déplacement de la souris (PointerMoveEvent), la souris vers le haut (PointerUpEvent), et nous avons besoin de connaître certaines informations de données du geste de glissement simulé, c'est-à-dire les coordonnées de la souris vers le bas et la souris vers le haut , la distance parcourue par la souris pour déterminer sur quelle ListView notre défilement simulé est implémenté.

Obtenir les coordonnées d'un Widget : définissez l'attribut clé pour le Widget cible, puis obtenez la position des coordonnées du Widget avec l'attribut clé défini

Widget _demo(){
    GlobalKey _globalKey = new GlobalKey();
    return GestureDetector(
        ontap: (){
            //点击获取目标Widget坐标位置
            RenderBox box = _globalKey.currentContext.findRenderObject();
            Offset offset = box.localToGlobal(Offset.zero);
            print('widget位置：${offset}'); //widget位置：Offset(80.0, 182.0)
        }，
        child: Container(
            key: _globalKey, //目标Widget设置key属性
            child: ListView.builder(...)
        )
    );
}

Simuler un événement de défilement : la position des coordonnées du Widget cible obtenue à l'étape précédente est (80.0, 182.0), qui est la position du Widget sur l'écran, vous pouvez donc la définir en fonction de vos besoins lors du réglage des coordonnées de la souris poste de presse

void _pressMove() async {
  const PointerEvent downPointer =  PointerDownEvent(
      pointer: 1,
      position: Offset(500.0, 200)
  );
  GestureBinding.instance.handlePointerEvent(downPointer);
  double dy = 20;
  double updateCount = 10;
  for (int i = 0; i < 10; i++) {
    await Future.delayed(const Duration(milliseconds: 6));
    PointerEvent movePointer =  PointerMoveEvent(
        pointer: 1,
        delta: Offset(-dy, 0),
        position: Offset(500 - i * dy, 200)
    );
    GestureBinding.instance.handlePointerEvent(movePointer);
    GestureBinding.instance.handlePointerEvent(movePointer);
  }

  PointerEvent upPointer = PointerUpEvent(
      pointer: 1,
      position: Offset(500 - dy * updateCount, 200)
  );
  GestureBinding.instance.handlePointerEvent(upPointer);
}

Après l'exécution de l'événement de défilement simulé dans l'événement de clic, l'effet de défilement simulé est réalisé, mais cette méthode ne peut obtenir la position par rapport à l'écran que lors de l'obtention de la position des coordonnées du Widget cible. Si le Widget cible d'origine n'obtient plus la coordonnées après avoir fait défiler la position de la page, l'échec de glissement est simulé, alors envisagez d'autres méthodes.

2. Ajouter du contenu de configuration dans main.dart

Dans le processus de recherche d'informations, j'ai vu qu'après la mise à jour de la branche bêta flutter (2.4.0), l'application de bureau ne pouvait pas faire défiler la liste en faisant glisser la souris. La solution :

Trouvez l'endroit où MaterialApp est créé, généralement le fichier main.dart, et ajoutez le contenu de configuration suivant dans MaterialApp

import 'dart:ui';

return MaterialApp(
    scrollBehavior: const MaterialScrollBehavior().copyWith(
        scrollbars: true,
        dragDevices: _kTouchLikeDeviceTypes
    ),
    ......
)

const Set<PointerDeviceKind> _kTouchLikeDeviceTypes = <PointerDeviceKind>{
  PointerDeviceKind.touch,
  PointerDeviceKind.mouse,
  PointerDeviceKind.stylus,
  PointerDeviceKind.invertedStylus,
  PointerDeviceKind.unknown
};

Cette méthode peut réaliser l'effet de glissement en faisant glisser la souris.