AspectRatio

AspectRatio的作用是根据设置调整子元素child的宽高比
AspectRatio首先会在布局限制条件允许的范围内尽可能的扩展，widget的高度是由宽度和比率确定的，按照固定比例去尽量占满区域。
在满足所有限制条件后无法找到一个可行的尺寸，AspectRatio最终将会去优先适应布局限制条件，而忽略所设置的比例。

当AspectRatio外层有限制时：

void main() => runApp(AspecRatioApp()); class AspecRatioApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( appBar: AppBar( title: Text('Flutter中AspecRatio演示'), ), body: AspecRatioWidget(), ), ); } } class AspecRatioWidget extends StatelessWidget { @override Widget build(BuildContext context) { return Container( width: 200, color: Colors.blue, child: AspectRatio( aspectRatio: 2.0/1.0, child: Container(//根据宽高比计算的出高为100，宽为200 color: Colors.red, ), ), ); } } 

如图所示：

讯享网

当外层不存在宽高限制时，即删除最外层Container其效果：从中可以看出我们的高度时宽度的一半。

Card组件

Card是卡片布局，内容可以由大多数类型的widget组成，Card具有圆角与阴影效果。

讯享网 void main() => runApp(AspecRatioApp()); class AspecRatioApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( appBar: AppBar( title: Text('Flutter中AspecRatio演示'), ), body: AspecRatioWidget(), ), ); } } class AspecRatioWidget extends StatelessWidget { @override Widget build(BuildContext context) { return ListView( children: <Widget>[ Card( margin: EdgeInsets.all(10), child: Column( children: <Widget>[ ListTile( title: Text("战三"), subtitle: Text("android扫地僧"), ), ListTile( title: Text("联系方式：1XXXX"), ), ], ), ), Card( margin: EdgeInsets.all(10), child: Column( children: <Widget>[ ListTile( title: Text("战三"), subtitle: Text("android扫地僧"), ), ListTile( title: Text("联系方式：1XXXX"), ), ], ), ), ], ); } } 

接下来进行实战：

void main() => runApp(AspecRatioApp()); class AspecRatioApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( appBar: AppBar( title: Text('Flutter中AspecRatio演示'), ), body: ImageAndText(), ), ); } } class ImageAndText extends StatelessWidget { @override Widget build(BuildContext context) { return ListView( children: <Widget>[ Card( margin: EdgeInsets.all(10), child: Column( children: <Widget>[ AspectRatio(aspectRatio: 16/9, child: Image.network("https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=,&fm=26&gp=0.jpg",fit: BoxFit.cover,), ), ListTile( leading: ClipOval( child: Image.network( "https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=,&fm=26&gp=0.jpg", fit: BoxFit.cover, width: 50, height: 50, ) ), title: Text('标题'), subtitle: Text('这是一个条重大新闻'), ), ], ), ), //另外一种方式实现圆形图片,一种专门的圆形头像控件CircleAvatar Card( margin: EdgeInsets.all(10), child: Column( children: <Widget>[ AspectRatio(aspectRatio: 16/9, child: Image.network("https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=,&fm=26&gp=0.jpg",fit: BoxFit.cover,), ), ListTile( leading: CircleAvatar( backgroundImage:NetworkImage ("https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=,&fm=26&gp=0.jpg") ), title: Text('标题'), subtitle: Text('这是一个条重大新闻'), ), ], ), ) ], ); } } 

进行json解析并呈现在界面上：
json数据如下：

讯享网List listData=[ { "title":"五资妈ki 那鲁托--漩涡鸣人", "author":"卡诶本新诺酒煮---影分身之术", "imageUrl":"https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=25&di=ec3da407df99cc8be300cd479&imgtype=jpg&src=http%3A%2F%2Fimg3.imgtn.bdimg.com%2Fit%2Fu%3D%2C%26fm%3D214%26gp%3D0.jpg", }, { "title":"萨斯给", "author":"啊妈忒路斯", "imageUrl":"http://n.sinaimg.cn/sinacn/w813h463//46b9-fyrcsrv.png", }, { "title":"五资妈ki 那鲁托--漩涡鸣人", "author":"卡诶本新诺酒煮---影分身之术", "imageUrl":"https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=25&di=ec3da407df99cc8be300cd479&imgtype=jpg&src=http%3A%2F%2Fimg3.imgtn.bdimg.com%2Fit%2Fu%3D%2C%26fm%3D214%26gp%3D0.jpg", }, { "title":"萨斯给", "author":"啊妈忒路斯", "imageUrl":"http://n.sinaimg.cn/sinacn/w813h463//46b9-fyrcsrv.png", }, { "title":"五资妈ki 那鲁托--漩涡鸣人", "author":"卡诶本新诺酒煮---影分身之术", "imageUrl":"https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=25&di=ec3da407df99cc8be300cd479&imgtype=jpg&src=http%3A%2F%2Fimg3.imgtn.bdimg.com%2Fit%2Fu%3D%2C%26fm%3D214%26gp%3D0.jpg", }, { "title":"萨斯给", "author":"啊妈忒路斯", "imageUrl":"http://n.sinaimg.cn/sinacn/w813h463//46b9-fyrcsrv.png", }, { "title":"五资妈ki 那鲁托--漩涡鸣人", "author":"卡诶本新诺酒煮---影分身之术", "imageUrl":"https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=25&di=ec3da407df99cc8be300cd479&imgtype=jpg&src=http%3A%2F%2Fimg3.imgtn.bdimg.com%2Fit%2Fu%3D%2C%26fm%3D214%26gp%3D0.jpg", }, { "title":"萨斯给", "author":"啊妈忒路斯", "imageUrl":"http://n.sinaimg.cn/sinacn/w813h463//46b9-fyrcsrv.png", }, { "title":"五资妈ki 那鲁托--漩涡鸣人", "author":"卡诶本新诺酒煮---影分身之术", "imageUrl":"https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=25&di=ec3da407df99cc8be300cd479&imgtype=jpg&src=http%3A%2F%2Fimg3.imgtn.bdimg.com%2Fit%2Fu%3D%2C%26fm%3D214%26gp%3D0.jpg", }, { "title":"萨斯给", "author":"啊妈忒路斯", "imageUrl":"http://n.sinaimg.cn/sinacn/w813h463//46b9-fyrcsrv.png", }, { "title":"五资妈ki 那鲁托--漩涡鸣人", "author":"卡诶本新诺酒煮---影分身之术", "imageUrl":"https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=25&di=ec3da407df99cc8be300cd479&imgtype=jpg&src=http%3A%2F%2Fimg3.imgtn.bdimg.com%2Fit%2Fu%3D%2C%26fm%3D214%26gp%3D0.jpg", }, { "title":"萨斯给", "author":"啊妈忒路斯", "imageUrl":"http://n.sinaimg.cn/sinacn/w813h463//46b9-fyrcsrv.png", }, { "title":"五资妈ki 那鲁托--漩涡鸣人", "author":"卡诶本新诺酒煮---影分身之术", "imageUrl":"https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=25&di=ec3da407df99cc8be300cd479&imgtype=jpg&src=http%3A%2F%2Fimg3.imgtn.bdimg.com%2Fit%2Fu%3D%2C%26fm%3D214%26gp%3D0.jpg", }, { "title":"萨斯给", "author":"啊妈忒路斯", "imageUrl":"http://n.sinaimg.cn/sinacn/w813h463//46b9-fyrcsrv.png", }, { "title":"五资妈ki 那鲁托--漩涡鸣人", "author":"卡诶本新诺酒煮---影分身之术", "imageUrl":"https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=25&di=ec3da407df99cc8be300cd479&imgtype=jpg&src=http%3A%2F%2Fimg3.imgtn.bdimg.com%2Fit%2Fu%3D%2C%26fm%3D214%26gp%3D0.jpg", }, { "title":"萨斯给", "author":"啊妈忒路斯", "imageUrl":"http://n.sinaimg.cn/sinacn/w813h463//46b9-fyrcsrv.png", }, { "title":"五资妈ki 那鲁托--漩涡鸣人", "author":"卡诶本新诺酒煮---影分身之术", "imageUrl":"https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=25&di=ec3da407df99cc8be300cd479&imgtype=jpg&src=http%3A%2F%2Fimg3.imgtn.bdimg.com%2Fit%2Fu%3D%2C%26fm%3D214%26gp%3D0.jpg", }, { "title":"萨斯给", "author":"啊妈忒路斯", "imageUrl":"http://n.sinaimg.cn/sinacn/w813h463//46b9-fyrcsrv.png", }, ]; 

import 'package:flutter/cupertino.dart'; import 'package:flutter/material.dart'; import 'package:flutter_demo/listData.dart'; void main() => runApp(AspecRatioApp()); class AspecRatioApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( appBar: AppBar( title: Text('Flutter中AspecRatio演示'), ), body: ImageAndText(), ), ); } } class ImageAndText extends StatelessWidget { @override Widget build(BuildContext context) { return ListView( children: listData.map((value) { return Card( margin: EdgeInsets.all(10), child: Column( children: <Widget>[ AspectRatio( aspectRatio: 16 / 9, child: Image.network( value['imageUrl'], fit: BoxFit.cover, ), ), ListTile( leading: CircleAvatar( backgroundImage: NetworkImage( value['imageUrl'], )), title: Text(value['title']), subtitle: Text(value['author']), ), ], ), ); }).toList(), ); } }