flutter:如何实现ListView中的文字逐渐淡出?

2024-01-03

I want to achieve the style like the picture. A ListView containing a few Container, and each container has some text. When scrolling the ListView, I want to gradually faded part of the content of the last Container. The last means the one displayed in the bottom of the ListViewthe style I want.

这就是我所做的。一些解释:timeTable是 ListView 前面的一个小部件,并且statisticItem正是Container我上面提到的。

body: Column(
      children: <Widget>[
        timeTable(),
        SizedBox(height: 18,),
        Expanded(
          child: ListView.separated(
            itemCount: 5,
            separatorBuilder: (context, index) => SizedBox(height: 24.0,),
            itemBuilder: (context, index) => statisticItem(),
          ),
        )
      ],
    )

另外,我在shaderMask上做了一些努力,但只能改变背景颜色。任何想法我都会非常感激。


它可能是这样的:

body: Column(
    children: <Widget>[
      timeTable(),
      SizedBox(
        height: 18,
      ),
      Expanded(
        child: Stack(
          child: ListView.separated(
            itemCount: 5,
            separatorBuilder: (context, index) => SizedBox(
              height: 24.0,
            ),
            itemBuilder: (context, index) => statisticItem(),
          ),
          FadeEndListView(),
        ),
      )
    ],
  ),

其中 FadeEndListView 是:

class FadeEndListView extends StatelessWidget {
  const FadeEndListView({
    Key key,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Positioned(
      bottom: 0,
      left: 0,
      right: 0,
      height: 70,
      child: Container(
        decoration: BoxDecoration(
          gradient: LinearGradient(
            begin: Alignment.topCenter,
            end: Alignment.bottomCenter,
            stops: [0.0, 1.0],
            colors: [
              Theme.of(context).scaffoldBackgroundColor.withOpacity(0.0),
              Theme.of(context).scaffoldBackgroundColor,
            ],
          ),
        ),
      ),
    );
  }
}

我的回答来自:淡入淡出边缘 ListView - Flutter https://stackoverflow.com/questions/51066628/fading-edge-listview-flutterYariv.A 的回答。有小的变化。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

flutter:如何实现ListView中的文字逐渐淡出? 的相关文章

随机推荐

  • 基于百分比的布局间隙

    我在基于百分比的布局方面遇到问题 这是我的代码http jsfiddle net uHkXH http jsfiddle net uHkXH 如果您在 Mac 上使用 Safari 或 Opera 或者在 Windows 上使用 IE7 或
  • 设计自定义路由和登录页面

    我正在尝试让自定义路由在我的 Rails 应用程序中工作 Ruby 1 9 2 和 Rails 3 这是我的 config routes rb 文件 match dashboard gt home dashboard as gt user
  • C++ 推导“非类型函数指针”类模板参数

    考虑一个模板类 例如 template
  • .mp4 文件无法在 Chrome 中播放

    我想在我的网站上展示视频 我创建了一个 mp4 文件并使用 HTML5 视频标签将其添加到 html 中 问题是它没有在 chrome 中显示 我也想知道如何才能一次又一次地重播它 我也有同样的问题 我将编解码器更改为 H264 MPEG
  • Pyinstaller-python exe 停止工作:“无法打开自身”

    我一直在使用 Pyinstaller 将 python 脚本转换为可执行文件 过去它对我来说效果很好 但是现在 当我尝试运行可执行文件 旧的和新的 时 出现错误 无法打开自身 或存档 其中第一个空白是可执行文件的路径 第二个空白是存档的路径
  • 如何运行拉取的图像 - docker

    我正在尝试运行拉取的图像 但没有成功 我使用图像 URI 从 AWS 中提取了图像 当我跑步时docker images我可以看到我拉的图像 REPOSITORY TAG IMAGE ID CREATED SIZE alpine 3 9 0
  • 为什么 Excel 不根据 8 字节 IEEE 754 进行舍入

    以下表达式的计算结果为false in C 1 1 0 85 3 lt 0 95 我想它在大多数实现 IEEE 754 的其他编程语言中都是这样做的 因为 1 1 0 85 3评估为0 95000000000000007 大于0 95 然而
  • 如何在没有根项目的情况下在 Maven3 中执行 Reactor 构建?

    如何在没有根项目的情况下在多个 Maven 项目上执行临时反应器构建 这在 maven2 中曾经是可能的 通过调用带有 r 选项的 mvn 命令 该命令将从工作目录中递归搜索项目 并将它们组织在反应器中以正确的顺序构建 即使项目不共享公共资
  • 选择不适用于 Ionic Framework 的默认选项

    我正在使用离子框架 我想输入第一个选项作为默认值 但这样做不起作用 我能做些什么
  • 函数声明后的 __asm__("__isoc99_scanf")

    我在预处理的 C 代码中看到了以下代码 什么是asm函数声明后做什么 extern int scanf const char restrict format asm isoc99 scanf 显然 它使函数调用编译为 call isoc99
  • Android 谷歌分析 xml 文件

    我正在读一本新书谷歌 Android 分析教程 https developers google com analytics devguides collection android v4 很奇怪 首先当我在我的 gradle 中添加这个字符
  • 使用 OpenCV 扫描文档

    我正在开发一款适用于 Android 的文档扫描仪 类似于this https play google com store apps details id com intsig camscanner 我对此进行了搜索 发现可以使用 Open
  • BuildContext 在 Flutter 中做什么?

    什么是BuildContext我们可以从中得到什么信息 https docs flutter dev flutter widgets BuildContext class html https docs flutter dev flutte
  • 禁用特定语言功能的自动完成功能

    我导入vector from std using include
  • 将远程对象反序列化为最窄的可访问类

    In 共享 jar I have abstract class MyParent abstract class MyClass MyParent getFoo 服务器 jar包含 abstract class MyChild extends
  • android:textAllCaps="false" 不适用于 TabLayout 设计支持

    我已经设定android textAllCaps false in my android support design widget TabLayout认为它只显示全部大写的选项卡标题 如何删除所有大写字母 设计库更新 23 2 0 原始答
  • 算法 - 字符串相似度分数/散列

    有没有一种方法可以计算字符串的一般 相似度分数 在某种程度上 我不是将两个字符串比较在一起 而是为每个字符串获取一些数字 分数 哈希 这些数字 分数可以稍后告诉我两个字符串是否相似 两个相似的字符串应该具有相似 接近 的分数 哈希值 让我们
  • 将数据从 Excel 导出到 Access - 错误:参数不可选

    当我按下按钮时 我尝试使用 Excel 文件上的 VBA 代码将数据从 Excel 2010 导出到 Access 2010 我只想将 水质 表中的数据导出到数据库中的 水质 表 Excel 文件和访问文件中还有其他表和表格 我的实际代码是
  • PHP正则表达式非捕获非匹配组

    我正在制作一个日期匹配正则表达式 一切进展顺利 到目前为止我已经得到了 0 3 0 9 0 1 0 9 20 0 1 0 9 它 希望 能够匹配 21 世纪的一位数或两位数的日期和月份 以及两位数或四位数的年份 一些尝试和错误让我走到了这一
  • flutter:如何实现ListView中的文字逐渐淡出?

    I want to achieve the style like the picture A ListView containing a few Container and each container has some text When