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

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

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

如何在容器背景图像上同时具有良好的渐变效果和圆角？

Answer 1

用return response()->json(array json, int status_code, array? headers)包装ShaderMask小部件，并提供与传递给保存图像的ClipRRect相同的borderRadius属性值。 Container将其子项修剪为圆角矩形，该矩形在各个角的圆角处正确显示了ClipRRect。下面的示例工作代码：

Container

希望这能回答您的问题。