flutter：如何实现ListView中逐渐淡出的文字？答案

【问题标题】：flutter: How to achieve the gradually fading text in a ListView?flutter：如何实现ListView中逐渐淡出的文字？
【发布时间】：2020-12-28 17:17:56
【问题描述】：

我想实现图片一样的风格。一个ListView 包含几个Container，每个容器都有一些文本。当滚动ListView时，我想逐渐淡化最后一个Container的部分内容。最后一个表示ListView底部显示的那个。

这就是我所做的。一些解释：timeTable是ListView前面的一个widget，而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上做了一些努力，但是我只能改变背景颜色。任何想法我都会非常感激。

【问题讨论】：

标签： flutter dart flutter-listview

【解决方案1】：

可以使用银。 SliverList，SliverAppbar。它用于自定义滚动效果。也可以尝试自定义滚动视图。我发现这个问题很相似。 How to fade in/out a widget from SliverAppBar while scrolling?

【讨论】：

【解决方案2】：

你可以使用flutter pub包。

fading_edge_scrollview

【讨论】：

【解决方案3】：

可能是这样的：

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

我的回答来自：Fading Edge ListView - Flutter Yariv.A. 的回答小改动。

【讨论】：

【解决方案4】：

正如之前提到的，@Salim Murshed https://pub.dev/packages/fading_edge_scrollview 为我工作，但我想我会添加一些您可能想要进行的更改。

我更改了包中的两个值，以在列表的顶部和底部实现所需的淡化强度：

    double gradientFractionOnStart = 0.0,
    double gradientFractionOnEnd = 1.0,

这是我的测试代码页：

    final _controller = ScrollController();

    @override
    Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: SizedBox(
          height: 190,
          width: 200,
          child: Column(
            children: <Widget>[
              Expanded(
                child: FadingEdgeScrollView.fromScrollView(
                  child: ListView.separated(
                    controller: _controller,
                    itemCount: 50,
                    separatorBuilder: (context, index) => SizedBox(
                      height: 14.0,
                    ),
                    itemBuilder: (context, index) => Text(
                      '${index+1} Item ${index+1}) - Test',
                      style: TextStyle(color: Colors.black, fontSize: 17, 
                      fontWeight: FontWeight.w900),
                    ),
                  ),
                ),
              )
            ],
          ),
        ),
      ));
}

Output display of the code

【讨论】：