话说很久不起这么早，今儿个早起一次，发现我们小区的早上空气如此沁人心脾，为了不辜负这清晨美景，来继续更新Flutter吧！

一、列表组件

列表布局类似于android原生开发中的listview控件 ，支持垂直和水平滑动。
1）垂直列表
2）垂直图文列表
3）水平列表
4）动态列表
5）矩阵式列表

常用的的属性参数：
1）scrollDirection属性 scrollDirection:Axis.horizontal/vertical表示水平和垂直
2）padding 属性 padding:EdgeInset.all(10) 内边距10
3）resolve 属性 组件的反向排序
4）children 属性 List<Widget> children:<Widget>[]

class HomeContent extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return ListView(
      padding: EdgeInsets.all(10),
      children: <Widget>[
          Image.network("https://www.itying.com/images/flutter/1.png"),
          Container(
            child: Text(
                '我是一个标题',
                textAlign: TextAlign.center, 
                style: TextStyle(
                  fontSize: 28,
                ),            
            ),
            height: 60,
            padding:EdgeInsets.fromLTRB(0, 10, 0, 10),
          ),
          Image.network("https://www.itying.com/images/flutter/2.png"),
          Container(
            child: Text(
                '我是一个标题',
                textAlign: TextAlign.center, 
                style: TextStyle(
                  fontSize: 28,
                ),            
            ),
            height: 60,
            padding:EdgeInsets.fromLTRB(0, 10, 0, 10),
          ),
          Image.network("https://www.itying.com/images/flutter/3.png"),
          Container(
            child: Text(
                '我是一个标题',
                textAlign: TextAlign.center, 
                style: TextStyle(
                  fontSize: 28,
                ),            
            ),
            height: 60,
            padding:EdgeInsets.fromLTRB(0, 10, 0, 10),
          ),
          Image.network("https://www.itying.com/images/flutter/4.png"),
          Container(
            child: Text(
                '我是一个标题',
                textAlign: TextAlign.center, 
                style: TextStyle(
                  fontSize: 28,
                ),            
            ),
            height: 60,
            padding:EdgeInsets.fromLTRB(0, 10, 0, 10),
          ),
          Image.network("https://www.itying.com/images/flutter/1.png"),
          Container(
            child: Text(
                '我是一个标题',
                textAlign: TextAlign.center, 
                style: TextStyle(
                  fontSize: 28,
                ),            
            ),
            height: 60,
            padding:EdgeInsets.fromLTRB(0, 10, 0, 10),
          ),

          Image.network("https://www.itying.com/images/flutter/2.png"),
          Container(
            child: Text(
                '我是一个标题',
                textAlign: TextAlign.center, 
                style: TextStyle(
                  fontSize: 28,
                ),            
            ),
            height: 60,
            padding:EdgeInsets.fromLTRB(0, 10, 0, 10),
          ),

          Image.network("https://www.itying.com/images/flutter/3.png"),
          Container(
            child: Text(
                '我是一个标题',
                textAlign: TextAlign.center, 
                style: TextStyle(
                  fontSize: 28,
                ),            
            ),
            height: 60,
            padding:EdgeInsets.fromLTRB(0, 10, 0, 10),
          ),
          Image.network("https://www.itying.com/images/flutter/1.png"),
          Image.network("https://www.itying.com/images/flutter/2.png"),
          Image.network("https://www.itying.com/images/flutter/3.png"),

      ],
    );
  }
}

上边的写法是图文结合的排版，每个文本item样式设置都封装 在Container组件中 ，图片用远程加载方式Image.network()；padding:EdgeInsets.fromLTRB()设置内边距。
2.图加标题写法

 children: <Widget>[
          ListTile(
              leading:Image.network("https://www.itying.com/images/flutter/1.png"),
              title: Text('华北黄淮高温雨今起强势登场'),
              subtitle: Text("中国天气网讯 21日开始，华北黄淮高温雨今起强势登场"),
          ),
            ListTile(
              leading:Image.network("https://www.itying.com/images/flutter/2.png"),
              title: Text('保监局50天开32罚单 “断供”违规资金为房市降温'),
              subtitle: Text("中国天气网讯 保监局50天开32罚单 “断供”违规资金为房市降温"),
              trailing:Image.network("https://www.itying.com/images/flutter/2.png")
          ),
      ],

leading:Image.network()左侧标题，只能加一张；title一级标题粗体 ；subtitle二级标题粗体 ；trailing:Image.network()二级标题 。

动态添加数组

class HomeContent extends StatelessWidget {  
  //自定义方法
  Widget _getListData(context,index){
        return ListTile(           
            title: Text(listData[index]["title"]),
            leading:Image.network(listData[index]["imageUrl"]),          
            subtitle:Text(listData[index]["author"])
        );
  }

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

如上代码块所示：
自定义一个方法,返回值是 ListTitle组件 ，这就相当于item 的布局了，当然也可以用Container组件，自定义item的布局格式。