[Flutter] 滑動卡組件

在在本博客中，我們將探討「Flutter中」 的**滑動卡。**我們還將實現(xiàn)一個演示程序，并學習在flutter應用程序中使用「slide_card」包創(chuàng)建具有滑動動畫效果的滑動卡。

pub地址：https://pub.dev/packages/sliding_card

滑動卡

滑動卡是一種深度可調的Flutter包，可幫助您制作具有滑動動畫效果的令人愉悅的卡。用戶可以輕松地將任何內容添加到卡中以使用Flutter應用程序。

該演示視頻展示了如何在Flutter中創(chuàng)建滑動卡。它顯示了如何在flutter應用程序中使用「slide_card」軟件包來使用滑動卡。它顯示了一張紙牌的彈跳動畫，該動畫分成兩個打開的不同紙牌。它會顯示在您的設備上。

滑動卡的一些屬性：

• **slideAnimationReverseCurve：**此屬性用于滑動動畫的曲線。最好將其保留為默認值。

• **hiddenCardHeight：**此屬性用于使隱藏卡的高度小于或等于frontCard小部件的90％。

• 「frontCardWidget」：此屬性用于在正面顯示的小部件。

• **backCardWidget：**此屬性用于要在背面顯示的小部件。其高度應小于或等于正面卡的高度。

• **animateOpacity：**此屬性用于提供良好的視覺效果。將此保留為真實，以獲得更現(xiàn)實的效果。

• **slideAnimationForwardCurve：**此屬性用于擴展時滑動動畫的曲線。最好將其保留為默認值

使用

1. 添加依賴

   sliding_card: ^0.1.2
   

2. 引入

   import 'package:sliding_card/sliding_card.dart';
   

3. 運行命令：「flutter packages get」

4. 啟用「AndriodX」

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

在libs目錄下創(chuàng)建 「home_page.dart」 文件

首先，我們將創(chuàng)建一個SlidingCardController并指定任何名稱。我們將創(chuàng)建一個「initState（）「方法。在此方法中，我們將添加一個超級點initstate（），并且該控制器等于」SlidingCardController（）」。SlidingCardController（）類 用于控制卡的打開和關閉。

SlidingCardController controller ;
@override
void initState() {
  super.initState();
  controller = SlidingCardController();
}

添加一個中心小部件。在小部件內，我們將添加列小部件并添加「InterviewCard（）「類。在此類中，我們將添加」onTapped」函數(shù)；如果控制器的isCardSeparated為true，則折疊卡片，否則展開卡片。在下面，我們將深入定義**InterviewCard（）**類。

Center(
  child: Column(
    mainAxisAlignment: MainAxisAlignment.center,
    children: <Widget>[
      InterviewCard(
        onTapped: () {
          if(controller.isCardSeparated == true)
          {
            controller.collapseCard();
          }
          else
          {
            controller.expandCard();
          }
        },
        slidingCardController: controller,
      )
    ],
  ),
),

在lib內創(chuàng)建一個名為 「inteview_card.dart」的新文件。

創(chuàng)建兩個構造函數(shù)，即slideCardController和onTapped函數(shù)。

const InterviewCard({
  Key key,
  this.slidingCardController , @required this.onTapped
}) : super(key: key);

final  SlidingCardController slidingCardController;
final Function onTapped;

現(xiàn)在，我們將返回一個「GestureDetector（）。「在內部，我們將添加一個OnTap函數(shù)和child屬性。這是Child的屬性，我們將添加」SlidingCard（）。「在SlidingCard內，我們將添加」slimeCardElevation」，bounceInOut曲線是「slideAnimationReverseCurve」，「cardsGap」是兩張卡之間的空間，「controller」，「slideCardCardWidth」是整個卡的寬度，「visibleCardHeight」是前卡的高度，「hiddenCardHeight」是后卡的高度，不能大于正面卡的高度。「frontCardWidget」和「backCardWidget」 我們將在下面描述。

return GestureDetector(
  onTap: (){
    widget.onTapped();
  },
      child: SlidingCard(
    slimeCardElevation: 0.5,
    slidingAnimationReverseCurve: Curves.bounceInOut,
    cardsGap: DeviceSize.safeBlockVertical,
    controller: widget.slidingCardController,
    slidingCardWidth: DeviceSize.horizontalBloc * 90,
    visibleCardHeight: DeviceSize.safeBlockVertical * 27,
    hiddenCardHeight: DeviceSize.safeBlockVertical * 15,
    frontCardWidget: InterviewFrontCard(...),
    backCardWidget:  InterviewBackCard(...),
);

在**frontCardWidget中，**我們將創(chuàng)建一個InterviewFrontCard（）類。我們將在此卡上添加標題，圖像，名稱，姓氏，兩個按鈕和一個信息圖標。當用戶點擊圖標時，卡片被展開，再次點擊然后折疊卡片。

InterviewFrontCard(
  candidateName: '@Astin',
  candidateSurname: 'Martin',
  interviewDate: '9 March 2021 ',
  interviewTime: '2:30Pm',
  onInfoTapped: () {
    print('info pressed');
    widget.slidingCardController.expandCard();
  },
  onDecline: () {
    print('Declined');
  },
  onAccept: () {
    print('Accepted');
  },
  onCloseButtonTapped: (){
    widget.slidingCardController.collapseCard();
  },
),

在**backCardWidget中，**我們將創(chuàng)建一個InterviewBackCard（）類。在此卡片中，我們將添加標題，內容和電話圖標。當用戶點擊信息圖標時，將顯示后卡，否則將不顯示。

InterviewBackCard(
  onPhoneTapped: (){},
  companyInfo: "FlutterDevs specializes in creating cost-effective and efficient "
      "applications with our perfectly crafted."
),

完整代碼

import 'package:flutter/material.dart';
import 'package:sliding_card/sliding_card.dart';
import 'interview_back_card.dart';
import 'interview_front_card.dart';
import 'device_size.dart';

class InterviewCard extends StatefulWidget {
  const InterviewCard({
    Key key,
    this.slidingCardController , @required this.onTapped
  }) : super(key: key);
 
  final  SlidingCardController slidingCardController;
  final Function onTapped;

  @override
  _InterviewCardState createState() => _InterviewCardState();
}

class _InterviewCardState extends State<InterviewCard> {
  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: (){
        widget.onTapped();
      },
          child: SlidingCard(
        slimeCardElevation: 0.5,
        slidingAnimationReverseCurve: Curves.bounceInOut,
        cardsGap: DeviceSize.safeBlockVertical,
        controller: widget.slidingCardController,
        slidingCardWidth: DeviceSize.horizontalBloc * 90,
        visibleCardHeight: DeviceSize.safeBlockVertical * 27,
        hiddenCardHeight: DeviceSize.safeBlockVertical * 15,
        frontCardWidget: InterviewFrontCard(
          candidateName: '@Astin',
          candidateSurname: 'Martin',
          interviewDate: '9 March 2021 ',
          interviewTime: '2:30Pm',
          onInfoTapped: () {
            print('info pressed');
            widget.slidingCardController.expandCard();
          },
          onDecline: () {
            print('Declined');
          },
          onAccept: () {
            print('Accepted');
          },
          onCloseButtonTapped: (){
            widget.slidingCardController.collapseCard();
          },
        ),
        backCardWidget:InterviewBackCard(
          onPhoneTapped: (){},
          companyInfo: "FlutterDevs specializes in creating cost-effective and efficient "
              "applications with our perfectly crafted."
        ),
      ),
    );
  }
}

原文地址：https://medium.com/flutterdevs/explore-sliding-card-in-flutter-39007e595cef