在本博客中，我們將探討Flutter中的堆疊式卡輪播。 我們還將實現一個演示程序，并學習在您的flutter應用程序中使用stacked_card_carousel包創建一個帶有垂直輪播的堆疊卡。

用于創建帶有堆疊卡片的垂直輪播的小部件。 下面的演示視頻顯示了如何在Flutter中創建帶有垂直旋轉木馬的堆疊卡。 它顯示了在您的flutter應用程序中如何使用stacked_card_carousel軟件包來使用堆疊式卡輪播。 它顯示了垂直圓盤傳送帶滑動卡的列表，所有卡向上滑動并堆疊，稱為堆疊式卡傳送帶。 它會顯示在您的設備上。

image.png

屬性：

堆疊式卡輪播的一些屬性是：

• items：這些屬性表示卡小部件的列表。initialOffset：這些屬性表示卡的初始垂直頂部偏移。
• spaceBetweenItems：這些屬性表示項目之間的垂直空間。 值從第一個項目的頂部開始。
• applyTextScaleFactor：這些屬性表示如果設置為true，則根據文本比例因子線性擴展空間和位置。 縮小比例被省略。

實現：

• 步驟1：添加依賴項將依賴項添加到pubspec-yaml文件。
  依賴項：
  stacked_card_carousel: ^0.0.2+1
• 步驟2：引用該dart文件
  import 'package:stacked_card_carousel/stacked_card_carousel.dart';
• 第3步：在應用根目錄執行 flutter packages get。
• 步驟4：啟用AndriodX將以下內容添加到您的gradle.properties文件中：

org.gradle.jvmargs=-Xmx1536M
android.enableR8=true
android.useAndroidX=true
android.enableJetifier=true

如何在dart文件中實現：

在lib文件夾中創建一個名為style_card.dart的新dart文件。
首先，我們創建StyleCard類，將在后續的DEMO中調用它

final Image image;
final String title;
final String description;

const StyleCard({
  Key key,
  this.image,
  this.title,
  this.description
}) : super(key: key);

我們將制作一個 card 控件. 在card控件中, 我們加入一個elevation 屬性和一個column控件。 在column中, 我們加入一個container用于包含image, title 和 description. 然后在stacked_card_demo頁面中使用它。

Card(
  elevation: 4.0,
  child: Padding(
    padding: const EdgeInsets.all(12.0),
    child: Column(
      children: <Widget>[
        Container(
          width: MediaQuery.of(context).size.width*0.7,
          height: MediaQuery.of(context).size.width*0.65,
          child: image,
        ),
        SizedBox(height: 5,),
        Text(
          title,
          style: TextStyle(color: Colors.pinkAccent,fontSize: 22,fontWeight: FontWeight.bold),
        ),
        SizedBox(height: 10,),
        Text(
          description,
          style: TextStyle(color: Colors.black),textAlign: TextAlign.center,
        ),

      ],
    ),
  ),
);

在lib文件夾中創建一個新的名為stacked_card_demo.dart的dart文件。

StackedCardCarousel(
  initialOffset: 40,
  spaceBetweenItems:400 ,
  items: styleCards,
),

• initialOffset 表示距離Card控件頂部的偏移量
• spaceBetweenItems 表示Card控件之間的距離
• items 表示卡片控件列表

現在，我們將創建一個styleCards列表，并在其中添加一個StyleCard類。

final List<Widget> styleCards = [
  StyleCard(
    image: Image.asset("assets/deepak.jpg"),
    title: "Team Leader",
    description: "It play extremely important role in motivating\nour team and ensuring their success.",
  ),
  StyleCard(
    image: Image.asset("assets/yashwant.png"),
    title: "Secondary Team Leader ",
    description: "It provides guidance, instruction, direction to\nour team. Handsome member in our team.",

  ),
  StyleCard(
    image: Image.asset("assets/akshay.png"),
    title: "Software Engineer",
    description: "Team player, hard worker, expert in\n both andriod and flutter",

  ),
  StyleCard(
    image: Image.asset("assets/aditya.png"),
    title: "Software Engineer",
    description: "Smart, quick learner, and very\ndedicated to the work.",

  ),
  StyleCard(
    image: Image.asset("assets/naveen.png"),
    title: "Associate Software Engineer",
    description: "Flutter developer, keen learner\n very supporting. Bodyguard of our team",
  ),
  StyleCard(
    image: Image.asset("assets/mohit.png"),
    title: "Associate Software Engineer",
    description: "Responsible team member,situation handler,\nand a sharp learner with flutter and blogs.",
  ),
  StyleCard(
    image: Image.asset("assets/shaiq.png"),
    title: "Associate Software Engineer",
    description: "Flutter developer with a passion for learning,\nstar blogger, punctual and \na handsome teammate.",
  ),
  StyleCard(
    image: Image.asset("assets/rakhi.png"),
    title: "Associate Software Engineer",
    description: "Newest team member, with high passion for\nlearning very sharp,and dedicated.Need more\ntime to know about you.",
  ),
];

我們創建了八個卡片控件，并在其中添加了image，title和description。 程序運行后，我們將看到一個卡片列表， 當用戶向上滑動時，所有卡片都將堆疊在一起； 當用戶向下滑動時，卡片都將回到原始位置；
效果如下：

image.png

Demo地址：https://github.com/flutter-devs/flutter_stacked_card_carousel_demo