在本博客中,我们将探讨Flutter中的堆叠式卡轮播。 我们还将实现一个演示程序,并学习在您的flutter应用程序中使用stacked_card_carousel包创建一个带有垂直轮播的堆叠卡。
用于创建带有堆叠卡片的垂直轮播的小部件。 下面的演示视频显示了如何在Flutter中创建带有垂直旋转木马的堆叠卡。 它显示了在您的flutter应用程序中如何使用stacked_card_carousel软件包来使用堆叠式卡轮播。 它显示了垂直圆盘传送带滑动卡的列表,所有卡向上滑动并堆叠,称为堆叠式卡传送带。 它会显示在您的设备上。
属性:
堆叠式卡轮播的一些属性是:
- 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。 程序运行后,我们将看到一个卡片列表, 当用户向上滑动时,所有卡片都将堆叠在一起; 当用户向下滑动时,卡片都将回到原始位置;
效果如下:
Demo地址:https://github.com/flutter-devs/flutter_stacked_card_carousel_demo