dart - 淡化边缘 ListView - Flutter

Question

有没有人在 Android for Flutter 中遇到过类似 fadingEdgeLength 的东西，这样当您向上滚动时项目开始淡入屏幕顶部？

下面是我用小部件构建的界面。

如果有帮助，这些是我指的属性:

android:fadingEdgeLength="10dp"

android:requiresFadingEdge="水平">

@override
Widget build(BuildContext context) {
return Scaffold(
  appBar: AppBar(
    title: Text('CMS Users'),
  ),
  body: ListView.builder(
      padding: EdgeInsets.only(top: 20.0, left: 4.0),
      itemExtent: 70.0,
      itemCount: data == null ? 0 : data.length,
      itemBuilder: (BuildContext context, int index) {
        return Card(
          elevation: 10.0,
          child: InkWell(
            onTap: () {
              Navigator.push(
                  context,
                  new MaterialPageRoute(
                    builder: (BuildContext context) =>
                        new PeopleDetails("Profile Page", profiles[index]),
                  ));
            },
            child: ListTile(
              leading: CircleAvatar(
                child: Text(profiles[index].getInitials()),
                backgroundColor: Colors.deepPurple,
                radius: 30.0,
              ),
              title: Text(
                  data[index]["firstname"] + "." + data[index]["lastname"]),
              subtitle: Text(
                  data[index]["email"] + "\n" + data[index]["phonenumber"]),
            ),
          ),
        );
      }),
   );
 }
}

Answer 1

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

您可以选择为 LinearGradient 设置 [stops] 列表:

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

另外:有混合模式，其中源的颜色 channel 被忽略，只有不透明度有影响。 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'),
                ),
              );
            },
          ),
        ),
      ),
    );
  }
}