Flutter 学习笔记 （三）列表

Flutter 学习笔记 （一）安装及运行
Flutter 学习笔记 （二）Container组件、Text组件、图片组件
Flutter 学习笔记 （三）列表
Flutter 学习笔记 （四）Padding、Row、Column、Expanded组件
Flutter 学习笔记 （五）Stack & Align、Strack & Positioned 布局组件
Flutter 学习笔记 （六）Card、AspectRatio、CircleAvatar 组件
Flutter 学习笔记 （七）RaisedBotton、Wrap组件
Flutter 学习笔记 （八）StatefulWidget组件
Flutter 学习笔记（ 九）BottomNavigationBar 组件 底部导航
Flutter 学习笔记 （十）AppBar 定义 Tab 切换
Flutter 学习笔记 （十一） Drawer 侧边栏
Flutter 学习笔记 （十二）floatingActionButton 类似闲鱼按钮
Flutter 学习笔记 （十三）TextField、Checkbox、Radio 组件
Flutter 学习笔记 （十四）时间组件
Flutter 学习笔记 （十五）flutter_swiper 轮播组件
Flutter 学习笔记 （十六）Dialog 组件
Flutter 学习笔记 （十七）网络数据请求
Flutter 学习笔记 （十八）路由跳转

垂直列表

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

ListView(
  padding: EdgeInsets.all(10),
  children: <Widget>[
    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: <Widget>[
      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<Widget>类型

class HomeContent extends StatelessWidget {
  List<Widget> _get(){
    List<Widget> 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<Widget> _get(){
  List<Widget> 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(),
);