Flutter--ListView列表组件基础

Posted 2023-01-06

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);