ListView · flutter

列表分类： 1. 垂直列表 2. 水平列表 3. 动态列表 4. 矩阵式列表 5. 垂直图文列表 ## Flutter列表参数 scrollDirection: Axis.horizontal水平列表 Axis.vertical垂直列表 padding： EdgetInsetsGeometry 内边距 resolve：组件反向排序 children：集合元素 List ~~~ return ListView( padding:EdgeInsets.all(0), children: <Widget>[ ListTile( //leading 前面放图标，trailing后面放图标，也可以加载图片 // trailing: Icon(Icons.attachment,size: 40,), leading: Image.asset('images/location.png'), title: Text( '哈哈哈哈哈哈哈哈哈', style: TextStyle( color: Colors.yellow, fontSize: 18 ), maxLines: 1, overflow: TextOverflow.ellipsis, ), subtitle: Text('嘿嘿嘿嘿嘿嘿'), selected: true, //选中状态，默认图标和字体都是蓝色 // isThreeLine: true,// 是否显示三行 dense: true,//是否密集 // contentPadding: EdgeInsets.fromLTRB(16, 0, 16, 0) //内容区域的padding ), ListTile( leading: Icon(Icons.settings), title: Text('哈哈哈哈哈哈哈哈'), subtitle: Text('嘿嘿嘿嘿嘿 '), selected: true, enabled: false ), ListTile( leading: Icon(Icons.search), title: Text('哈哈哈哈哈 '), subtitle: Text('嘿嘿嘿嘿嘿 '), ), ListTile( leading: Icon(Icons.home,color: Colors.yellow,), title: Text('哈哈哈哈哈哈'), subtitle: Text('嘿嘿嘿嘿嘿嘿'), ), ] ); ~~~ ListView不止可以放ListTile组件，还可以放其他组件 Container组件，Image组件 ~~~ return ListView( padding:EdgeInsets.all(10), children: <Widget>[ Image.network("http://szimg.mukewang.com/5baf3f0a000180df06000338-360-202.jpg"), Container( alignment: Alignment.center, child: Text( '我是一个标题', // textAlign: TextAlign.center, style: TextStyle( fontSize: 26.0 ), ), height: 50, padding: EdgeInsets.fromLTRB(0, 10, 0, 10) ), Image.network("http://szimg.mukewang.com/5baf3f0a000180df06000338-360-202.jpg"), Container( alignment: Alignment.center, child: Text( '我是一个标题', // textAlign: TextAlign.center, style: TextStyle( fontSize: 26.0 ), ), height: 50, padding: EdgeInsets.fromLTRB(0, 10, 0, 10) ), Image.network("http://szimg.mukewang.com/5baf3f0a000180df06000338-360-202.jpg"), Container( alignment: Alignment.center, child: Text( '我是一个标题', // textAlign: TextAlign.center, style: TextStyle( fontSize: 26.0 ), ), height: 50, padding: EdgeInsets.fromLTRB(0, 10, 0, 10) ), Image.network("http://szimg.mukewang.com/5baf3f0a000180df06000338-360-202.jpg"), Container( alignment: Alignment.center, child: Text( '我是一个标题', // textAlign: TextAlign.center, style: TextStyle( fontSize: 26.0 ), ), height: 50, padding: EdgeInsets.fromLTRB(0, 10, 0, 10) ), Image.network("http://szimg.mukewang.com/5baf3f0a000180df06000338-360-202.jpg"), ] ); ~~~ ## 水平列表 ~~~ return Container( height: 180, // width: 100, child:ListView( scrollDirection: Axis.horizontal, children: <Widget>[ Container( // child: Text('hahaha'), width: 180, height:180, color:Colors.red, child: ListView( children: <Widget>[ Image.network("http://szimg.mukewang.com/5baf3f0a000180df06000338-360-202.jpg"), Text('我是一个文本') ], ), ), Container( // child: Text('hahaha'), width: 180, height:180, color:Colors.blue ), Container( // child: Text('hahaha'), width: 180, height:180, color:Colors.deepOrange ), Container( // child: Text('hahaha'), width: 180, height:180, color:Colors.deepPurpleAccent ) ], ) ); ~~~