web-dev-qa-db-fra.com

Flutter: Puis-je ajouter une ligne d'en-tête à un ListView

Très nouveau chez Flutter. J'ai pu utiliser les requêtes HTTP pour les données, créer un ListView, éditer une ligne dans cette liste et d'autres bases. Excellent environnement.

J'ai réussi à bricoler un en-tête mal construit pour un ListView ... mais je sais que ce n'est pas bien. Je ne parviens pas à aligner correctement le texte de l'en-tête.

Je vois que la classe Drawer a une classe DrawerHeader, mais ne peux pas voir que ListView a un ListViewHeader.

   @override 
 Widget build (contexte BuildContext) {
 renvoie un nouvel échafaudage (
 appBar: nouvelle AppBar (
 titre: nouveau texte ('Contacts'), 
 actions: [
 new IconButton (icône: new Icon (Icons.add_circle), 
 onPressed: getCustData 
), 
], 
), 
 //body :
 body: nouvelle colonne (
 enfants: [
 new Row (
 enfants: [
 new Expanded (enfant: new Text ('', style: new TextStyle (hauteur: 3.0, fontSize: 15.2, fontWeight: FontWeight.bold,))), 
 new Expanded (enfant: nouveau Text ('Premier Nom ', style: new TextStyle (hauteur: 3.0, fontSize: 15.2, fontWeight: FontWeight.bold,))), 
 New Expanded (enfant: nouveau Text (' Nom ', style: new TextStyle (height : 3.0, fontSize: 15.2, fontWeight: FontWeight.bold,))), 
 new Expanded (child: new Text ('Ville', style: new TextStyle (height: 3.0, fontSize: 15.2, fontWeight: FontWeight.bold,))), 
 new Expanded (child: nouveau Text ('Client Id ', style: new TextStyle (hauteur: 3.0, fontSize: 15.2, fontWeight: FontWeight.bold,)), 
 New Expanded (enfant: nouveau Text (' ', style: new TextStyle (height: 3.0 , fontSize: 15.2, fontWeight: FontWeight.bold,))), 
] 
), 
 
           new Expanded(child:Container(
            child: ListView.builder(

              itemCount: data == null ? 0 : data.length,
              itemBuilder: (BuildContext context, int index) {

                return new InkWell(
                  onTap: () {
                    Navigator.Push(
                      context,
                      new MaterialPageRoute(
                          builder: (context) => new APIDetailView(data[index])),
                    );
                  },

                  child: new ListTile(                //return new ListTile(
                      onTap: null,
                      leading: new CircleAvatar(
                        backgroundColor: Colors.blue,
                        child: new Text(data[index]["FirstName"][0]),
                      ),
                      title: new Row(
                          children: <Widget>[
                            new Expanded(child: new Text(data[index]["FirstName"])),
                            new Expanded(child: new Text(data[index]["LastName"])),
                            new Expanded(child: new Text(data[index]["Bill_City"])),
                            new Expanded(child: new Text(data[index]["Customer_Id"])),
                          ]
                      )
                  ),

                );
              }, //itemBuilder

            ),
          ),
        ),
      ]
    )
);

}}

Merci.

 enter image description here

9
davidk

Voici comment j'ai résolu ceci. Merci Najeira de m'avoir fait penser à d'autres solutions.

Dans le premier corps de la colonne, j'ai utilisé la même présentation pour mon en-tête que pour ListTile.

Parce que mes données ListTile, dans ce cas, incluent un CircleAvatar, tout l'espacement horizontal est légèrement décalé ... 5 colonnes où CircleAvatar est restitué ... puis 4 colonnes espacées de manière égale.

Alors ... j'ai ajouté un ListTile au premier corps de la colonne, un CircleAvatar avec un backgroundColor de transparent, puis un Row de mes 4 titres.

        new ListTile(
        onTap: null,
        leading: new CircleAvatar(
          backgroundColor: Colors.transparent,
        ),
        title: Row(
            children: <Widget>[
              new Expanded(child: new Text("First Name")),
              new Expanded(child: new Text("Last Name")),
              new Expanded(child: new Text("City")),
              new Expanded(child: new Text("Id")),
            ]
        ),
      ),

 enter image description here

0
davidk

Renvoie l'en-tête comme première ligne par itemBuilder:

ListView.builder(
    itemCount: data == null ? 1 : data.length + 1,
    itemBuilder: (BuildContext context, int index) {
        if (index == 0) {
            // return the header
            return new Column(...);
        }
        index -= 1;

        // return row
        var row = data[index];
        return new InkWell(... with row ...);
    },
);
11
najeira