使用ShaderMask将borderRadius应用于小部件 [英] apply borderRadius to widget with ShaderMask

问题描述

我正在尝试创建一个很好的线性渐变，以在卡图像的底部添加某种阴影.

我希望此卡具有圆角，但是当我应用ShaderMask时，线性渐变的底部为黑色，它将占用容器的整个空间(即容器具有圆角但是着色器蒙版的底部黑色部分创建直角角).

I'd like this card to have rounded corners, but when I apply the ShaderMask, the bottom of the Linear Gradient being black it takes the whole space of the container (ie the container has rounded corner but the bottom, black part of the shader mask create right-angled corner).

查看图片:

这是代码:

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

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

The top left and right corners are OK because the end upper part of the gradient is transparent.

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

note that the Stack has other children; I just removed them to make code more readable. Also I tried to wrap the stack inside a Container and apply borderRadius to this Container, but it did not work.

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

推荐答案

用 ClipRRect 包装 ShaderMask 小部件，并提供相同的 borderRadius 属性值当您传递到保存图片的 Container 时. ClipRRect 将其子项剪切为圆角矩形，该矩形在各个圆角处正确显示了 Container .下面的示例工作代码:

Wrap ShaderMask widget with ClipRRect and provide the same borderRadius property value as you passed to the Container that holds the image. ClipRRect clips it's child in rounded rectangle which shows the Container properly in rounded corners from all sides. Sample working code below:

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

希望这能回答您的问题.

Hope this answers your question.

这篇关于使用ShaderMask将borderRadius应用于小部件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！