如何在图片之间创建具有幻灯片动画功能的UI？

Question

我期待在图像之间创建带有滑动动画的UI，enter image description here如图中所示，我希望第一个向左滑动图像，然后向后滑动图像到前面[]

CDOE-CardScrollWidget类扩展StatelessWidget {var currentPage;

var padding = 5.0;var verticalInset = 22.0;

CardScrollWidget（this.currentPage）;

@ override小部件build（BuildContext context）{

return new AspectRatio(

  aspectRatio: widgetAspectRatio,
  child: LayoutBuilder(builder: (context, contraints) {
    var width = contraints.maxWidth;
    var height = contraints.maxHeight;

    var safeWidth = width - 2 * padding;
    var safeHeight = height - 1 * padding;

    var heightOfPrimaryCard = safeHeight;
    var widthOfPrimaryCard = heightOfPrimaryCard * cardAspectRatio;

    var primaryCardLeft = safeWidth - widthOfPrimaryCard;
    var horizontalInset = primaryCardLeft / 2;

    List<Widget> cardList = new List();

    for (var i = 0; i < images.length; i++) {
      var delta = i - currentPage;
      bool isOnRight = delta > 0;

      var start = padding +
          max(
              primaryCardLeft -
                  horizontalInset * -delta * (isOnRight ? 15 : 1),
              0.0);

      var cardItem = Positioned.directional(
        top: padding + verticalInset * max(-delta, 0.0),
        bottom: padding + verticalInset * max(-delta, 0.0),
        start: start,
        textDirection: TextDirection.rtl,
        child: ClipRRect(
          borderRadius: BorderRadius.circular(16.0),
          child: Container(
            decoration: BoxDecoration(color: Colors.white, boxShadow: [
              BoxShadow(
                  color: Colors.black12,
                  offset: Offset(3.0, 6.0),
                  blurRadius: 10.0)
            ]),
            child: AspectRatio(
              aspectRatio: cardAspectRatio,
              child: Stack(
                fit: StackFit.expand,
                children: <Widget>[
                  Image.asset(images[i], fit: BoxFit.cover),
                  Align(
                    alignment: Alignment.bottomLeft,
                    child: Column(
                      mainAxisSize: MainAxisSize.min,
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: <Widget>[
                        Padding(
                          padding: EdgeInsets.symmetric(
                              horizontal: 16.0, vertical: 8.0),
                          child: Text(title[i],
                              style: TextStyle(
                                  color: Colors.white,
                                  fontSize: 25.0,
                                  )),
                        ),
                        SizedBox(
                          height: 10.0,
                        ),
                        Padding(
                          padding: const EdgeInsets.only(
                              left: 12.0, bottom: 20.0),
                          child: Container(
                            padding: EdgeInsets.symmetric(
                                horizontal: 22.0, vertical: 6.0),
                            decoration: BoxDecoration(
                                color: Colors.blueAccent,
                                borderRadius: BorderRadius.circular(20.0)),
                            child: Text("Read Later", 
                                style: TextStyle(color: Colors.white)),
                          ),
                        )
                      ],
                    ),
                  )
                ],
              ),
            ),
          ),
        ),
      );
      cardList.add(cardItem);
    }
    return Stack(
      children: cardList,
    );
  }),
);
}}

[我期待在图像输入图像描述之间创建带有滑动动画的UI，如图所示，我希望第一个向左滑动图像，向后滑动图像...

Answer 1