Flutter--ListView列表组件基础

ListView

属性	释义
scrollDirection	Axis.horizoontal 水平
padding	内边距
resolve	组件反向排序
children	列表元素

垂直列表

// 默认为垂直列表
// leading ： 类似每个item的头像
// title : item标题
// subtitle： item的副标题
// trailing: I尾部图片
return ListView(
  padding: EdgeInsets.all(10),
  children: <Widget>[
    ListTile(
      leading: Image.network(
          "https://www.baidu.com/img/dong3_ce6e6a5ce66ab92f491f627981a2f77c.gif"),
      title: Text('title'),
      subtitle: Text("subtitle"),
    ),
    ListTile(
      leading: Image.network(
          "https://www.baidu.com/img/dong3_ce6e6a5ce66ab92f491f627981a2f77c.gifg"),
      title: Text('title'),
      subtitle: Text("subtitle"),
    ),
    ListTile(
      title: Text('title'),
      subtitle: Text("subtitle"),
      trailing: Icon(Icons.home),
    ),
    ListTile(
      leading: Icon(Icons.pages),
      title: Text('title'),
      subtitle: Text("subtitle"),
    ),
    ListTile(
      leading: Icon(Icons.settings),
      title: Text('title'),
      subtitle: Text("subtitle"),
    ),
    ListTile(
      leading: Icon(
        Icons.home,
        color: Colors.yellow,
      ),
      title: Text('title'),
      subtitle: Text("subtitle"),
    ),
    ListTile(
      leading: Icon(Icons.pages),
      title: Text('title'),
      subtitle: Text("subtitle"),
    )
  ],
);

// 水平列表

ListView(
  scrollDirection: Axis.horizontal,
  children: <Widget>[
    Container(
      width: 180.0,
      color: Colors.red,
    ),
    Container(
      width: 180.0,
      color: Colors.orange,
      child: ListView(
        children: <Widget>[
          Image.network("https://www.itying.com/images/flutter/1.png"),
          Text('我是一个文本')
        ],
      ),
    ),
    Container(
      width: 180.0,
      color: Colors.blue,
    ),
    Container(
      width: 180.0,
      color: Colors.deepOrange,
    ),
    Container(
      width: 180.0,
      color: Colors.deepPurpleAccent,
    ),
  ],
);

动态列表

eg1:从组件数组中获取item组件

class HomeContent extends StatelessWidget {
  List<Widget> _getData() {
    return [
      ListTile(
        title: Text("1"),
      ),
      ListTile(
        title: Text("2"),
      ),
      ListTile(
        title: Text("3"),
      )
    ];
  }

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

eg2: 从组件数组中获取组件

class HomeContent extends StatelessWidget {
  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) {
    // TODO: implement build
    return ListView(
        children: _getData()
    );
  }
}

eg3: 从外部数据获取item数据

• 首先在lib目录下创建文件夹res
• 在res文件夹下创建listData.dart

List listData=[
  {
    "title": 'Candy Shop',
    "author": 'Mohamed Chahin',
    "imageUrl": 'https://profile.csdnimg.cn/B/0/A/1_qq_39424143',
  },
  {
    "title": 'Childhood in a picture',
    "author": 'Google',
    "imageUrl": 'https://profile.csdnimg.cn/B/0/A/1_qq_39424143',
  },
  {
    "title": 'Alibaba Shop',
    "author": 'Alibaba',
    "imageUrl": 'https://profile.csdnimg.cn/B/0/A/1_qq_39424143',
  },
  {
    "title": 'Candy Shop',
    "author": 'Mohamed Chahin',
    "imageUrl": 'https://profile.csdnimg.cn/B/0/A/1_qq_39424143',
  },
  {
    "title": 'Tornado',
    "author": 'Mohamed Chahin',
    "imageUrl": 'https://profile.csdnimg.cn/B/0/A/1_qq_39424143',
  },
  {
    "title": 'Undo',
    "author": 'Mohamed Chahin',
    "imageUrl": 'https://profile.csdnimg.cn/B/0/A/1_qq_39424143',
  },
  {
    "title": 'white-dragon',
    "author": 'Mohamed Chahin',
    "imageUrl": 'https://profile.csdnimg.cn/B/0/A/1_qq_39424143',
  }
];

• 读取数据

class HomeContent extends StatelessWidget {


  List<Widget> _getData() {
    var tempList = listData.map((value){
      return ListTile(
        leading: Image.network(value["imageUrl"]),
        title: Text(value["title"]),
        subtitle: Text(value["author"]),
      );
    });
    return tempList.toList();
  }


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

eg4: 使用ListView.builder创建ListView

Widget  _getData(context, index) {
  return ListTile(
    title: Text(listData[index]["title"]), // 从listData中获取title
    leading: Image.network(listData[index]["imageUrl"]), // 从listData中获取leading
    subtitle: Text(listData[index]["author"]), // 从listData中获取subtitle
  );
}


@override
Widget build(BuildContext context) {
  // TODO: implement build
  return ListView.builder(
      itemCount: listData.length,
      itemBuilder: this._getData);
}