flutter 仿抖音的列表顶部透明度渐变效果

最新推荐文章于 2024-03-17 01:00:00 发布

氤氲息

最新推荐文章于 2024-03-17 01:00:00 发布

阅读量493

点赞数 1

分类专栏： flutter 文章标签： flutter android ios

本文链接：https://blog.csdn.net/weixin_44911775/article/details/130113259

版权

flutter 专栏收录该内容

143 篇文章 1 订阅

订阅专栏

参考
重点在于设置渐变时可以设置多个Color.fromRGBO(0, 0, 0, 1)，以实现某小块渐变透明的效果

ShaderMask(
      //此处是背景透明度渐变的处理
        shaderCallback: (Rect bounds) {
          return const LinearGradient(
            begin: Alignment.topCenter,
            end: Alignment.bottomCenter,
            colors: [
            //因为不能写死渐变的高度，所以通过渐变整个列表的方式实现顶部一小块渐变的效果
              Color.fromRGBO(0, 0, 0, 0),
              Color.fromRGBO(0, 0, 0, 1),
              Color.fromRGBO(0, 0, 0, 1),
              Color.fromRGBO(0, 0, 0, 1),
              Color.fromRGBO(0, 0, 0, 1),
              Color.fromRGBO(0, 0, 0, 1),
              Color.fromRGBO(0, 0, 0, 1),
              Color.fromRGBO(0, 0, 0, 1),
            ],
          ).createShader(Rect.fromLTRB(0, 0, bounds.width, bounds.height));
        },
        blendMode: BlendMode.dstIn,
        //SingleChildScrollView外层还需要嵌套一层Container，给个高度，因为项目代码太多，设置的高度放在类的最外层了
        child: SingleChildScrollView(
            controller: widget.scrollController,
            scrollDirection: Axis.vertical,
            key: _containerKey,
            ///注意设置为反向,
            reverse: groupMessageList.length >= 2 ? true : false,
            child: Column(children: [
              MediaQuery.removePadding(
                  removeTop: true,
                  context: context,
                  child: ListView.builder(
                      shrinkWrap: true,
                      physics: const NeverScrollableScrollPhysics(),
                      itemCount: groupMessageList.length,
                      itemBuilder: (BuildContext context, int index) {
                        return showItemView(groupMessageList[index]);
                      }))
            ])));

或者参考其他的

Widget build(BuildContext context) {
    double cardWidth = (MediaQuery.of(context).size.width - 44)/2;
    return Container(
      margin: EdgeInsets.only(left: 16),
      width: cardWidth,
      height: cardWidth * 1.2,
      decoration: BoxDecoration(
        image: DecorationImage(
          fit: BoxFit.fill,
          image: AssetImage(CommonImages.find_main_study_bg),
        ),
      ),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Container(
            margin: EdgeInsets.only(left: 13, top: 17, right: 13),
            child: Text(
              '我的学习',
              style: TextStyle(
                color: Colors.white,
                fontSize: 15,
                fontWeight: FontWeight.bold,
              ),
            ),
          ),
          Container(
            margin: EdgeInsets.only(left: 13, top: 10, right: 13),
            child: Expanded(
              child: Text(
                name,
                style: TextStyle(
                  color: Colors.white,
                  fontSize: 12,
                  fontWeight: FontWeight.w400,
                ),
                maxLines: 2,
                overflow: TextOverflow.ellipsis,
              ),
            ),
          ),
          ShaderMask(
          //此处是背景透明度渐变的处理
            shaderCallback: (Rect bounds) {
              return LinearGradient(
                begin: Alignment.topCenter,
                end: Alignment.bottomCenter,
                colors: [
                  Color.fromRGBO(0, 0, 0, 0.1),
                  Color.fromRGBO(0, 0, 0, 0.9),
                ],
              ).createShader(Rect.fromLTRB(0, 0, bounds.width, bounds.height));
            },
            blendMode: BlendMode.dstIn,
            child: Container(
              margin: EdgeInsets.only(left: 8, top: 8, right: 3 ),
              constraints: BoxConstraints(
                maxHeight: 28 * 4,///高度这样实现也是很无奈，各位有好方法请给推荐一下
              ),
              ///跑马灯的listView
              child: ListView.builder(
                  itemCount: _count > _showNumber ? _count + _showNumber : _count,
                  controller: _controller,
                  physics: NeverScrollableScrollPhysics(),
                  itemBuilder: (context, index) {
                    return itemWidget(context, index);
                  }
              ),
            ),
          ),
        ],
      ),
    );
  }