一.复习上一节
- Stack组件中的alignment属性是不能对单独子view做调整的
- 结合Stack+Align 组件控制子view的位置。
- 结合Stack+Positioned 组件控制子view的位置。
二. AspectRation组件
-
AspectRation 作用
AspectRation的作用是根据设置 调整child的宽高比（相对于父元素）
AspectRation首页会在布局限制条件允许的范围内尽可能的扩展，widget的高度是由宽度和比率决定的，类似于BoxFit中的contain，按照比例去尽量占满。
如果在满足所有显示条件后无法找到一个可行的尺寸，AspectRation最终将会优先适应布局的限制条件，而忽略所设置的比率
-
常用属性
aspectRation: 宽高比（要看外层是否允许按照这个比例布局，这只是一个参考值）
class MyBody extends StatelessWidget {
@override
Widget build(BuildContext context) {
// TODO: implement build
return AspectRatio(
aspectRatio: 2 / 1,
child: Container(
color: Colors.pink,
),
);
}
}
-
注意
aspectRatio 的宽高比是相对于父元素的
效果图
image.png
三. Card组件
Card组件是卡片组件块，内容可以有大多是类型的Widget构成,Card具有圆角和阴影的效果，看起来更有立体感
-
常用属性
margin:外边距
child：子组件
shape：Card的阴影效果，默认效果为圆角的长方形。 -
实现以下效果
image.png 代码
class MyBody extends StatelessWidget {
List<Widget> _getItemView() {
var map = listData.map((value) {
return Card(
child: Column(children: <Widget>[
AspectRatio(
aspectRatio: 2 / 1,
child: Image.network(
value["iamge"],
fit: BoxFit.fill,
),
),
ListTile(
title: Text(value["title"]),
subtitle: Text(value["subTitle"]),
)
]));
});
return map.toList();
}
@override
Widget build(BuildContext context) {
// TODO: implement build
return ListView(
children: _getItemView(),
);
}
}
-
注意
1.代码中通过 ListView +CardView +Column 实现。
2.Flutter 中ListView不能嵌套ListView，否则会报错。- CircleAvatar 为专门处理原型头像的组件CircleAvatar(backgroundImage: NetworkImage("")) ，这里也可以用ClipOval。
四. 总结
1.AspectRation组件设置子元素的宽高比
AspectRatio(aspectRatio: , child: )2.Card 卡片布局自带阴影
Card( child: )
