Flutter布局练习之ListView

2019/12/26 17:41:27 | 阅79 来源:好空间网络 [打印] [关闭]
 

class MyListView extends StatelessWidget{
  ///ListView是一个看滚动的组件,默认column方式排列 
  ///当他为竖型排列时候,子组件的宽度无效回直接拉伸到listview的宽度
  ///当他为横排时,子组件的高度无效回直接拉伸到listview的高度
  @override
  Widget build(BuildContext context) {
    return ListView(
      //Axis.horizontal时候为水平排列
      scrollDirection:Axis.vertical,//竖型排列
      //当竖型的时候,宽度无效但是子组件的高度可以设置,可以通过itemExtent设置子组件的高度
      //当为水平方向的时候,子组件高度无效,可以通过itemExtent设置子组件的宽度
      //当itemExtent和子组件的宽高有冲突的时候,itemExtent优先级大于子组件的优先级
      itemExtent:50,
      children: <Widget>[
       Container(
         width: 100,
         height: 100,
         color: Colors.red,
       ),Container(
         width: 100,
         height: 100,
         color: Colors.blue,
       )
      ],
    );
  }
}

效果:


QQ图片20191226174025.png


2:动态设置ListView,以数组的方式

class MyListView extends StatelessWidget{
  ///动态设置lIStView的值
  ///1:定义数组
  List<Widget> _getData(){    
    List<Widget> list=new List();
    for (var i = 0; i < 20; i++) {
      list.add(
        ListTile(title: Text("我是第$i个列表"),)
      );
    }
    return list;
  }

  @override
  Widget build(BuildContext context) {
    return ListView(  
      children:_getData()
    );
  }
}


QQ图片20191226174025.png


3:动态设置值listview的数据之json对象格式

class MyListView extends StatelessWidget{
  ///动态设置lIStView的值
  ///1:定义数组
  List<Widget> _getData(){    
    List<Widget> list=new List();
    for (var i = 0; i < 20; i++) {
      list.add(
        ListTile(title: Text("我是第$i个列表"),)
      );
    }
    return list;
  }

  ///2.定义一个json的数组  
  List<Widget> _getJson(){
    //直接设置2条数据,正式以后应该从服务器断请求
    List listData=[
      {
        "title":"生态文明思想在福建木兰溪的先行探索",
        "imageurl":"https://inews.gtimg.com/newsapp_ls/0/11071505202_640330/0"
      },
        {
        "title":"反差:内地去香港的人骤减 香港来内地的人增多",
        "imageurl":"https://inews.gtimg.com/newsapp_ls/0/11069411689_640330/0"
      }
    ];

    //利用Map循环数据 value是每次循环的当前对象
    var temp=listData.map((value){
      return Padding(
        padding: EdgeInsets.all(10),
        child:ListTile(
              leading: Image.network(value["imageurl"]),
              title: Text(value["title"]),
            )
        );
    });

    //这个方法返回的数据由于使用map循环他实际上是('xxx','zzz')这样的数据,不是list 所以需要toList()方法转换下
    return temp.toList();
  }

  @override
  Widget build(BuildContext context) {
    return ListView(  
      children:_getJson()
    );
  }
}

效果图:


QQ图片20191226174025.png


4:利用ListView.builder方法展现数据,这个方法适合比较多的widget的时候用,比如有100条数据,您总不能写100个widget吧

class MyListView extends StatelessWidget{
  //申请一个数组
  List list = new List();
  //新建构造函数
  MyListView(){
    for (var i = 0; i < 20; i++) {
      //增加String类型第数组
      list.add("我是第$i个数据");
    }
  }

  @override
  Widget build(BuildContext context) {
    //使用listView的builder方法填充数据,为什么要元这个方法呢?因为这个方法适合数据比较多的时候用
    return ListView.builder( 
      //builder需要传入用个itemCount 也就是准备循环多少次
      itemCount: list.length,
      //好需要传入也个itemBuilder方法 index是循环的下标
      itemBuilder: (context,index){
        return ListTile(
          //把list站的依次循环返回
          title: Text(list[index]),
        );
      },
    );
  }
}

效果图:


QQ图片20191226174025.png

经营许可证ICP:皖B2-20100052 公司邮箱:zcdnsz@jspkongjian.net
Copyright © 2004-2015, 安徽好空间网络科技有限公司 版权所有 , 本站素材部分来源于网络,如有侵权请告知删除。