【Flutter】堆疊式卡輪播
作爲移動應用程序開發人員，我們有時需要製作滑動的，動畫的背景圖像輪播。但是，有時候，我們需要製作一張滑動卡片傳送帶，其中包含一些具有各種背景顏色，圖像或漸變的信息。
在在本博客中，我們將探討**「Flutter 中」** 的 ** 堆疊式卡輪播。** 我們還將實現一個演示程序，並學習在您的 flutter 應用程序中使用**「stacked_card_carousel」**包創建一個帶有垂直輪播的堆疊卡。
pub 地址：https://pub.dev/packages/stacked_card_carousel
用於創建帶有堆疊卡片的垂直輪播的小部件。下面的演示視頻顯示瞭如何在 Flutter 中創建帶有垂直旋轉木馬的堆疊卡。它顯示了在您的 flutter 應用程序中如何使用**「stacked_card_carousel」**軟件包來使用堆疊式卡輪播。它顯示了垂直圓盤傳送帶滑動卡的列表，所有卡向上滑動並堆疊，稱爲堆疊式卡傳送帶。它會顯示在您的設備上。
堆疊式卡輪播的一些屬性：
-
items： 這些屬性表示卡小部件的列表。
-
initialOffset： 這些屬性表示卡的初始垂直頂部偏移。
-
spaceBetweenItems： 這些屬性表示項目之間的垂直空間。值從第一個項目的頂部開始。
-
applyTextScaleFactor： 這些屬性表示如果設置爲 true，則根據文本比例因子線性擴展空間和位置。縮小比例被省略。
使用
-
添加依賴
stacked_card_carousel: ^0.0.2+1 -
引入
import 'package:stacked_card_carousel/stacked_card_carousel.dart'; -
運行命令：「flutter packages get」
-
啓用**「AndriodX」**
org.gradle.jvmargs=-Xmx1536M android.enableR8=true android.useAndroidX=true android.enableJetifier=true
在 libs 目錄下創建 「style_card.dart」 文件
final Image image;
final String title;
final String description;
const StyleCard({
Key key,
this.image,
this.title,
this.description
}) : super(key: key);在卡片內，我們將添加一個 height 屬性並添加一個列小部件。在列小部件中，我們將爲圖像添加一個容器，添加標題和描述。然後在 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,
),
],
),
),
);創建 **「stacked_card_demo.dart」**文件
StackedCardCarousel(
initialOffset: 40,
spaceBetweenItems:400 ,
items: styleCards,
),添加**「initialOffset」**表示卡片的初始垂直頂部偏移量，**「spaceBetweenItems」**表示項目之間的垂直間隔。值從第一個項目的頂部開始。選擇一個與您的卡大小相關的值。最後，我們將添加一個表示卡小部件列表的**「項目」**。
創建一個 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.",
),
];我們將創建八種樣式的卡片，並在其中添加圖片，標題和說明。將所有數據添加到 StackedCardCarousel（）上。 當 該 代碼 運行，你會看到卡的列表。當用戶僅以垂直輪播格式向上滑動時，所有卡都將重疊並堆疊到另一個稱爲堆疊卡輪播中；當用戶以垂直格式向下滑動所有向上的卡時，所有卡都將回到原始位置。當我們運行應用程序時，我們應該獲得屏幕的輸出，如屏幕下方的截圖所示。
完整實現
import 'package:flutter/material.dart';
import 'package:flutter_stacked_card_carousel/style_card.dart';
import 'package:stacked_card_carousel/stacked_card_carousel.dart';
class StackedCardDemo extends StatefulWidget {
@override
_StackedCardDemoState createState() => _StackedCardDemoState();
}
class _StackedCardDemoState extends State<StackedCardDemo> {
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.",
),
];
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
automaticallyImplyLeading: false,
title: Text('Stacked Card Carousel Demo'),
),
body: StackedCardCarousel(
initialOffset: 40,
spaceBetweenItems:400 ,
items: styleCards,
),
);
}
}原文地址：https://medium.com/flutterdevs/stacked-card-carousel-in-flutter-9bbb3b89ca81
本文由 Readfog 進行 AMP 轉碼，版權歸原作者所有。
來源：https://mp.weixin.qq.com/s/NSKa3LvAoj2KIblofAPL-g