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.
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")),
]
),
),
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 ...);
},
);