Flutter 学习笔记 （三）列表

垂直列表

ListView组件，可以设置padding（内边距）和children属性
列表主体都在children中，其是一个组件列表类型，可以添加Image、Text、Container组件
最常用的是ListTile组件
可以设置前导（leading）、标题（title）、子标题（subtitle）、结尾（trailing）等等

ListView(
  padding: EdgeInsets.all(10),
  children: [
    ListTile(
      leading: Icon(
        Icons.settings,
        color: Colors.blue,
      ),
      title: Text('TList'),
      subtitle: Text('subtitle'),
    ),
    ListTile(
      leading: Image.network('http://dpic.tiankong.com/jt/j2/QJ9104652029.jpg?x-oss-process=style/240h'),
      title: Text('TList'),
      subtitle: Text('subtitle'),
    ),
    ListTile(
      leading: Icon(
        Icons.save,
        color: Colors.green,
      ),
      title: Text('TList'),
      subtitle: Text('subtitle'),
      trailing: Image.network('http://dpic.tiankong.com/p0/tl/QJ6163095059.jpg?x-oss-process=style/240h'),
    ),
    Image.asset('images/a.jpg'),
  ],
);

水平列表

水平列表只需要将scrollDirection参数设为Axis.horizontal即可
通常来讲，在一个容器中设置水平列表，需要设置列表高度，宽度则在列表元素的容器中设置

Container(
  height: 300,
  child: ListView(
    padding: EdgeInsets.all(10),
    scrollDirection: Axis.horizontal,
    children: [
      Container(
        width: 100,
        color: Colors.deepOrange[200],
      ),
      Container(
        width: 100,
        color: Colors.deepPurpleAccent[100],
      ),
      Container(
        width: 100,
        color: Colors.red[400],
      ),
      Container(
        width: 100,
        color: Colors.yellow[200],
      ),
    ],
  ),
);

动态列表

动态列表通过函数调用实现，返回一个List类型

class HomeContent extends StatelessWidget {
  List _get(){
    List ls=new List();
    for(int i=0;i<20;i++)
      ls.add(
        ListTile(
          title: Text('this is the $i list'),
        )
      );
    return ls;
  }
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return  ListView(
        padding: EdgeInsets.all(10),
        // scrollDirection: Axis.horizontal,
        children: this._get(),
      );
  }
}

矩阵列表

列数 crossAxisCount: 3
列间距 crossAxisSpacing: 10
行间距mainAxisSpacing: 5
内边距 padding: EdgeInsets.all(10)
长宽比 childAspectRatio: 0.7

List _get(){
  List list=new List();
  for(int i=0;i<20;i++)
  list.add(Container(
    alignment: Alignment.center,
    color: Colors.yellow,
    child: Text(
      'the $i list',
      style: TextStyle(color: Colors.black,fontSize: 20),
      ),
  ));
  return list;
}

GridView.count(
  crossAxisCount: 3,		
  crossAxisSpacing: 10,			
  mainAxisSpacing: 5,
  padding: EdgeInsets.all(10),
  childAspectRatio: 0.7,
  children: this._get(),
);