底部ListView项的透明渐变

Question

我有一个带有三个子代的堆栈：header位于顶部，ListView具有多个项目，而menu则位于底部。这很好用，但我希望底部菜单后面的项目获得线性渐变透明度-类似于手套。我试图将ShaderMask小部件包装在ListView上方，但是这种透明性并未固定在屏幕底部。

以下是一些代码：

ShaderMask(
            shaderCallback: (rect) {
              return LinearGradient(
                begin: Alignment.topCenter,
                end: Alignment.bottomCenter,
                colors: [Colors.black, Colors.transparent],
              ).createShader(rect);
            },
            blendMode: BlendMode.dstATop,
            child: ListView(
              children: <Widget>[
                Container(
                  padding: const EdgeInsets.only(top: 10.0, bottom: 15.0),
                  decoration: BoxDecoration(
                    color: Color.fromRGBO(15, 20, 70, 1.0),
                    borderRadius: BorderRadius.only(
                      topLeft: const Radius.circular(25.0),
                      topRight: const Radius.circular(25.0),
                    ),
                  ),
                  child: Column(
                    mainAxisAlignment: MainAxisAlignment.start,
                    mainAxisSize: MainAxisSize.max,
                    children:
                      sessions,
                  )
                ),
              ]
            ),
          );

Answer 1

问题是ShaderMask应用于整个孩子，在您的情况下是ListView。您可以将菜单包装在另一个Stack中，并使用LinearGradient和Container将decoration放在菜单后面，并且需要避免在该{{1} }，因此如果您点击Container，仍然可以与ListView进行交互。

您可以执行以下操作：

LinearGradient