Qu’est-ce que la classe MouseRegion dans Flutter ?

Occasionnellement, nous sommes amenés à accomplir un travail ou une séquence d’activités impliquant des mouvements de souris. Prenez, par exemple, Google Maps, qui modifie la longitude et la latitude en fonction du mouvement du curseur et affiche les points de repère entourant les coordonnées.

Lorsque vous utilisez un téléphone, vos options de saisie sont fortement limitées. Avez-vous déjà essayé de taper sur un seul pixel sans toucher aucun des pixels environnants ? Cela peut être impossible sur un appareil mobile, mais sur d’autres plates-formes, comme le Web, nous avons une souris à notre disposition.

En détectant si le curseur s’attarde sur une région, le widget MouseRegion dans Application mobile Flutter développement vous permet de voir ce qui se passe à l’écran. Utilisez une classe MouseRegion sur le widget sur lequel vous souhaitez suivre les mouvements de la souris, et vous pourrez voir si la souris se trouve dans cette zone ou non.

Aperçu

Widget permettant de suivre les mouvements de la souris, MouseRegion est aujourd’hui utilisé dans de nombreuses applications différentes. La classe MouseRegion doit être utilisée lorsqu’une région particulière de l’écran de l’appareil nécessite une interaction que l’appareil peut détecter pour exécuter divers rappels, tels que onEnter, onHover et onExit.

Constructeur:

Ce widget peut être utilisé en l’enveloppant simplement dans le constructeur MouseRegion.

La classe MouseRegion a le constructeur suivant :

const MouseRegion({

Clé? clé,

this.onEnter,

this.onExit,

this.onHover,

this.cursor = MouseCursor.defer,

this.opaque = vrai,

cet enfant,

})

Il n’y a pas de champs obligatoires qui doivent être envoyés au constructeur.

Paramètres:

Plusieurs paramètres sont associés à MouseRegion :

  • enfant: Le widget directement sous ce widget est dans l’arborescence.
  • le curseur: Le curseur de la souris pour survoler la souris pointe sur la zone.
  • onEnter: Cet événement est déclenché chaque fois que le curseur de la souris quitte ce widget alors qu’il est encore affiché.
  • En vol stationnaire: déclenché chaque fois que le pointeur entre dans un endroit de ce widget sans appuyer sur aucun bouton.
  • opaque: Ce widget empêchera le pointeur d’être détecté par d’autres MouseRegions visiblement derrière lui.

Exécution:

Comment inclure du code dans un fichier Dart :

Cet exemple simple montre comment utiliser le widget Mouse Region avec n’importe quel Développement d’applications mobiles Flutter composant.

Dans le dossier lib, créez un nouveau fichier dart nommé main.dart.

Étape 1: La première étape consiste à créer une classe qui implémente Widget avec état et inclut un widget Conteneur de démonstration avec une hauteur et une largeur d’une certaine taille dans son corps. Dans cet exemple, nous supposerons que Container est un widget sur lequel vous suivrez les mouvements de la souris.

En relation :  Comment combiner plusieurs ensembles de données dans Microsoft Excel à l'aide de Power Query

Récipient(

hauteur : 80,0,

largeur : 80,0,

décoration : décoration de boîte (

couleur : Colors.blueAccent,

borderRadius : BorderRadius.circular(20.0),

border : Border.all(couleur : Colors.blueAccent),

),

)

Étape 2: Il vous suffit d’envelopper votre conteneur autour du constructeur de la classe MouseRegion, comme indiqué dans l’exemple de code ci-dessous.

MouseRegion(

enfant : Conteneur(

hauteur : 80,0,

largeur : 80,0,

décoration : décoration de boîte (

couleur : Colors.blueAccent,

borderRadius : BorderRadius.circular(20.0),

border : Border.all(couleur : Colors.blueAccent),

),

),

)

Étape 3: Vous pouvez personnaliser le curseur de la souris pour répondre à vos besoins et exigences en utilisant la propriété curseur.

curseur : SystemMouseCursors.click,

De nombreux choix supplémentaires s’offrent à vous lorsqu’il s’agit de modifier les curseurs. Certains des curseurs les plus fondamentaux sont les suivants :

SystemMouseCursors.click

SystemMouseCursors.help

SystemMouseCursors.move

SystemMouseCursors.allScroll

SystemMouseCursors.cellSystemMouseCursors.cell

SystemMouseCursors.aliasSystemMouseCursors.alias

….

Étape 4: En fonction de vos besoins, différents événements seront déclenchés.

onEnter: Cet événement sera déclenché lorsqu’un utilisateur placera le curseur de la souris à l’emplacement spécifié.

MouseRegion(

surEntrée : (s) {

// votre logique va ici…

},

)

En vol stationnaire: Cela se déclenchera continuellement tant que la souris s’attardera sur l’endroit sélectionné dans le document.

MouseRegion(

surHover : (s) {

// votre logique va ici…

},

)

à la sortie: Cet événement sera déclenché lorsque la souris s’éloignera de l’emplacement spécifié.

MouseRegion(

à la sortie : (s) {

// votre logique va ici…

},

)

Fichier de codes :

import ‘package:flutter/matériel.dart’ ;

void main() {

runApp(MonApp());

}

la classe MyApp étend StatelessWidget {

// Ce widget est la racine de votre application.

@passer outre

Génération de widget (contexte BuildContext) {

retourner MaterialApp(

debugShowCheckedModeBanner : faux,

titre : ‘Région de la souris’,

thème : ThèmeDonnées(

primarySwatch : Colors.blue,

),

home : MyHomePage (titre : ‘Flutter Mouse Region’),

);

}

}

class MyHomePage étend StatefulWidget {

Titre de la chaîne ;

MyHomePage({obligatoire this.title});

@passer outre

_MyHomePageState createState() => _MyHomePageState();

}

class _MyHomePageState étend State {

État de la chaîne = ”;

@passer outre

Génération de widget (contexte BuildContext) {

retour Échafaudage(

barre d’application : barre d’application(

titre : Texte(widget.titre),

),

corps : centre (

enfant : Colonne(

crossAxisAlignment : CrossAxisAlignment.center,

mainAxisAlignment : MainAxisAlignment.center,

enfants: [

Text(‘Mouse Status : $status’),

SizedBox(

height: 30,

),

MouseRegion(

cursor: SystemMouseCursors.click,

opaque: false,

onEnter: (s) {

setState(() {

status = ‘Mouse Entered in region’;

});

},

onHover: (s) {

setState(() {

status = ‘Mouse hovering on region’;

});

},

onExit: (s) {

setState(() {

status = ‘Mouse exit from region’;

})

},

child: Container(

height: 80.0,

width: 80.0,

decoration: BoxDecoration(

color: Colors.blueAccent,

borderRadius: BorderRadius.circular(20.0),

border: Border.all(color: Colors.blueAccent),

),

),

),

],

),

),

)

}

En relation :  9 meilleurs trucs et astuces Xiaomi Mi 9T que vous devriez savoir

}

Derniers mots

Dans ce didacticiel, nous avons couvert les principes fondamentaux de l’utilisation du widget MouseRegion dans un développement d’applications mobiles flutter; vous pouvez personnaliser le code selon vos préférences. Il s’agissait d’une brève introduction à la classe MouseRegion de notre point de vue, et elle est fonctionnelle en utilisant le langage de programmation Flutter.

Nous espérons que cet article de blog vous a fourni suffisamment de connaissances pour expérimenter le widget MouseRegion dans vos applications Flutter à l’avenir. Vous pouvez également consulter Flutter Agency, un leader société de développement d’applications de santé aux Etats-Unis. Il est conseillé d’expérimenter différents widgets flottants lors de l’utilisation de ce widget.

Moyens Staff
Moyens I/O Staff vous a motivé, donner des conseils sur la technologie, le développement personnel, le style de vie et des stratégies qui vous aider.
Please rotate your device