使用图像作为自定义形状卡片/材料小部件的背景

Question

有一个ContinuousRectangleBorder油漆，我可以将其传递给Card或Material小部件的形状参数。

Material(
shape: ContinuousRectangleBorder(
borderRadius: BorderRadius.circular(50),
),
elevation: 4,
color: theme.primaryColor,
child: image,
borderOnForeground: true,
)

但在android中，如果我将图像传递给小部件，则该图像不会作为父图像进行剪辑。裁剪具有相同形状的图像的最佳方法是什么？

Answer 1

试试这个：

Material(
shape: ContinuousRectangleBorder(
borderRadius: BorderRadius.circular(50),
),
elevation: 4,
color: theme.primaryColor,
child: image,
borderOnForeground: true,
clipBehavior: Clip.antiAliasWithSaveLayer,
)

Answer 2

对于Android，创建一个CustomClipper类：

class ImageContinuousClipper extends CustomClipper<Path> {
@override
Path getClip(Size size) {
return ContinuousRectangleBorder(borderRadius: BorderRadius.circular(200 * 0.625))
.getOuterPath(Rect.fromLTWH(0, 0, size.width, size.height));
}
@override
bool shouldReclip(CustomClipper<Path> oldClipper) {
return false;
}
}

一般来说，你可以这样做：

class MyWidget extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: SizedBox(
width: 200,
child: AspectRatio(
aspectRatio: 1,
child: Card(
shape: ContinuousRectangleBorder(
borderRadius: BorderRadius.circular(200 * 0.625),
),
child:Image.network(
'https://images.pexels.com/photos/2853198/pexels-photo-2853198.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500',
fit: BoxFit.cover),
),
),
),
),
);
}
}