-
AspectRatio组件
AspectRatio 的作用是根据设置调整子元素 child 的宽高比。
AspectRatio 首先会在布局限制条件允许的范围内尽可能的扩展,widget 的高度是由宽
度和比率决定的,类似于 BoxFit 中的 contain,按照固定比率去尽量占满区域。
简单来说AspectRatio可以通过宽高的比例去设置子元素
aspectRatio属性:宽高比值
child:子元素
AspectRatio(
AspectRatio(
aspectRatio: 16 / 9,
child: Image.network(
value["imageUrl"],
fit: BoxFit.cover,
) //AspectRatio(aspectRatio:宽/高,child:) 这里宽高是根据父级的宽高来设置
,
),
)
-
Card卡片组件
Card 是卡片组件块,内容可以由大多数类型的 Widget 构成,Card 具有圆角和阴影,这让它看起来有立体感。
属性:
margin:外边距
child:子组件
Shape:Card 的阴影效果,默认的阴影效果为圆角的长方形边。
接下来的案例我们通过遍历将数组渲染在我们的卡片上
这是我的一个数组列表:
引入数组文件:
import 'res/listdate.dart';
完整代码实例:
class Mycentedd extends StatelessWidget {
List<Widget> _getlistDate() {
var listtmp = 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,
) //AspectRatio(aspectRatio:宽/高,child:) 这里宽高是根据父级的宽高来设置
,
),
SizedBox(height: 10),
ListTile(
leading: CircleAvatar(
backgroundImage: NetworkImage(value["imageUrl"]),
),
title: Text(value["title"]),
subtitle: Text("Flutter Chinese network is the largest flutter developer exchange and learning platform in China, and is committed to building a flutter development Chinese community. Code examples and project cases can be easily found here, and special personnel can provide the latest document translation",overflow:TextOverflow.ellipsis),
)
],
),
);
});
return listtmp.toList();
}
@override
Widget build(BuildContext context) {
// TODO: implement build
return ListView(children: _getlistDate());
}
}
-
效果图: