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

Posted 2023-02-23

【中文标题】使用图像作为自定义形状卡片/材料小部件的背景

【英文标题】：Use image as background of custom shape Card/Material widget

【发布时间】：2020-11-16 19:16:37

【问题描述】：

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

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

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

【参考方案1】：

试试这个：

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

【参考方案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),
            ),
          ),
        ),
      ),
    );