Flutter中ListView的应用

从接口获取新闻数据并渲染

示例代码：

class _StuDemoState extends State<StuDemo> {
  List list = new List();
  void getListData() async{
    print("获取新闻");
    var url = "http://v.juhe.cn/toutiao/index?type=top&key=你的KEY";
    var response = await http.get(url);
    if (re![在这里插入图片描述](https://img-blog.csdnimg.cn/20200311142532726.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FpYW55dWFuXzY2Ng==,size_16,color_FFFFFF,t_70)sponse.statusCode == 200) {
      print("-------------------------");
      var jsonResponse = convert.jsonDecode(response.body);

      setState(() {
        list = jsonResponse["result"]["data"];
      });


    } else {
      print('Request failed with status: ${response.statusCode}.');
    }
  }
  @override
  void initState() {
    // TODO: implement initState
    getListData();
    super.initState();
  }
  @override
  Widget build(BuildContext context) {
    return ListView(
      children: this.list.map((value){
        return ListTile(
          title: Text(value["title"]),
          subtitle: Text("来源："+ value["author_name"]),
          leading: Image.network(value["thumbnail_pic_s"]),
        );
      }).toList(),
    );
  }
}

效果图：

动态列表

可以通过ListView.builder来实现。
示例代码：

class topContent extends StatelessWidget{
  List<String> titleList = new List();
  var random = new Random();
  topContent(){
    for(int i = 0;i<20;i++){
      titleList.add("我是列表$i");
    }
  }
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Container(
      child: ListView.builder(
          itemCount: this.titleList.length,
          itemBuilder: (context,index){
            return Text(
              this.titleList[index],
              style: TextStyle(
                fontSize: (random.nextInt(8) + 14.0),
                color: Color.fromRGBO( random.nextInt(255), random.nextInt(255), random.nextInt(255),1),
              ),
              textAlign: TextAlign.center,
            );
          })
      );

  }
}

效果图：

1.初始化

示例：

 ListView(
      children: <Widget>[]);

2.列表内容

在列表内容中可以用ListTitle类来实现。
在该类中可以用leading来设置左侧组件，
用trailing来设置右侧组件
用title来设置主要标题，
用subtitle来设置子标题的内容。
需要注意的是，在这些组件中，值是灵活多变的，可以是Text、Image等任意组件。

效果图：

示例代码：

 ListView(
      padding: EdgeInsets.all(10),
      children: <Widget>[
        ListTile(
          leading: Image.network(
            "https://imgcdn.toutiaoyule.com/20200305/20200305081740457576.jpeg",
            height: 60,
            width: 80,
            fit: BoxFit.cover,
          ),
          title: Text(
            "白岩松说：中国的高房价毁灭了年轻人爱情，也毁灭了年轻人想象力",
            style: TextStyle(
              fontSize: 18,
              color: Colors.blue,
            ),
            maxLines: 1,
          ),
          subtitle: Text(
            "在一线城市，房价都是好几万一平，买个房子动辄几百上千万，刚毕业的我们面对如此高昂的房价，看着手上的工资，大概几个月也买不到一平吧，连房租也要将工资耗费不少",
            style: TextStyle(
                fontSize: 14,
                color: Colors.red
            ),
            maxLines: 2,
          ),
        ),
        ListTile(
          leading: Image.network(
            "https://imgcdn.toutiaoyule.com/20200306/20200306150445005708a.jpg",
            height: 60,
            width: 80,
            fit: BoxFit.cover,
          ),
          title: Text(
            "交通运输部：高速公路日均减免通行费约15亿元",
            style: TextStyle(
              fontSize: 18,
              color: Colors.blue,
            ),
            maxLines: 1,
          ),
          subtitle: Text(
            "交通运输部副部长刘小明介绍，为了做好疫情的防控工作，经国务院同意，今年春节的收费公路免费通行政策延了三次，第三次延续是从2月17日开始的，免费的车辆范围也从原来的7座及以下的小客车扩展到所有的车辆。",
            style: TextStyle(
                fontSize: 14,
                color: Colors.red
            ),
            maxLines: 2,
          ),
        ),
        ListTile(
          leading: Image.network(
            "https://imgcdn.toutiaoyule.com/20200306/20200306142133530264a.jpg",
            height: 60,
            width: 80,
            fit: BoxFit.cover,
          ),
          title: Text(
            "224.5亿元，西成铁路四川段施工开建，南北铁路再增大干线",
            style: TextStyle(
              fontSize: 16,
              color: Colors.blue,
            ),
            maxLines: 1,
          ),
          subtitle: Text(
            "重走长征路，“爬雪山、过草地”不再是步行，以后将有动车通行，天堑变通途。",
            style: TextStyle(
                fontSize: 14,
                color: Colors.red
            ),
            maxLines: 2,
          ),
        ),

      ],
    );

3.列表方向

在ListView中，可以通过scrollDirection组件来改变列表的滚动方向，当没有设置时，该值默认为：Axis.vertical。即垂直列表。
我们可以将它设置为：Axis.horizontal使它变成水平列表。

示例代码：

ListView(
      scrollDirection: Axis.horizontal,
      padding: EdgeInsets.all(10),
      children: <Widget>[
        Image.network(
          "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1583492557359&di=9aa1c6ce2c5e20edfa80b83f16dbb0ea&imgtype=0&src=http%3A%2F%2Fpic17.nipic.com%2F20111104%2F8456091_115500418360_2.jpg",
          height: 200,
          width: 200,
          fit: BoxFit.fitWidth,
        ),
        Image.network(
          "https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=3365728441,2404146341&fm=26&gp=0.jpg",
          height: 200,
          width: 200,
          fit: BoxFit.fitWidth,
        ),
        Image.network(
          "https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=4108374467,3620349645&fm=26&gp=0.jpg",
          height: 200,
          width: 200,
          fit: BoxFit.fitWidth,
        ),
        Image.network(
          "https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1006346969,3588037767&fm=26&gp=0.jpg",
          height: 200,
          width: 200,
          fit: BoxFit.fitWidth,
        ),
        Image.network(
          "https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=40913596,4237870527&fm=26&gp=0.jpg",
          height: 200,
          width: 200,
          fit: BoxFit.fitWidth,
        ),

      ],
    );

效果图：

需要注意的是：列表可以嵌套。