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

【问题标题】：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 中，如果我将图像传递给小部件，则图像不会作为父级剪辑。裁剪具有相同形状的图像的最佳方法是什么？

【问题讨论】：

标签： android flutter material-design flutter-layout flutter-widget

【解决方案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),
            ),
          ),
        ),
      ),
    );
  }
}

【讨论】：