1、AspectRatio
AspectRatio 的作用是根据设置调整子元素 child 的宽高比。它会在布局限制条件允许的范围内尽可能的扩展，widget 的高度是由宽度和比率决定的。如果在满足所有限制条件过后无法找到一个可行的尺寸，AspectRatio 最终将会去优先适应布局限制条件，而忽略所设置的比率。
属性
AspectRatio AspectRatio({
Key? key,
//宽高比，最终可能不会根据这个值去布局，具体则要看综合因素，外层是否允许按照这种比率进行布局，这只是一个参考值。
required double aspectRatio,
Widget? child,
})
示例
class HomePage extends StatelessWidget {
const HomePage({super.key});
@override
Widget build(BuildContext context) {
return SizedBox(
//width: 300,
child: AspectRatio(
aspectRatio: 2,
child: Container(
color: Colors.red,
),
),
);
}
}
2、Card
Card 是卡片组件块，内容可以由大多数类型的 Widget 构成，Card 具有圆角和阴影，这让它看起来有立体感。
属性
Card Card({
Key? key,
Color? color, //背景颜色
Color? shadowColor, //阴影颜色
Color? surfaceTintColor,
double? elevation, //阴影值的深度
/*
//Card 的阴影效果，默认的阴影效果为圆角的长方形边。
shape: const RoundedRectangleBorder(borderRadius: BorderRadius.all(Radius.circular(10))),
*/
ShapeBorder? shape,
bool borderOnForeground = true, //表示是否将 Card 的 border 在 child 之前展示。
EdgeInsetsGeometry? margin, //外边距
/*
clipBehavior 内容溢出的剪切方式。
Clip.none 不剪切；
Clip.hardEdge 裁剪但不应用抗锯齿；
Clip.antiAlias 裁剪而且抗锯齿；
Clip.antiAliasWithSaveLayer 带有抗锯齿的剪辑并在剪辑之后立即保存 saveLayer。
*/
Clip? clipBehavior,
Widget? child,
//表示 Card 中的 child 是否都具有相同的 semantic 或者说他们的类型是一致的。
bool semanticContainer = true,
})
示例
class HomePage extends StatelessWidget {
const HomePage({super.key});
@override
Widget build(BuildContext context) {
return ListView(
children: const [
Card(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.all(Radius.circular(10)),
),
elevation: 20,
margin: EdgeInsets.all(10),
child: Column(
children: [
ListTile(
title: Text(
"张三",
style: TextStyle(fontSize: 30, color: Colors.black),
),
subtitle: Text(
"高级软件工程师",
style: TextStyle(fontSize: 15, color: Colors.grey),
),
),
Divider(
height: 10,
color: Colors.green,
),
ListTile(
title: Text(
"电话: 15101516327",
style: TextStyle(color: Colors.black, fontSize: 20),
),
),
ListTile(
title: Text(
"地址: 北京市海淀区中关村东路 107 号楼",
style: TextStyle(fontSize: 20, color: Colors.black),
),
),
],
),
),
Card(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.all(Radius.circular(10)),
),
elevation: 20,
margin: EdgeInsets.all(10),
child: Column(
children: [
ListTile(
title: Text(
"李四",
style: TextStyle(fontSize: 30, color: Colors.black),
),
subtitle: Text(
"高级软件开发工程师",
style: TextStyle(fontSize: 15, color: Colors.grey),
),
),
Divider(
height: 10,
color: Colors.green,
),
ListTile(
title: Text(
"电话: 15101516327",
style: TextStyle(fontSize: 20, color: Colors.black),
),
),
ListTile(
title: Text(
"地址: 地球村中国北京市海淀区",
style: TextStyle(fontSize: 20, color: Colors.black),
),
),
],
),
),
],
);
}
}
///图文列表卡片
class HomePage extends StatelessWidget {
const HomePage({super.key});
@override
Widget build(BuildContext context) {
return ListView(
children: [
Card(
shape: const RoundedRectangleBorder(
borderRadius: BorderRadius.all(Radius.circular(10))),
elevation: 20,
margin: const EdgeInsets.all(10),
child: Column(
children: [
AspectRatio(
aspectRatio: 2,
child: Image.network(
"https://www.itying.com/images/flutter/1.png",
fit: BoxFit.cover,
),
),
const ListTile(
leading: CircleAvatar(
foregroundImage: NetworkImage(
"https://www.itying.com/images/flutter/1.png"),
),
title: Text(
"XXXXX",
style: TextStyle(fontSize: 12, color: Colors.black),
),
subtitle: Text(
"XXXXXXXXXX",
style: TextStyle(fontSize: 10, color: Colors.grey),
),
),
],
),
),
Card(
shape: const RoundedRectangleBorder(
borderRadius: BorderRadius.all(Radius.circular(10))),
elevation: 20,
margin: const EdgeInsets.all(10),
child: Column(
children: [
AspectRatio(
aspectRatio: 2,
child: Image.network(
"https://www.itying.com/images/flutter/2.png",fit: BoxFit.cover,),
),
const ListTile(
leading: CircleAvatar(
foregroundImage: NetworkImage(
"https://www.itying.com/images/flutter/2.png"),
),
title: Text(
"XXXXX",
style: TextStyle(fontSize: 12, color: Colors.black),
),
subtitle: Text(
"XXXXXXXXXX",
style: TextStyle(fontSize: 10, color: Colors.grey),
),
),
],
),
),
],
);
}
}
CircleAvatar 裁剪图片
CircleAvatar 不提供设置边框的属性。但是，可以将其包裹在具有更大半径和不同背景颜色的不同 CircleAvatar 中，以创建类似于边框的内容。
class HomePage extends StatelessWidget {
const HomePage({super.key});
@override
Widget build(BuildContext context) {
return const CircleAvatar(
radius: 150,
// backgroundImage: NetworkImage("https://www.itying.com/images/flutter/3.png"),
backgroundColor: Colors.lightBlue,
child: CircleAvatar(
radius: 120,
backgroundImage: NetworkImage("https://www.itying.com/images/flutter/3.png"),
),
);
}
}
网友评论