衰落边缘列表视图 - 颤振 [英] Fading Edge ListView - Flutter

问题描述

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

has anyone come across something like fadingEdgeLength in Android for Flutter so that when you scroll up items start fading into the top of the screen?

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

Below is my interface built up of the Widgets.

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

If it helps these are the properties I'm referring to:

android:fadingEdgeLength="10dp"

android:fadingEdgeLength="10dp"

android:requiresFadingEdge="horizo​​ntal">

android:requiresFadingEdge="horizontal">

@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"] + "
" + data[index]["phonenumber"]),
            ),
          ),
        );
      }),
   );
 }
}

推荐答案

您可以在 ListView 之上应用 ShaderMask 并使用 BlendMode得到你想要的.

You could apply a ShaderMask on top of ListView and use BlendMode to get what you want.

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

这篇关于衰落边缘列表视图 - 颤振的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！