最终效果图

实现思路

首先要实现这种效果，肯定要使用flutter的Statck组件。使用层级覆盖的方式。如果有其他更好的方案，麻烦下方留言

把效果图进行简单拆解，每张银行卡固定高度我们定义为_itemHeight，银行卡之间被遮挡部分的高度定义为_topSpace 。总高度计算:

height: _itemHeight * (list.length) -
    _topSpace * (list.length - 1),

然后需要计算每一个item在Stack组件的起始位置即可需要特别处理的就是只有一张银行卡的情况

if (index == 0) {
  top = 0;
} else {
  top = (_itemHeight * index) - _topSpace * index;
}

然后每一个item组件

const List _colorArray = [  {'bf': Color.fromRGBO(255, 170, 86, 1), 'tr': Color.fromRGBO(255, 134, 78, 1)},  {'bf': Color.fromRGBO(255, 146, 89, 1), 'tr': Color.fromRGBO(234, 57, 110, 1)},  {'bf': Color.fromRGBO(175, 122, 255, 1), 'tr': Color.fromRGBO(215, 71, 255, 1)},  {'bf': Color.fromRGBO(88, 158, 255, 1), 'tr': Color.fromRGBO(88, 76, 255, 1)},];

Positioned(
    top: top,//距离顶部位置
    left: 0,
    right: 0,
    child: Container(
      alignment: Alignment.center,
      padding: EdgeInsets.fromLTRB(16, 8, 8, 8),
      child: bankItem(context, bankModel),//自定义每张卡片样式
      decoration: BoxDecoration(
          borderRadius: BorderRadius.circular(12),
          gradient: LinearGradient(
              //渐变位置
              begin: Alignment.bottomLeft, //右上
              end: Alignment.topRight, //左下
              colors: [_colorArray[index]['bf'], _colorArray[index]['tr']])),
      height: _itemHeight,//总高度
    ));

即可轻松实现我们所需要的效果。如果对你有帮助麻烦帮帮点个赞谢谢

flutter带你实现简单的银行卡列表

最终效果图

实现思路