Share
Aujourd'hui, presque toutes les applications mobiles non-triviales ont probablement des listes dans leurs mises en page. En effet, l'utilisation d'une liste déroulante est souvent le moyen le plus simple d'afficher un grand nombre d'éléments similaires sur un petit écran..
La structure Flutter offre plusieurs widgets que vous pouvez utiliser pour créer et afficher de telles listes avec un minimum de code. Dans ce tutoriel, je vais vous montrer comment les utiliser avec des sources de données locales et distantes..
Si vous avez besoin d'afficher un petit nombre d'éléments similaires et que vous êtes certain que l'écran de l'utilisateur sera en mesure de les afficher simultanément, utilisez la commande Colonne widget est la chose la plus efficace à faire.
Pour créer une liste dans votre application Flutter, vous pouvez utiliser le liste classe offerte par le langage de programmation Dart. Après avoir créé la liste, vous pouvez utiliser ses ajouter() méthode pour ajouter un nombre quelconque d’articles. Le code suivant vous montre comment créer une liste contenant trois RaisedButton widgets:
// Créer liste listemyItems = new List (); // Ajoute trois widgets de bouton à celui-ci myItems.add (new RaisedButton (child: new Text ("Twitter"), onPressed: () )); myItems.add (new RaisedButton (child: new Text ("Facebook"), onPressed: () )); myItems.add (new RaisedButton (child: new Text ("Reddit"), onPressed: () ));
Notez que chaque élément de la liste a un vide onPressed gestionnaire d'événements qui lui est associé car, sans cela, l'élément serait désactivé.
Maintenant que la liste est prête, vous pouvez l’affecter directement à la liste. les enfants propriété du Colonne widget à afficher. Toutefois, vous voudrez généralement aussi spécifier où les éléments de la liste doivent être placés à l'écran. Parce que le Colonne widget est un widget flex, vous pouvez contrôler la position des éléments le long de son axe principal et de son axe transversal à l'aide du bouton mainAxisAlignment et crossAxisAlignment Propriétés. Par défaut, pour le Colonne widget, l'axe principal est l'axe vertical et l'axe transversal est l'axe horizontal.
Le code suivant vous montre comment étendre les trois boutons sur l'axe horizontal et les placer au centre de l'écran verticalement:
Colonne colonne = nouvelle colonne (mainAxisAlignment: MainAxisAlignment.center, crossAxisAlignment: CrossAxisAlignment.stretch, children: myItems);
Voici à quoi ressemblera la colonne maintenant:
Il est important de noter que vous rencontrerez une erreur d’exécution si un Colonne Le widget ne peut pas accueillir tous ses enfants. Par exemple, si vous aviez plus d’une douzaine de RaisedButton widgets dans votre liste au lieu de trois, vous verrez un message d'erreur qui ressemble à ceci:
Pour les listes un peu plus grandes, celles dont le contenu risque de déborder de l'écran, vous devez envisager d'utiliser un ListView widget parce qu'il prend en charge le défilement.
Vous avez peut-être remarqué que le code que nous avons écrit pour créer la liste à l'étape précédente était à la fois long et répétitif. Créer une liste plus longue en utilisant la même approche peut être très fastidieux. Une approche alternative simple consiste à utiliser deux listes: une contenant les données et une autre contenant les widgets..
Voici comment vous pouvez utiliser le [] opérateur pour créer rapidement une liste de données qui, pour le moment, ne contient que plusieurs chaînes:
listedata = ["Twitter", "Reddit", "YouTube", "Facebook", "Vimeo", "GitHub", "GitLab", "BitBucket", "LinkedIn", "Moyen", "Tumblr", "Instagram", " Pinterest "];
Pour convertir la liste de chaînes ci-dessus en une liste de RaisedButton widgets, vous pouvez utiliser le carte() et lister() méthodes. Avec le carte() méthode, vous pouvez utiliser chaque chaîne pour générer un nouveau RaisedButton widget. Et avec le lister() méthode, vous pouvez convertir le Iterable objet retourné par le carte() méthode dans un réel liste objet. Le code suivant vous montre comment:
listemyWidgets = data.map ((item) retour new new RaisedButton (child: new Text (item), onPressed: ()) async String url = "https: // $ item .com"; if (wait canLaunch (url )) attend le lancement (url););). toList ();
Par souci d’exhaustivité, le code ci-dessus vous indique également comment créer un onPressed gestionnaire d'événements qui utilise le canLaunch () et lancement() méthodes offertes par le url_launcher package pour ouvrir le site Web que l'utilisateur a sélectionné dans le navigateur par défaut.
Une fois que votre liste est prête, vous pouvez la transmettre au les enfants propriété du ListView widget pour l'afficher.
ListView myList = new ListView (enfants: myWidgets);
À ce stade, si vous exécutez l'application, vous devriez pouvoir faire défiler la liste et appuyer sur n'importe quel bouton pour lancer le site Web associé..
le ListView Le widget vous permet de placer un seul élément sur son axe transversal. L'élément sera, par défaut, étiré pour occuper tout l'espace disponible sur cet axe. Si vous voulez plus de flexibilité, vous devriez envisager d'utiliser un GridView widget à la place, qui vous permet de spécifier le nombre d'éléments que vous souhaitez sur l'axe transversal.
Le code suivant utilise le GridView.count () constructeur pour créer un GridView widget qui affiche deux éléments par ligne:
GridView myGrid = GridView.count (crossAxisCount: 2, enfants: myWidgets);
Voici à quoi ressemble la grille:
Pour les listes de données contenant plus de quelques douzaines d'éléments, évitez de générer manuellement des listes de widgets, comme vous le faisiez dans une étape précédente. Pourquoi? Parce que créer un widget est une opération coûteuse et que de grandes listes de widgets peuvent utiliser beaucoup de mémoire.
Au lieu de cela, vous devriez utiliser le ConstructeurIndexé fonction, qui vous permet de générer des widgets uniquement lorsque l'utilisateur a besoin de les voir. Avec celui-ci, vous pouvez générer des widgets paresseusement lorsque l'utilisateur fait défiler votre ListView widget.
Il est peu probable que de grandes quantités de données soient définies directement dans vos applications. En règle générale, vous récupérez de telles données sur un serveur distant. Par conséquent, pour vous donner un exemple réaliste, laissez-moi maintenant vous montrer comment extraire 100 questions de Stack Overflow à l'aide de l'API Stack Exchange et les afficher à la demande..
Commencez par créer une sous-classe du StatefulWidget classe, qui agira comme un conteneur pour votre ListView widget et remplacer sa createState () méthode.
La classe VeryLargeListHolder étend StatefulWidget @override StatecreateState () retour new myState ();
le Mon état La classe mentionnée dans le code ci-dessus n’existe pas encore. Créez-la et remplacez-la. construire() méthode.
la classe MyState étend l'Etat@override Widget build (contexte BuildContext) // TODO
Ensuite, ajoutez un liste objet comme l'une des variables membres de la classe. Vous allez l'utiliser pour stocker les questions que vous avez téléchargées à partir de Stack Overflow. De plus, ajoutez le noeud final de l'API en tant que autre variable.
Répertoriez les questions String endpoint = "https://api.stackexchange.com/2.2/questions?" + "pagesize = 100 & order = desc & sort = activity & site = stackoverflow";
À moins que vous ne souhaitiez que vos utilisateurs appuient sur un bouton pour télécharger les questions, je vous suggère de les télécharger automatiquement lorsque le widget est en cours d'initialisation. Par conséquent, remplacez le initState () et appelez une nouvelle méthode asynchrone appelée loadData ().
@override void initState () super.initState (); loadData (); void loadData () async // Plus de code ici
À l'intérieur de loadData () méthode, vous pouvez utiliser le obtenir() fonction de Dart http package pour télécharger les questions. Le point de terminaison de l'API renvoie un document JSON, que vous pouvez analyser à l'aide du json.decode () fonction disponible dans Dart convertir paquet. Le code suivant vous montre comment:
String rawData = (wait http.get (endpoint)). Body; Map jsonData = json.decode (rawData);
Une fois le document JSON converti en un fichier Carte objet, vous pouvez utiliser la valeur associée à son articles clé pour initialiser le des questions variable. La variable, cependant, fait partie de l'état du widget. Par conséquent, vous devez vous assurer de le mettre à jour à l’intérieur du setState () méthode seulement. Voici comment:
setState (() questions = jsonData ["items"];);
À ce stade, vous pouvez créer un nouveau ListView widget en utilisant le ListView.builder () constructeur, qui attend un ConstructeurIndexé fonction et un élément comptent comme arguments. Pour l’instant, le nombre d’articles n’est autre que la taille de la des questions liste. En conséquence, ajoutez le code suivant dans le répertoire construire() méthode du Mon état classe:
ListView myList = ListView.builder (itemCount: questions == null? 0: questions.length, itemBuilder: (contexte BuildContext, index int) // Plus de code ici);
Dans la fonction de création, il vous suffit de créer une petite arborescence de widgets pour afficher divers détails sur chaque question téléchargée. Flutter Matériel Le paquet offre un widget très pratique appelé ListTile, ce qui vous permet de créer rapidement un tel arbre tout en respectant les directives de conception des matériaux.
Le code suivant vous montre comment afficher le titre et l'auteur de la question à l'aide du bouton Titre et Sous-titre propriétés du ListTile widget:
Accentsconagua
return new ListTile (title: Text (questions [index] ["title"]), sous-titre: Text ("Question posée par $ questions [index] [" propriétaire "] [" nom_écran "]"));Enfin, créez un nouveau Échafaud widget, attribuer le ListView widget à son corps propriété, et le retourner de la construire() méthode afin qu'il puisse être utilisé avec un MaterialApp widget. Facultativement, vous pouvez ajouter un AppBar widget à la Échafaud widget.
return new Scaffold (appBar: new AppBar (titre: new Text ("LargeListDemo")), corps: maListe);Voici à quoi ressemblera l'application après avoir téléchargé les questions:
Vous savez maintenant comment utiliser les listes dans une application Flutter. Dans ce didacticiel, vous avez non seulement appris à créer des listes et des grilles prenant en charge des sources de données volumineuses, mais également à rendre chaque élément de leur contenu interactif. Pour en savoir plus sur les listes dans Flutter, vous pouvez vous référer à la documentation officielle.
