**ListView中不能再包含ListView** ## AspectRatio组件 AspectRation的作用是根据设置调整子元素child宽高比。 AspectRatio首先会在布局限制条件允许的范围内尽可能的扩展，widget的高度由宽度和比率决定，类似BoxFit中的contain，按照固定比率去尽量沾满区域。 如果在满足所有限制条件后无法找到一个可行的尺寸，AspectRatio最终将会去优先适应布局限制条件，而忽略所设置的比率。 ### 属性 * aspectRatio：是一个参考值，不一定会根据这个值去布局 * child ~~~ Container( width: 300, // AspectRatio 调整其子元素的宽高度 child: AspectRatio( aspectRatio: 2.0, child: Container( color: Colors.red, ), ), ); ~~~ 宽度沾满整个屏幕 ~~~ //相对于整个屏幕调整宽高比,会沾满整个屏幕 return AspectRatio( aspectRatio: 2.0, child: Container( color: Colors.red, ), ); ~~~ ## Card组件 Card是卡片组件块，内容可以由大多数类型的Widget构成，Card具有原型和阴影，这让她看起来有立体感。 * margin * child * Shape：Card的阴影效果，默认的阴影效果为圆角的长方形边。  ~~~ ListView( children: <Widget>[ Card( margin: EdgeInsets.all(10), child: Column( children: <Widget>[ ListTile( title: Text("张三",style: TextStyle(fontSize: 28,)), subtitle: Text("高级工程师"), ), ListTile( title: Text("电话：XXXX",), ), ListTile( title: Text("地址",), ) ], ), ), ], ) ~~~ ## 图文列表  处理图片：ClipOval ~~~ ListView( children: <Widget>[ Card( margin: EdgeInsets.all(10), child: Column( children: <Widget>[ AspectRatio( aspectRatio: 20/9, child: Image.network( "https://www.itying.com/images/flutter/1.png", fit: BoxFit.cover, ), ), ListTile( title: Text("xxxx"), subtitle: Text("xxxx"), leading: ClipOval( child: Image.network( "https://www.itying.com/images/flutter/1.png", height: 60, width: 60, fit: BoxFit.cover, ), ) // leading:Icons.home ) ], ), ), ], ) ~~~ 处理图片另一种方式 ~~~ leading: CircleAvatar( // 背景图片 backgroundImage: NetworkImage("https://www.itying.com/images/flutter/1.png"), ) ~~~ 完整版 ~~~ ListView( children: listData.map((value){ return Card( margin: EdgeInsets.all(10), child: Column( children: <Widget>[ AspectRatio( aspectRatio: 20/9, child: Image.network( value["imageUrl"], fit: BoxFit.cover, ), ), ListTile( title: Text(value["title"]), subtitle: Text( value["description"], maxLines: 2, overflow: TextOverflow.ellipsis, ), // CircleAvatar专门处理头像的,自动调整大小 leading: CircleAvatar( // 背景图片 backgroundImage: NetworkImage(value["imageUrl"]), ) ) ], ), ); }).toList() ); ~~~