使用 ShaderMask 将 borderRadius 应用于小部件

Question

我正在尝试创建一个漂亮的线性渐变，在卡片图像的底部添加阴影。

我希望这张卡有圆角，但是当我应用 ShaderMask 时，线性渐变的底部是黑色的，它占据了容器的整个空间（即容器有圆角，但着色器的底部黑色部分）蒙版创建直角）。

看图片：

这是代码：

import 'package:flutter/material.dart';
import 'dart:math';

class ProfileCard extends StatelessWidget {
  final String imageName;
  final String title;

  ProfileCard({this.imageName, this.title});

  @override
  Widget build(BuildContext context) {
    return Stack(
      children: <Widget>[
        ShaderMask(
          shaderCallback: (Rect bounds) {
            return LinearGradient(
              begin: Alignment.topCenter,
              end: Alignment.bottomCenter,
              colors: <Color>[Colors.transparent, Colors.black],
            ).createShader(bounds);
          },
          blendMode: BlendMode.darken,
          child: Container(
            decoration: BoxDecoration(
              borderRadius: BorderRadius.all(
                Radius.circular(10.0),
              ),
              image: DecorationImage(
                image: AssetImage('assets/images/$imageName.jpg'),
                fit: BoxFit.cover,
              ),
            ),
          ),
        ),
      ],
    );
  }
}

左上角和右上角都可以，因为渐变的上端部分是透明的。

请注意，堆栈还有其他子级；我只是删除了它们以使代码更具可读性。我还尝试将堆栈包装在容器内并将 borderRadius 应用于该容器，但它不起作用。

如何同时在容器背景图像和圆角上拥有这种漂亮的渐变？

Answer 1

包装ShaderMask小部件并提供与传递给保存图像的 ClipRRect相同的属性值。将其子项剪辑在圆角矩形中，从各个侧面正确显示圆角。下面的示例工作代码：borderRadiusContainerClipRRectContainer

class ProfileCard extends StatelessWidget {
  final String imageName;
  final String title;

  ProfileCard({this.imageName, this.title});

  @override
  Widget build(BuildContext context) {
    return Stack(
        children: [
          ClipRRect(
              borderRadius: BorderRadius.all(
    Radius.circular(10.0)),
            child: ShaderMask(
                shaderCallback: (Rect bounds) {
                  return LinearGradient(
                      begin: Alignment.topCenter,
                      end: Alignment.bottomCenter,
                      colors: [
                        Colors.transparent,
                        Colors.black
                      ]
                  ).createShader(bounds);
                },
                blendMode: BlendMode.darken,
                child: Container(
                    width: 400,
                    height: 500,
                    decoration: BoxDecoration(
                      borderRadius: BorderRadius.all(
                        Radius.circular(10.0),
                      ),
                      image: DecorationImage(
                        image: AssetImage('assets/jpg.jpg'),
                        fit: BoxFit.cover,
                      ),
                    )
                ))
          )
        ]
    );
  }
}

希望这能回答您的问题。