Quelle est la fonction de la propriété "shrink wrap" dans Flutter ?

Question

Je suis un nouveau venu dans le monde de Flutter et j'ai hâte d'apprendre cette technologie. Je n'arrive pas à comprendre le fonctionnement de la propriété "shrink wrap" dans la vue en liste. Je n'ai pas pu comprendre la documentation de Flutter. Quelqu'un peut-il m'aider ? Merci d'avance.

Answer 1

En général, un ListView (ainsi que GridView , PageView y CustomScrollView ) tente de remplir tout l'espace disponible donné par l'élément parent, même si les éléments de la liste nécessiteraient moins d'espace.

Avec shrinkWrap: true vous pouvez modifier ce comportement de manière à ce que le ListView n'occupe que l'espace dont il a besoin (il continue à défiler lorsqu'il y a plus d'éléments).

Voici un exemple :

import 'package:flutter/material.dart';

void main() => runApp(App());

class App extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(),
        body: Center(
          child: Container(
            margin: EdgeInsets.all(32),
            decoration: BoxDecoration(border: Border.all(color: Colors.red)),
            child: ListView(
              shrinkWrap: false,
              children: <Widget>[
                ListTile(title: Text('Item 1')),
                ListTile(title: Text('Item 2')),
                ListTile(title: Text('Item 3')),
              ],
            ),
          ),
        ),
      ),
    );
  }
}

Avec shrinkWrap: false :

Avec shrinkWrap: true :

Vous pouvez l'utiliser dans AlertDialog s : Lorsqu'il n'y a que peu d'objets, le dialogue doit être aussi réduit que possible. Lorsqu'il y a beaucoup d'éléments, remplissez la hauteur de l'écran et faites défiler la liste :

Answer 2

Si vous le faites pas fixer le shrinkWrap propriété, votre ListView sera aussi grand que son parent.

Si vous le réglez sur true La liste s'enroulera autour de son contenu et sera aussi grande que les enfants le permettront.

Answer 3

Tous les ScrollView (ListView , GridView , CustomScrollView) ont une propriété shrinkWrap pour déterminer la taille de l'image. scrollDirection .

La direction de défilement de ScrollView peut donc avoir 02 tailles.

1. Même taille que la taille des parents.
2. Même taille que le contenu (taille pour tous les enfants).

Si la fonction shrinkWrap : false La taille de la direction de défilement du ScrollView est alors de même taille que la taille du parent .

Si la fonction shrinkWrap : true La taille de la direction de défilement du ScrollView est alors de même taille que la taille du contenu (taille pour tous les enfants) .

Mais pourquoi le ScrollView scrollDirection est-il nécessaire pour passer d'une taille à l'autre ?

La raison est la contrainte parentale du ScrollView.

• Si le parent de ScrollView donne un Contrainte forte ou faible Dans ce cas, la taille de la direction de défilement de votre ScrollView est la même que celle de son parent. [shrinkWrap : false].
• Si le parent de ScrollView donne un Contrainte non consolidée Dans ce cas, la taille de la direction de défilement de votre ScrollView doit être la même que celle de son contenu. [shrinkWrap : true]. Dans le cas contraire, il y aura une exception d'exécution pour hauteur non liée.

Answer 4

D'ailleurs, vous pouvez ajouter cette propriété à d'autres widgets tels que RisedButton pour réduire la taille de la cible du robinet au minimum prévu par la spécification du matériau.

materialTapTargetSize: MaterialTapTargetSize.shrinkWrap,