1.Flutter AspectRatio
AspectRatio 的作用是根据设置调整子元素的child的宽高比
AspectRatio会在布局限制条件允许的范围内尽可能的扩展,widget的高度是由宽度和比值决定的,类似于BoxFit中的contain,按照固定比值去尽量占满整个区域.
如果在满足所有限制条件过后,无法找到一个可行的尺寸,AspectRatio最终将会优先适应布局限制条件,而忽略所设置的比值.
import "package:flutter/material.dart";
void main() => runApp(MyApp());
class MyApp extends StatelessWidget{
@override
Widget build(BuildContext context) {
return Container(
child: MaterialApp(
title: 'belineApp',
home: Scaffold(
appBar: AppBar(
title: Text('my app'),
),
body: AspectRatioCard()
)
)
);
}
}
class AspectRatioCard extends StatelessWidget {
@override
Widget build(BuildContext context) {
// TODO: implement build
return Container(
width:100.0,
child: AspectRatio(
aspectRatio: 2.0/1.0, //- 参数针对外层盒子的宽度,2.0/1.0 也就是高度是50
child: Container(
color: Colors.orange,
),
)
);
}
}
通过上面的代码,我们可以看到AspectRatio可以针对父级盒子的宽度,进行配置比值.这里可以看到Container的宽度为100,那么AspectRatio的aspectRatio设置成2.0/1.0,AspectRatio下的子元素的宽度会填充父级的宽度,高度则是宽度的一半.效果如下:
image.png
接下来,我们不在外层包裹一个盒子,直接使用
AspectRatio组件,那么父级盒子就是整个页面,AspectRatio的子页面可以根据父级的宽度(屏幕宽度)设置高度.
class AspectRatioCard extends StatelessWidget {
@override
Widget build(BuildContext context) {
// TODO: implement build
return AspectRatio(
aspectRatio: 2/1,
child: Container(
color: Colors.orange
),
);
}
}
页面效果:
image.png
2.Flutter Card
Card是卡片组件,内容可以使用大多的widget来组成,Card可以具有圆角和阴影,所以可以看起来有立体感
| 属性 | 说明 |
|---|---|
| margin | 外边距 |
| child | 子组件 |
| Shape | Card的阴影效果,默认效果为圆角的长方形边 |
我们可以通过一个ListView的子组件使用Card,然后针对每个Card进行样式排版
class AspectRatioCard extends StatelessWidget {
@override
Widget build(BuildContext context) {
// TODO: implement build
return ListView(
children: [
Card( //- 卡片组件
margin: EdgeInsets.all(10),
child: Column(
children: [
ListTile(
title: Text('beline', style: TextStyle(fontSize: 28)),
subtitle: Text('前端开发'),
),
ListTile(
title: Text('电话:18123288800'),
),
ListTile(
title: Text('地址:四川省成都市高新区'),
)
],
)
),
Card(
margin: EdgeInsets.all(10),
child: Column(
children: [
ListTile(
title: Text('beline', style: TextStyle(fontSize: 28)),
subtitle: Text('前端开发'),
),
ListTile(
title: Text('电话:18123288800'),
),
ListTile(
title: Text('地址:四川省成都市高新区'),
)
],
)
),
Card(
margin: EdgeInsets.all(10),
child: Column(
children: [
ListTile(
title: Text('beline', style: TextStyle(fontSize: 28)),
subtitle: Text('前端开发'),
),
ListTile(
title: Text('电话:18123288800'),
),
ListTile(
title: Text('地址:四川省成都市高新区'),
)
],
)
)
],
);
}
}
页面效果:
image.png
下面我们做一个图文并茂的卡片
需要实现的效果如下:
image.png
代码:
class AspectRatioCard extends StatelessWidget {
@override
Widget build(BuildContext context) {
// TODO: implement build
return ListView(
children: [
Card(
margin: EdgeInsets.all(10),
child: Column(
children: [
Container(
width: double.infinity, //- 横向撑满父级元素
height: 150.0,
child: Image.network('https://dss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=3512181219,2527704296&fm=26&gp=0.jpg', fit: BoxFit.cover)
),
ListTile(
leading: CircleAvatar( //- 圆形头像
backgroundImage: NetworkImage('https://dss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=178359767,2690148676&fm=26&gp=0.jpg'),
),
title: Text('Candy Shop'),
subtitle: Text('Flutter is Goodle`s mobile UI Framework for crafting height sjdakjdj djsakjd', overflow: TextOverflow.ellipsis),
)
],
)
)
],
);
}
}
凡事都有个但是...但是不同的分辨率的屏幕下,固定了高度,横向又占满之后那势必会在不同的分辨率机型下出现比例变形,所以,我们这里可以使用前面提到的AspectRatio组件.
class AspectRatioCard extends StatelessWidget {
@override
Widget build(BuildContext context) {
// TODO: implement build
return ListView(
children: [
Card(
margin: EdgeInsets.all(10),
child: Column(
children: [
AspectRatio(
aspectRatio: 16/9,
child: Image.network('https://dss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=3512181219,2527704296&fm=26&gp=0.jpg', fit: BoxFit.cover),
),
ListTile(
leading: CircleAvatar( //- 圆形头像
backgroundImage: NetworkImage('https://dss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=178359767,2690148676&fm=26&gp=0.jpg'),
),
title: Text('Candy Shop'),
subtitle: Text('Flutter is Goodle`s mobile UI Framework for crafting height sjdakjdj djsakjd', overflow: TextOverflow.ellipsis),
)
],
)
)
],
);
}
}
最终呈现效果:
image.png