Question

出于某种原因，我在使用ShaderMask时有非常有线的行为。我在Widgets中有很多不同的SingleScrollView。其中之一是Text和ShaderMask。在启动屏幕期间，我没有任何遮罩，直到我滚动一下。

            ShaderMask(
                shaderCallback: (Rect bounds) {
                  return  LinearGradient(
                    tileMode: TileMode.clamp,
                    begin: Alignment.bottomCenter,
                    end: Alignment.topCenter,
                    colors: <Color>[Colors.transparent, Colors.white],
                  ).createShader(bounds);
                },
                child: Text(
                  sampleDetails,
                  style: TextStyle(fontSize: AppDimens.textSizeSmall),
                ),
              ),

根据我发现的调试，它与屏幕上的Alignment紧密相关。对于前。将Alignment更改为水平将在此页面上生效而无需滚动（因为页面上的滚动是垂直的！）。

                LinearGradient(
                    tileMode: TileMode.clamp,
                    begin: Alignment.centerLeft,
                    end: Alignment.centerRight,
                    colors: <Color>[Colors.transparent, Colors.white],
                  ).createShader(bounds);

我没有看到有关启动Shaders的数据透视的任何文档详细信息，所以这很烦人。知道如何将其更改为仅基于特定框才能工作吗？

Answer 1

很抱歉造成麻烦，有一种解决方法。根据小部件的大小，为着色器选择正确的矩形。主线将是下一个createShader(Rect.fromLTRB(0, 0, rect.width, rect.height))。

ShaderMask(
  shaderCallback: (rect) {
    return LinearGradient(
      begin: Alignment.topCenter,
      end: Alignment.bottomCenter,
      colors: [Colors.black, Colors.transparent],
    ).createShader(Rect.fromLTRB(0, 0, rect.width, rect.height));
  },
  blendMode: BlendMode.dstIn,
  child: Image.asset(
    'assets/chrome.png',
    height: 400,
    fit: BoxFit.contain,
  ),
),

扑。 ShaderMask无法从本地Container对齐

1 个答案: