Dart 淡入边缘列表视图-颤振

有没有人在Android中遇到过类似Fatter的fadingEdgeLength，这样当你向上滚动时，项目就会开始淡入屏幕顶部

下面是我的小部件界面

如果有帮助的话，我指的就是这些属性：

android:fadingEdgeLength=“10dp”

android:requiresFadingEdge=“水平”>

尝试使用

Text(
        'This is big text, I am using Flutter and trying to fade text',
        overflow: TextOverflow.fade,
        maxLines: 1,
      ),

---

您可以在

ListView

的顶部应用

ShaderMask

，并使用

BlendMode

获取所需内容

Widget animationsList() {
    return Expanded(
      child: ShaderMask(
        shaderCallback: (Rect bounds) {
            return LinearGradient(
              begin: Alignment.topCenter,
              end: Alignment.bottomCenter,
              colors: <Color>[Colors.transparent,Colors.red],
            ).createShader(bounds);
        },
        child: Container(height: 200.0, width: 200.0, color: Colors.blue,),
        blendMode: BlendMode.dstATop,
     ),
);

Widget animationsList（）{
扩大回报(
孩子：沙德尔马斯克(
着色器回调：（矩形边界）{
返回线半径(
开始：Alignment.topCenter，
结束：对齐。底部中心，
颜色：[颜色。透明，颜色。红色]，
).createShader（边界）；
},
子：容器（高度：200.0，宽度：200.0，颜色：Colors.blue，），
blendMode:blendMode.dstoop，
),
);

我也有类似的请求，所以我为此任务创建了一个库。 你可以在这里找到它：

---

要使用它，您需要将一个

ScrollController

添加到

ListView

中，然后将此

ListView

作为子对象传递给

FadingEdgeScrollView。从ScrollView

constructor

使用堆栈包装ListView，将ListView添加为第一个子对象，第二个子对象是使用LinearGradient定位的容器。 我的代码示例：

堆栈：

return Stack(
                    children: <Widget>[
                      ListView(
                        scrollDirection: Axis.horizontal,
                        children: _myListOrderByDate,
                      ),
                      FadeEndListview(),
                    ],
                  );

它看起来像这样：

---

正如其他人所提到的，您可以将ListView置于ShaderMask下，但通过少量的额外参数化，您可以获得更好的结果-至少如果您想实现我想要的效果

或者，您可以为LinearGradient设置[stops]列表：

如果指定，[stops]列表的长度必须与[colors]相同。它为每种颜色指定从开始到结束的向量分数，介于0.0和1.0之间

另外：存在混合模式，其中忽略源的颜色通道，只有不透明度才有效果。BlendMode.dstOut在下面的示例中也是如此。正如您在屏幕截图中所看到的，紫色没有具体使用，仅用于向量的部分

您可以使用不同的[blendMode]设置，其中有很多设置

void main() {
  runApp(
    MaterialApp(
      home: Scaffold(
        body: FadingListViewWidget(),
      ),
    ),
  );
}

class FadingListViewWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Container(
        height: 320,
        child: ShaderMask(
          shaderCallback: (Rect rect) {
            return LinearGradient(
              begin: Alignment.topCenter,
              end: Alignment.bottomCenter,
              colors: [Colors.purple, Colors.transparent, Colors.transparent, Colors.purple],
              stops: [0.0, 0.1, 0.9, 1.0], // 10% purple, 80% transparent, 10% purple
            ).createShader(rect);
          },
          blendMode: BlendMode.dstOut,
          child: ListView.builder(
            itemCount: 100,
            itemBuilder: (BuildContext context, int index) {
              return Card(
                color: Colors.orangeAccent,
                child: ListTile(
                  title: Text('test test test test test test'),
                ),
              );
            },
          ),
        ),
      ),
    );
  }
}

---

您好，谢谢您的回答，但这并不是我想要的。我希望实现的是，当每个列表块上升时，它会逐渐消失在屏幕顶部，这有助于我的演员阵容，我希望单个文本逐渐消失，但有没有办法控制淡出强度？这是最好的回答，因为，与使用Sta覆盖容器不同ck，此解决方案不会在ListView子对象淡出的区域阻止ListView的手势检测器。然而，这是一个很好的答案，因为颤振处理重画和构建的方式，如果您希望在用户开始滚动后阴影消失，您必须强制执行getState（…），然后在计算用户是否已滚动等之后将整个结构置为无效。好主意。我只需在文本末尾添加一些换行符，就可以快速修复它。稍后我将返回到一个更优雅的解决方案；我必须得到这个愚蠢的补丁。谢谢你，@martino你知道是否有可能修复它吗使用

SliverList

？如何处理堆叠中较高的项目吃掉/阻止手势？避免（对称）线条中的冗余半径：更改：“end:Alignment.bottomCenter”->“end:Alignment.center”添加：“tileMode:tileMode.mirror”（这是关键！）删除：最后两项“colors”和“stops”第二次输入“stops”乘以2:）

class FadeEndListview extends StatelessWidget {
  const FadeEndListview({
    Key key,
  }) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return Positioned(
      right: 0,
      width: 8.0,
      height: kYoutubeThumbnailsHeight,
      child: Container(
        decoration: BoxDecoration(
          gradient: LinearGradient(
            begin: Alignment.centerRight,
            end: Alignment.centerLeft,
            stops: [0.0, 1.0],
            colors: [
                Theme.of(context).scaffoldBackgroundColor,
                Theme.of(context).scaffoldBackgroundColor.withOpacity(0.0),
            ],
          ),
        ),
      ),
    );
  }
}

void main() {
  runApp(
    MaterialApp(
      home: Scaffold(
        body: FadingListViewWidget(),
      ),
    ),
  );
}

class FadingListViewWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Container(
        height: 320,
        child: ShaderMask(
          shaderCallback: (Rect rect) {
            return LinearGradient(
              begin: Alignment.topCenter,
              end: Alignment.bottomCenter,
              colors: [Colors.purple, Colors.transparent, Colors.transparent, Colors.purple],
              stops: [0.0, 0.1, 0.9, 1.0], // 10% purple, 80% transparent, 10% purple
            ).createShader(rect);
          },
          blendMode: BlendMode.dstOut,
          child: ListView.builder(
            itemCount: 100,
            itemBuilder: (BuildContext context, int index) {
              return Card(
                color: Colors.orangeAccent,
                child: ListTile(
                  title: Text('test test test test test test'),
                ),
              );
            },
          ),
        ),
      ),
    );
  }
}