使用图像作为自定义形状 Card/Material 小部件的背景

Question

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

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

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

Answer 1

为 Android 创建一个 CustomClipper class:

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),
            ),
          ),
        ),
      ),
    );
  }
}

Answer 2

试试这个：

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

使用图像作为自定义形状 Card/Material 小部件的背景

Use image as background of custom shape Card/Material widget

android

flutter

material-design

flutter-layout

flutter-widget