【Flutter】堆叠式卡轮播

2021/05/27 08:00
阅读数 50

作为移动应用程序开发人员,我们有时需要制作滑动的,动画的背景图像轮播。但是,有时候,我们需要制作一张滑动卡片传送带,其中包含一些具有各种背景颜色,图像或渐变的信息。

在在本博客中,我们将探讨「Flutter中」 的**堆叠式卡轮播。**我们还将实现一个演示程序,并学习在您的flutter应用程序中使用「stacked_card_carousel」包创建一个带有垂直轮播的堆叠卡。

pub地址:https://pub.dev/packages/stacked_card_carousel

用于创建带有堆叠卡片的垂直轮播的小部件。下面的演示视频显示了如何在Flutter中创建带有垂直旋转木马的堆叠卡。它显示了在您的flutter应用程序中如何使用「stacked_card_carousel」软件包来使用堆叠式卡轮播。它显示了垂直圆盘传送带滑动卡的列表,所有卡向上滑动并堆叠,称为堆叠式卡传送带。它会显示在您的设备上。

堆叠式卡轮播的一些属性:

  • **items:**这些属性表示卡小部件的列表。
  • **initialOffset:**这些属性表示卡的初始垂直顶部偏移。
  • **spaceBetweenItems:**这些属性表示项目之间的垂直空间。值从第一个项目的顶部开始。
  • **applyTextScaleFactor:**这些属性表示如果设置为true,则根据文本比例因子线性扩展空间和位置。缩小比例被省略。

使用

  1. 添加依赖

    stacked_card_carousel: ^0.0.2+1
  2. 引入

    import 'package:stacked_card_carousel/stacked_card_carousel.dart';
  3. 运行命令:「flutter packages get」

  4. 启用「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


你可能还喜欢

关注「老孟Flutter」
让你每天进步一点点

本文分享自微信公众号 - 老孟Flutter(lao_meng_qd)。
如有侵权,请联系 support@oschina.cn 删除。
本文参与“OSC源创计划”,欢迎正在阅读的你也加入,一起分享。

展开阅读全文
加载中
点击引领话题📣 发布并加入讨论🔥
0 评论
0 收藏
0
分享
返回顶部
顶部