扑：如何在ListView中实现逐渐褪色的文本？

问题描述

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

底部的那个。

这就是我所做的。一些解释：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上做了一些工作，但是我只能更改背景颜色。任何想法我都会很感激。

解决方法

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

,

您可以使用flutter pub软件包。

fading_edge_scrollview

,

它可能是这样的：

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

我的回答来自：this Yariv.A. 的回答小改动。

,

正如 @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,index) => SizedBox(
                      height: 14.0,index) => Text(
                      '${index+1} Item ${index+1}) - Test',style: TextStyle(color: Colors.black,fontSize: 17,fontWeight: FontWeight.w900),)
            ],));
}

Output display of the code