ListView - flutter

竖向列表

Container(
        width: 300,
        child: ListView(
          children: [
            ListTile(  //ListTile为一种固定格式的元素, 有标题和副标题还可以加图标
              leading: Icon(Icons.home),
              title: Text("what are you doing?"),
              subtitle: Text("I'm eating."),
              trailing:Icon(Icons.home)
            ),
            ListTile(
              leading: Image.network("https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=2767608770,826089718&fm=26&gp=0.jpg"),
                title: Text("what are you doing?"),
                subtitle: Text("I'm eating."),
            ),
            ListTile(
              leading:Container(
                child: ClipOval(
                    child: Image.network(
                      "https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=2767608770,826089718&fm=26&gp=0.jpg",
                      fit: BoxFit.cover,
                    ),
                ),
                decoration: BoxDecoration(
                    // color: Colors.orange
                ),
              ),
              title: Text("what are you doing?"),
              subtitle: Text("I'm eating."),
            ),
          ],
        )
    );

横向列表

Container(
        height: 300,
        child: ListView(
          scrollDirection: Axis.horizontal, //horizontal为 横向列表, vertical为竖向列表
          children: [
            Container(
              child: Text("how are you? 怎么是你?"),
              width: 100,
              decoration: BoxDecoration(
                  color: Colors.orange
              ),
            ),
            Container(
              child: ListView(
                children: [
                  Image.network("https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=2767608770,826089718&fm=26&gp=0.jpg"),
                  Text("what are you doing?"),
                ],
              ),
              width: 100,
              decoration: BoxDecoration(
                  color: Colors.pink
              ),
            ),
            Container(
              child: Text("how are you? 怎么是你?"),
              width: 100,
              decoration: BoxDecoration(
                  color: Colors.lightBlue
              ),
            ),
          ],
        )
    );

动态构建ListTile

return list.map((e){
      return ListTile(
        leading: Icon(Icons.home),
        title: Text(e["title"]),
        subtitle: Text(e["age"].toString()),
      );
    }).toList();

使用ListView.builder

class HomeContent extends StatelessWidget{
  var list = [];
  HomeContent(){
    var list = [
      {
        "title" : "a",
        "age" : 1,
      },
      {
        "title" : "b",
        "age" : 2
      }
    ];

    this.list = list.map((e){
      return ListTile(
        leading: Icon(Icons.home),
        title: Text(e["title"]),
        subtitle: Text(e["age"].toString()),
      );
    }).toList();
   }
  _getData(){


  }
  @override
  Widget build(BuildContext context) {
    return ListView.builder(
        itemCount: this.list.length,
        itemBuilder: (context, index){
          return this.list[index];
    });
  }

}

class HomeContent extends StatelessWidget{
  var list = [
    {
      "title" : "a",
      "age" : 1,
    },
    {
      "title" : "b",
      "age" : 2
    }
  ];

  @override
  Widget build(BuildContext context) {
    return ListView.builder(
        itemCount: this.list.length,
        itemBuilder: (context, index){
          return ListTile(
            leading: Icon(Icons.home),
            title: Text(this.list[index]["title"]),
            subtitle: Text(this.list[index]["age"].toString()),
          );
    });
  }
}