web-dev-qa-db-ja.com

Flutter：ヘッダー行をListViewに追加できますか

Flutterの非常に新しい。データのHTTPリクエストを利用し、ListViewを構築し、そのリストの行とその他の基本を編集することができました。優れた環境。

私はリストビューのためにうまく構築されていないヘッダーを一緒にまとめることができました...しかし、私はこれが正しくないことを知っています。ヘッダーテキストを正しく取得できません。

DrawerクラスにはDrawerHeaderクラスがあることがわかりますが、ListViewにListViewHeaderがあることはわかりません。

  @override 
 Widget build（BuildContext context）{
 return new Scaffold（
 appBar：new AppBar（
 title：new Text（ 'Contacts'）、
アクション：
 new IconButton（icon：new Icon（Icons.add_circle）、
 onPressed：getCustData 
）、
、
）、
 //body:
 body：new Column（
 children：
 new Row（
 children：
 new Expanded（child：new Text（ ''、style：new TextStyle（height：3.0、fontSize：15.2、fontWeight：FontWeight.bold、）））、
 new Expanded（child：new Text（ 'First名前 '、スタイル：new TextStyle（height：3.0、fontSize：15.2、fontWeight：FontWeight.bold、）））、
 new Expanded（child：new Text（' Last Name '、style：new TextStyle（height ：3.0、fontSize：15.2、fontWeight：FontWeight.bold、）））、
 new Expanded（child：new Text（ 'City'、style：new TextStyle（height：3.0、fontSize：15.2、fontWeight：FontWeight.bold、）））、
 new Expanded（child：new Text（ 'Customer Id '、スタイル：new TextStyle（height：3.0、fontSize：15.2、fontWeight：FontWeight.bold、）））、
 new Expanded（child：new 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

            ),
          ),
        ),
      ]
    )
);

}}

ありがとう。

enter image description here

listviewheaderflutter
21
davidk

これは私がこれをどのように解決したかです。他のソリューションについて考えさせてくれたnajeiraに感謝します。

最初の本文の列では、ヘッダーにListTileに使用したものと同じレイアウトを使用しました。

この場合、データListTileにはCircleAvatarが含まれているため、すべての水平方向の間隔は少しずれています... CircleAvatarがレンダリングされる5列...そして、等間隔の4列です。

だから... ListTileを最初の本文の列に追加し、CircleAvatarにbackgroundColorを透明にしてから、4つの見出しの行を追加しました。

        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

7
davidk

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 ...);
    },
);
32
najeira