Flutter实现堆叠式卡轮播效果

在本博客中,我们将探讨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

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 203,362评论 5 477
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,330评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,247评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,560评论 1 273
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,580评论 5 365
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,569评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,929评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,587评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,840评论 1 297
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,596评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,678评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,366评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,945评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,929评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,165评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 43,271评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,403评论 2 342

推荐阅读更多精彩内容