4.Flutter中的ListView的用法。

ListView参数认知

列举一下ListView常用的参数:

参数名 参数说明
scrollDirection Axis.vertical竖向滑动,Axis.horizontal 横向滑动
padding 表示内边距
reverse 组件反向排序
children l列表元素

ListView基本使用

ListView的基本使用。

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'ListView组件的学习',
      home: Scaffold(
        appBar: AppBar(title: Text('ListView组件的学习')),
        body: BaseListView(),
      ),
    );
  }
}

class BaseListView extends StatelessWidget{

  @override
  Widget build(BuildContext context) {
    return ListView(
      children: [
        Image.network('http://n.sinaimg.cn/sinacn/w813h463/20180130/46b9-fyrcsrv7304762.png'),
        Image.network('https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=2344319804,963424543&fm=26&gp=0.jpg'),
        Image.network('http://n.sinaimg.cn/sinacn/w813h463/20180130/46b9-fyrcsrv7304762.png'),
        Image.network('https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=2344319804,963424543&fm=26&gp=0.jpg'),
        Image.network('http://n.sinaimg.cn/sinacn/w813h463/20180130/46b9-fyrcsrv7304762.png'),
        Image.network('https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=2344319804,963424543&fm=26&gp=0.jpg'),
        Image.network('http://n.sinaimg.cn/sinacn/w813h463/20180130/46b9-fyrcsrv7304762.png'),
        Image.network('https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=2344319804,963424543&fm=26&gp=0.jpg'),
        Image.network('http://n.sinaimg.cn/sinacn/w813h463/20180130/46b9-fyrcsrv7304762.png'),
        Image.network('https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=2344319804,963424543&fm=26&gp=0.jpg'),
      ],
    );
  }
}

效果如下:

上述效果看起来很low,所以我们添加一些元素,使其可以看得过眼

class ListViewWidgetTest extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    return Container(
      child: ListView(
        padding:  EdgeInsets.all(10),
        children: [
          Image.network('http://n.sinaimg.cn/sinacn/w813h463/20180130/46b9-fyrcsrv7304762.png'),
          Center(
            child: Container(
              alignment: Alignment.center,
              color: Colors.cyanAccent,
              padding: EdgeInsets.fromLTRB(0, 10, 0, 10),
              child: Text('无中生有'),
            ),
          ),
          Image.network('https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=2344319804,963424543&fm=26&gp=0.jpg'),
          Center(
            child: Container(
              alignment: Alignment.center,
              padding: EdgeInsets.fromLTRB(0, 10, 0, 10),
              child: Text('无中生有'),
            ),
          ),
          Image.network('http://n.sinaimg.cn/sinacn/w813h463/20180130/46b9-fyrcsrv7304762.png'),
          Center(
            child: Container(
              alignment: Alignment.center,
              padding: EdgeInsets.fromLTRB(0, 10, 0, 10),
              child: Text('无中生有'),
            ),
          ),
          Image.network('https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=2344319804,963424543&fm=26&gp=0.jpg'),
          Center(
            child: Container(
              alignment: Alignment.center,
              padding: EdgeInsets.fromLTRB(0, 10, 0, 10),
              child: Text('无中生有'),
            ),
          ),
          Image.network('http://n.sinaimg.cn/sinacn/w813h463/20180130/46b9-fyrcsrv7304762.png'),
          Center(
            child: Container(
              alignment: Alignment.center,
              padding: EdgeInsets.fromLTRB(0, 10, 0, 10),
              child: Text('无中生有'),
            ),
          ),
          Image.network('https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=2344319804,963424543&fm=26&gp=0.jpg'),
          Center(
            child: Container(
              alignment: Alignment.center,
              padding: EdgeInsets.fromLTRB(0, 10, 0, 10),
              child: Text('无中生有'),
            ),
          ),
          Image.network('http://n.sinaimg.cn/sinacn/w813h463/20180130/46b9-fyrcsrv7304762.png'),
          Center(
            child: Container(
              alignment: Alignment.center,
              padding: EdgeInsets.fromLTRB(0, 10, 0, 10),
              child: Text('无中生有'),
            ),
          ),
          Image.network('https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=2344319804,963424543&fm=26&gp=0.jpg'),
          Center(
            child: Container(
              alignment: Alignment.center,
              padding: EdgeInsets.fromLTRB(0, 10, 0, 10),
              child: Text('无中生有'),
            ),
          ),
          Image.network('http://n.sinaimg.cn/sinacn/w813h463/20180130/46b9-fyrcsrv7304762.png'),
          Center(
            child: Container(
              alignment: Alignment.center,
              padding: EdgeInsets.fromLTRB(0, 10, 0, 10),
              child: Text('无中生有'),
            ),
          ),
          Image.network('https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=2344319804,963424543&fm=26&gp=0.jpg'),
          Center(
            child: Container(
              alignment: Alignment.center,
              padding: EdgeInsets.fromLTRB(0, 10, 0, 10),
              child: Text('无中生有'),
            ),
          ),
        ],
      ),
    );
  }
}

其效果如下:
4.Flutter中的ListView的用法。_第1张图片

ListView与结合ListTile使用

直接上代码

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'ListView组件的学习',
      home: Scaffold(
        appBar: AppBar(title: Text('ListView组件的学习')),
        body: BaseListView(),
      ),
    );
  }
}

class BaseListView extends StatelessWidget{

  @override
  Widget build(BuildContext context) {
    String _pathLeft='http://n.sinaimg.cn/sinacn/w813h463/20180130/46b9-fyrcsrv7304762.png';
    String _pathRight='https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=2344319804,963424543&fm=26&gp=0.jpg';
    return ListView(
      padding:  EdgeInsets.all(10),
      children: [
        ListTile(
          leading: Icon(            //leading设置左侧的的小部件,一般使用Icon或者Image
            Icons.map,              //Icon图标
            color: Colors.cyanAccent, //设置Icon颜色
            size: 20,               //设置Icon大小
            semanticLabel: 'Icon',  //设置Icon的语义
          ),
          trailing: Image.network(_pathRight),  //设置右侧的小部件,一般使用Icon或者Image
          title: Text('这是头部'),
          subtitle: Text('这是身体'),
        ),
      ],
    );
  }
}

效果如下:
4.Flutter中的ListView的用法。_第2张图片

注意事项:

我们先来看看代码,从代码中可以看到我们只给Contaniner组件设置宽高,按照我们所想,应该呈现出来的是宽高为100的一个正方形Item,但是该代码运行结果如下图所示:


class ListViewWidgetTest extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    return
       ListView(
        padding:  EdgeInsets.all(10),
        children: [
            Container(
              color: Colors.red,
              width: 100,
              height: 100,
            ),
          Container(
            color: Colors.blue,
            width: 100,
            height: 100,
          ),
          Container(
            color: Colors.amber,
            width: 100,
            height: 100,
          ),
          Container(
            color: Colors.red,
            width: 100,
            height: 100,
          ),
          Container(
            color: Colors.blue,
            width: 100,
            height: 100,
          ),
          Container(
            color: Colors.amber,
            width: 100,
            height: 100,
          ),  Container(
            color: Colors.red,
            width: 100,
            height: 100,
          ),
          Container(
            color: Colors.blue,
            width: 100,
            height: 100,
          ),
          Container(
            color: Colors.amber,
            width: 100,
            height: 100,
          ),
          ]
      );

  }
}

4.Flutter中的ListView的用法。_第3张图片
那么问题来了,如果我们想要实现一个宽高为100的item怎么办?
这个很简单,我们只需要将ListView给定高度即可。
这里得提一下,我们的ListView没有宽高属性,所以我们需要控制它的上级组件的宽高,从而控制ListView的宽高
代码如下:

class ListViewWidgetTest extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    return Container(
      width: 100,
      child: ListView(
            children: [
              Container(
                color: Colors.red,
           
                height: 100,
              ),
              Container(
                color: Colors.blue,
             
                height: 100,
              ),
              Container(
                color: Colors.amber,
                height: 100,
              ),
              Container(
                color: Colors.red,
                height: 100,
              ),
              Container(
                color: Colors.blue,
                height: 100,
              ),
              Container(
                color: Colors.amber,
                height: 100,
              ),  Container(
                color: Colors.red,
                height: 100,
              ),
              Container(
                color: Colors.blue,
                height: 100,
              ),
              Container(
                color: Colors.amber,
                height: 100,
              ),
            ]
        ),
    );
  }
}

你可能会发现这部分代码中为什么,不去设置子item的布局宽度?这是因为我们ListView竖直方向中,我们的子item宽度是跟随ListView的宽度。所以我们只需要设置子item的高度即可

在没有给ListView设置宽高时,单纯的给ListViewitem设置宽高时无效的,其效果会填满整个屏幕。我们应该判断ListView为横向还是竖向,再去设置宽度或者高度。

ListView的横向滑动(水平列表)

我们根据上面所学知识写一个item宽高为100的横向列表


class HorizontalListView extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      height: 100,
      child: ListView(scrollDirection: Axis.horizontal, children: [
        Container(
          color: Colors.red,
          width: 100,
        ),
        Container(
          color: Colors.blue,
          width: 100,
        ),
        Container(
          color: Colors.amber,
          width: 100,
        ),
        Container(
          color: Colors.red,
          width: 100,
        ),
        Container(
          color: Colors.blue,
          width: 100,
        ),
        Container(
          color: Colors.amber,
          width: 100,
        ),
        Container(
          color: Colors.red,
          width: 100,
        ),
        Container(
          color: Colors.blue,
          width: 100,
        ),
        Container(
          color: Colors.amber,
          width: 100,
        ),
      ]),
    );
  }
}

效果展示:
4.Flutter中的ListView的用法。_第4张图片

数据装填进阶使用

我们将ListView中的children抽离成为一个方法,这样就不会显得这么臃肿。

class ListViewTest extends StatelessWidget{
  
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return ListView(
      children: _getData(),
    );
  }
  List _getData() {
    return [
      ListTile(
        title: Text('我是一个列表'),
      ),
      ListTile(
        title: Text('我是一个列表'),
      ),
      ListTile(
        title: Text('我是一个列表'),
      ),
      ListTile(
        title: Text('我是一个列表'),
      ),
      ListTile(
        title: Text('我是一个列表'),
      ),
    ];
  }
}

4.Flutter中的ListView的用法。_第5张图片

循环添加数据

class ListViewTest extends StatelessWidget{

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return ListView(
      children: _getData(),
    );
  }
  List _getData() {
    List list=new List();
    for(int i=0;i<20;i++){
      list.add(ListTile(
        title: Text(
            '这是第$i标题',
        ),
      ));
    }
    return list;
  }
}

效果如下:
4.Flutter中的ListView的用法。_第6张图片

进行json解析数据,并且展示到ListView这种

首先我们创建一个名为listData.dart文件,然后用于存放我们的json数据

List listData=[
  {
    "title":"五资妈ki 那鲁托--漩涡鸣人",
    "author":"卡诶本新诺酒煮---影分身之术",
    "imageUrl":"https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1578674333725&di=ec3da407df99c6251631c8be300cd479&imgtype=jpg&src=http%3A%2F%2Fimg3.imgtn.bdimg.com%2Fit%2Fu%3D2008737948%2C2044904539%26fm%3D214%26gp%3D0.jpg",
  },
  {
    "title":"萨斯给",
    "author":"啊妈忒路斯",
    "imageUrl":"http://n.sinaimg.cn/sinacn/w813h463/20180130/46b9-fyrcsrv7304762.png",
  },
  {
    "title":"五资妈ki 那鲁托--漩涡鸣人",
    "author":"卡诶本新诺酒煮---影分身之术",
    "imageUrl":"https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1578674333725&di=ec3da407df99c6251631c8be300cd479&imgtype=jpg&src=http%3A%2F%2Fimg3.imgtn.bdimg.com%2Fit%2Fu%3D2008737948%2C2044904539%26fm%3D214%26gp%3D0.jpg",
  },
  {
    "title":"萨斯给",
    "author":"啊妈忒路斯",
    "imageUrl":"http://n.sinaimg.cn/sinacn/w813h463/20180130/46b9-fyrcsrv7304762.png",
  },
  {
    "title":"五资妈ki 那鲁托--漩涡鸣人",
    "author":"卡诶本新诺酒煮---影分身之术",
    "imageUrl":"https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1578674333725&di=ec3da407df99c6251631c8be300cd479&imgtype=jpg&src=http%3A%2F%2Fimg3.imgtn.bdimg.com%2Fit%2Fu%3D2008737948%2C2044904539%26fm%3D214%26gp%3D0.jpg",
  },
  {
    "title":"萨斯给",
    "author":"啊妈忒路斯",
    "imageUrl":"http://n.sinaimg.cn/sinacn/w813h463/20180130/46b9-fyrcsrv7304762.png",
  },
  {
    "title":"五资妈ki 那鲁托--漩涡鸣人",
    "author":"卡诶本新诺酒煮---影分身之术",
    "imageUrl":"https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1578674333725&di=ec3da407df99c6251631c8be300cd479&imgtype=jpg&src=http%3A%2F%2Fimg3.imgtn.bdimg.com%2Fit%2Fu%3D2008737948%2C2044904539%26fm%3D214%26gp%3D0.jpg",
  },
  {
    "title":"萨斯给",
    "author":"啊妈忒路斯",
    "imageUrl":"http://n.sinaimg.cn/sinacn/w813h463/20180130/46b9-fyrcsrv7304762.png",
  },
  {
    "title":"五资妈ki 那鲁托--漩涡鸣人",
    "author":"卡诶本新诺酒煮---影分身之术",
    "imageUrl":"https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1578674333725&di=ec3da407df99c6251631c8be300cd479&imgtype=jpg&src=http%3A%2F%2Fimg3.imgtn.bdimg.com%2Fit%2Fu%3D2008737948%2C2044904539%26fm%3D214%26gp%3D0.jpg",
  },
  {
    "title":"萨斯给",
    "author":"啊妈忒路斯",
    "imageUrl":"http://n.sinaimg.cn/sinacn/w813h463/20180130/46b9-fyrcsrv7304762.png",
  },
  {
    "title":"五资妈ki 那鲁托--漩涡鸣人",
    "author":"卡诶本新诺酒煮---影分身之术",
    "imageUrl":"https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1578674333725&di=ec3da407df99c6251631c8be300cd479&imgtype=jpg&src=http%3A%2F%2Fimg3.imgtn.bdimg.com%2Fit%2Fu%3D2008737948%2C2044904539%26fm%3D214%26gp%3D0.jpg",
  },
  {
    "title":"萨斯给",
    "author":"啊妈忒路斯",
    "imageUrl":"http://n.sinaimg.cn/sinacn/w813h463/20180130/46b9-fyrcsrv7304762.png",
  },
  {
    "title":"五资妈ki 那鲁托--漩涡鸣人",
    "author":"卡诶本新诺酒煮---影分身之术",
    "imageUrl":"https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1578674333725&di=ec3da407df99c6251631c8be300cd479&imgtype=jpg&src=http%3A%2F%2Fimg3.imgtn.bdimg.com%2Fit%2Fu%3D2008737948%2C2044904539%26fm%3D214%26gp%3D0.jpg",
  },
  {
    "title":"萨斯给",
    "author":"啊妈忒路斯",
    "imageUrl":"http://n.sinaimg.cn/sinacn/w813h463/20180130/46b9-fyrcsrv7304762.png",
  },
  {
    "title":"五资妈ki 那鲁托--漩涡鸣人",
    "author":"卡诶本新诺酒煮---影分身之术",
    "imageUrl":"https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1578674333725&di=ec3da407df99c6251631c8be300cd479&imgtype=jpg&src=http%3A%2F%2Fimg3.imgtn.bdimg.com%2Fit%2Fu%3D2008737948%2C2044904539%26fm%3D214%26gp%3D0.jpg",
  },
  {
    "title":"萨斯给",
    "author":"啊妈忒路斯",
    "imageUrl":"http://n.sinaimg.cn/sinacn/w813h463/20180130/46b9-fyrcsrv7304762.png",
  },
  {
    "title":"五资妈ki 那鲁托--漩涡鸣人",
    "author":"卡诶本新诺酒煮---影分身之术",
    "imageUrl":"https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1578674333725&di=ec3da407df99c6251631c8be300cd479&imgtype=jpg&src=http%3A%2F%2Fimg3.imgtn.bdimg.com%2Fit%2Fu%3D2008737948%2C2044904539%26fm%3D214%26gp%3D0.jpg",
  },
  {
    "title":"萨斯给",
    "author":"啊妈忒路斯",
    "imageUrl":"http://n.sinaimg.cn/sinacn/w813h463/20180130/46b9-fyrcsrv7304762.png",
  },
];

接下来我们进行数据转换并且展示到ListView中。

import 'listData.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'App',
      home: Scaffold(
        appBar: AppBar(
          title: Text('ListView进行Json文件解析'),
        ),
        body: NetListViewTest(),
      ),
    );
  }
}

class NetListViewTest extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ListView(
      children: _getData(),
    );
  }

  List _getData() {
    var tempList = listData.map((value) {
      return ListTile(
        leading: Image.network(value['imageUrl']),
        subtitle: Text('主要技能:'+value['author']),
        title: Text('忍者介绍:'+value['title']),
      );
    });
    //.map方法其实就是迭代,然后存放在一个对象中
    print('-------$tempList');//(ListTile, ListTile, ListTile, ListTile, ListTile, ..., ListTile, ListTile)
    print('tempList的对象为:'+tempList.runtimeType.toString());//MappedListIterable
    List list = tempList.toList();
    print('========$list');//[ListTile, ListTile,..., ListTile, ListTile]
    return tempList.toList();
  }
}

效果展示如下:
4.Flutter中的ListView的用法。_第7张图片

初试ListView.builder

在使用ListView.builder时,我们需要注意,我们需要将这个两个参数获取到。itemCountitemBuilder

itemCount:表示item个数
itemBuilder:进行数据装填或者数据展示。其方法带有返回值为Widget

先来个小尝试吧!

我们先进行数据的组装,我在构造参数中进行数据的装填,使其每次创建进行20条数据的填充。

  List list = new List();

  ListViewBuilder() {
    for (int i = 0; i < 20; i++) {
      this.list.add(ListTile(
            title: Text(
              '这是第$i标题',
            ),
          ));
    }
  }

进行数据的展示。完整代码如下:

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'App',
      home: Scaffold(
        appBar: AppBar(
          title: Text('ListView.builder初试'),
        ),
        body: ListViewBuilder(),
      ),
    );
  }
}

class ListViewBuilder extends StatelessWidget {
  List list = new List();

  ListViewBuilder() {
    for (int i = 0; i < 20; i++) {
      this.list.add(ListTile(
            title: Text(
              '这是第$i标题',
            ),
          ));
    }
  }

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

ListView.builderDemo

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'App',
      home: Scaffold(
        appBar: AppBar(
          title: Text('ListView.builder Demo'),
        ),
        body: NetListViewBuidler(),
      ),
    );
  }
}

class NetListViewBuidler extends StatelessWidget{
  Widget _getListData(context,index){
    return ListTile(
      leading: Image.network(listData[index]['imageUrl']),
      subtitle: Text('主要技能:' + listData[index]['author']),
      title: Text('忍者介绍:' + listData[index]['title']),
    );
  }
  
  
  @override
  Widget build(BuildContext context) {
    return ListView.builder(
        itemCount:listData.length,
        itemBuilder:_getListData,
    );
  }
}

看到此处的_getListData,如果有点懵逼的话,则建议你好好看一下Dart的函数。把方法当做参数的方法
至此关于LstView的学习完毕。不足之处,请大家指导。

你可能感兴趣的:(Flutter学习)