web-dev-qa-db-de.com

Flattern: Kann ich einer ListView eine Kopfzeile hinzufügen?

Sehr neu für Flutter. Ich konnte HTTP-Anforderungen für Daten verwenden, eine ListView erstellen, eine Zeile in dieser Liste bearbeiten und andere Grundlagen. Hervorragendes Umfeld.

Ich habe es geschafft, einen schlecht konstruierten Header für eine ListView zusammenzufügen, aber ich weiß, dass dies nicht richtig ist. Ich kann den Header-Text nicht richtig ausrichten.

Ich sehe, dass die Drawer-Klasse eine DrawerHeader-Klasse hat, kann aber nicht sehen, dass ListView einen ListViewHeader hat.

   @override 
 Widget-Erstellung (BuildContext-Kontext) {
 Neues Gerüst zurückgeben (
 App-Leiste: Neue App-Leiste (
 Titel: Neuer Text ('Kontakte'), 
 Aktionen: [
 neuer IconButton (Icon: neues Icon (Icons.add_circle), 
 onPressed: getCustData 
), 
], 
), 
 //body:
 body: new Column (
 children: [
 new Row (
 children: [
 new Expanded (untergeordnetes Element: neuer Text ('', Stil: neuer TextStyle (Höhe: 3.0, Schriftgröße: 15.2, Schriftgröße: FontWeight.bold,)), 
 new Expanded (untergeordnetes Element: neuer Text ('First Name ', Stil: neuer TextStyle (Höhe: 3.0, Schriftgröße: 15.2, SchriftGewicht: SchriftGewicht.fett,)), 
 Neu Erweitert (Kind: neuer Text (' Nachname ', Stil: neuer TextStyle (Höhe : 3.0, fontSize: 15.2, fontWeight: FontWeight.bold,))), 
 neu Erweitert (untergeordnet: neuer Text ('Stadt', Stil: neuer TextStil (Höhe: 3.0, Schriftgröße: 15.2, Schriftgewicht: Schriftgewicht.fett,)), 
 neu Erweitert (untergeordnet: neuer Text ('Kunde Id ', Stil: neuer TextStyle (Höhe: 3.0, Schriftgröße: 15.2, SchriftGewicht: SchriftGewicht.fett,)), 
 Neu Erweitert (Kind: neuer Text (' ', Stil: neuer TextStyle (Höhe: 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

            ),
          ),
        ),
      ]
    )
);

}}

Vielen Dank.

 enter image description here

9
davidk

So habe ich das gelöst. Danke, Najeira, dass ich über andere Lösungen nachgedacht habe.

In der ersten Body-Spalte habe ich dasselbe Layout für meine Kopfzeile verwendet, das ich für die ListTile verwendet habe.

Da meine Daten ListTile in diesem Fall einen CircleAvatar enthält, sind alle horizontalen Abstände etwas ... 5 Spalten, in denen der CircleAvatar gerendert wird ... und dann 4 gleichmäßig verteilte Spalten.

Also ... Ich habe der ersten Körperspalte ein ListTile hinzugefügt, einen CircleAvatar mit einer transparenten Hintergrundfarbe und dann eine Reihe meiner 4 Überschriften.

        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

Gibt den Header als erste Zeile von itemBuilder zurück:

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