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具有圆角与阴影效果。
属性 | 说明 |
---|---|
margin | 外边距 |
child | 子组件 |
Shape | 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=2181014417,1375585590&fm=26&gp=0.jpg",fit: BoxFit.cover,),
),
ListTile(
leading: ClipOval(
child: Image.network(
"https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=2181014417,1375585590&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=2181014417,1375585590&fm=26&gp=0.jpg",fit: BoxFit.cover,),
),
ListTile(
leading: CircleAvatar(
backgroundImage:NetworkImage ("https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=2181014417,1375585590&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=1578674333725&di=ec3da407df99c6251631c8be300cd479&imgtype=jpg&src=http%3A%2F%2Fimg3.imgtn.bdimg.com%2Fit%2Fu%3D2008737948%2C2044904539%26fm%3D214%26gp%3D0.jpg",
},
{
"title":"萨斯给",
"author":"啊妈忒路斯",
"imageUrl":"http://n.sinaimg.cn/sinacn/w813h463/20180130/46b9-fyrcsrv7304762.png",
},
{
"title":"五资妈ki 那鲁托--漩涡鸣人",
"author":"卡诶本新诺酒煮---影分身之术",
"imageUrl":"https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1578674333725&di=ec3da407df99c6251631c8be300cd479&imgtype=jpg&src=http%3A%2F%2Fimg3.imgtn.bdimg.com%2Fit%2Fu%3D2008737948%2C2044904539%26fm%3D214%26gp%3D0.jpg",
},
{
"title":"萨斯给",
"author":"啊妈忒路斯",
"imageUrl":"http://n.sinaimg.cn/sinacn/w813h463/20180130/46b9-fyrcsrv7304762.png",
},
{
"title":"五资妈ki 那鲁托--漩涡鸣人",
"author":"卡诶本新诺酒煮---影分身之术",
"imageUrl":"https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1578674333725&di=ec3da407df99c6251631c8be300cd479&imgtype=jpg&src=http%3A%2F%2Fimg3.imgtn.bdimg.com%2Fit%2Fu%3D2008737948%2C2044904539%26fm%3D214%26gp%3D0.jpg",
},
{
"title":"萨斯给",
"author":"啊妈忒路斯",
"imageUrl":"http://n.sinaimg.cn/sinacn/w813h463/20180130/46b9-fyrcsrv7304762.png",
},
{
"title":"五资妈ki 那鲁托--漩涡鸣人",
"author":"卡诶本新诺酒煮---影分身之术",
"imageUrl":"https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1578674333725&di=ec3da407df99c6251631c8be300cd479&imgtype=jpg&src=http%3A%2F%2Fimg3.imgtn.bdimg.com%2Fit%2Fu%3D2008737948%2C2044904539%26fm%3D214%26gp%3D0.jpg",
},
{
"title":"萨斯给",
"author":"啊妈忒路斯",
"imageUrl":"http://n.sinaimg.cn/sinacn/w813h463/20180130/46b9-fyrcsrv7304762.png",
},
{
"title":"五资妈ki 那鲁托--漩涡鸣人",
"author":"卡诶本新诺酒煮---影分身之术",
"imageUrl":"https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1578674333725&di=ec3da407df99c6251631c8be300cd479&imgtype=jpg&src=http%3A%2F%2Fimg3.imgtn.bdimg.com%2Fit%2Fu%3D2008737948%2C2044904539%26fm%3D214%26gp%3D0.jpg",
},
{
"title":"萨斯给",
"author":"啊妈忒路斯",
"imageUrl":"http://n.sinaimg.cn/sinacn/w813h463/20180130/46b9-fyrcsrv7304762.png",
},
{
"title":"五资妈ki 那鲁托--漩涡鸣人",
"author":"卡诶本新诺酒煮---影分身之术",
"imageUrl":"https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1578674333725&di=ec3da407df99c6251631c8be300cd479&imgtype=jpg&src=http%3A%2F%2Fimg3.imgtn.bdimg.com%2Fit%2Fu%3D2008737948%2C2044904539%26fm%3D214%26gp%3D0.jpg",
},
{
"title":"萨斯给",
"author":"啊妈忒路斯",
"imageUrl":"http://n.sinaimg.cn/sinacn/w813h463/20180130/46b9-fyrcsrv7304762.png",
},
{
"title":"五资妈ki 那鲁托--漩涡鸣人",
"author":"卡诶本新诺酒煮---影分身之术",
"imageUrl":"https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1578674333725&di=ec3da407df99c6251631c8be300cd479&imgtype=jpg&src=http%3A%2F%2Fimg3.imgtn.bdimg.com%2Fit%2Fu%3D2008737948%2C2044904539%26fm%3D214%26gp%3D0.jpg",
},
{
"title":"萨斯给",
"author":"啊妈忒路斯",
"imageUrl":"http://n.sinaimg.cn/sinacn/w813h463/20180130/46b9-fyrcsrv7304762.png",
},
{
"title":"五资妈ki 那鲁托--漩涡鸣人",
"author":"卡诶本新诺酒煮---影分身之术",
"imageUrl":"https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1578674333725&di=ec3da407df99c6251631c8be300cd479&imgtype=jpg&src=http%3A%2F%2Fimg3.imgtn.bdimg.com%2Fit%2Fu%3D2008737948%2C2044904539%26fm%3D214%26gp%3D0.jpg",
},
{
"title":"萨斯给",
"author":"啊妈忒路斯",
"imageUrl":"http://n.sinaimg.cn/sinacn/w813h463/20180130/46b9-fyrcsrv7304762.png",
},
{
"title":"五资妈ki 那鲁托--漩涡鸣人",
"author":"卡诶本新诺酒煮---影分身之术",
"imageUrl":"https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1578674333725&di=ec3da407df99c6251631c8be300cd479&imgtype=jpg&src=http%3A%2F%2Fimg3.imgtn.bdimg.com%2Fit%2Fu%3D2008737948%2C2044904539%26fm%3D214%26gp%3D0.jpg",
},
{
"title":"萨斯给",
"author":"啊妈忒路斯",
"imageUrl":"http://n.sinaimg.cn/sinacn/w813h463/20180130/46b9-fyrcsrv7304762.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(),
);
}
}