时间戳

首页 > 解决方案 > 卡片轮播刷卡，细节扑朔迷离

animation - 卡片轮播刷卡，细节扑朔迷离

问题描述

我想创建一堆具有轮播效果的图像，图像的详细信息将在下面显示在不同的容器中。从堆栈中滑动图像时，图像的细节将随之改变。

已经完成了图像轮播部分和滑动。

CarouselSlider(
  viewportFraction: 0.7,
  aspectRatio: 1,
  autoPlay: true,
  enlargeCenterPage: true,
  items: carouselList.map(
    (image) {
      return Container(
        margin: EdgeInsets.all(5),
        decoration: BoxDecoration(
          borderRadius: BorderRadius.all(
            Radius.circular(10),
          ),
          image:
              DecorationImage(image: AssetImage(image), fit: BoxFit.cover),
        ),
      );
    },
  ).toList(),
);

从堆栈中滑动图像时如何更改图像的细节？想要实现如下图所示的滑块。

标签： animationflutterdartslidercarousel

解决方案

您是否在可以创建自己的动态树的包中检查了这个：

CarouselSlider.builder(
   itemCount: 15,
   itemBuilder: (BuildContext context, int itemIndex) =>
        Container(
            child: Text(itemIndex.toString()),
        ),
   )

您的 carouselList 将是您拥有标题、发布日期、评级和图像的类对象列表。将列表传递给构建器会将每个对象渲染到该长度。

推荐阅读