Flutter vCard生成与管理插件flutter_vcard的使用

一个垂直滑动的卡片堆叠控件

使用方法

要使用此插件，在你的 pubspec.yaml 文件中添加 flutter_vcard 作为依赖项。

示例

// 导入包
import 'package:flutter_vcard/flutter_vcard.dart';
import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  // 这个小部件是你的应用的根组件。
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'VCard Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'VCard Demo'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key? key, required this.title}) : super(key: key);
  final String title;

  [@override](/user/override)
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  late VCardController _controller;

  [@override](/user/override)
  void initState() {
    super.initState();
    _controller = VCardController();
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
        leading: IconButton(
          onPressed: () {
            _controller.previous();
          },
          icon: Icon(
            Icons.skip_previous,
            color: Colors.white,
          ),
        ),
        actions: [
          IconButton(
            onPressed: () {
              _controller.next();
            },
            icon: Icon(
              Icons.skip_next,
              color: Colors.white,
            ),
          )
        ],
      ),
      body: Center(
        child: Demo1(
          controller: _controller,
        ),
      ),
    );
  }
}

/// 示例1
class Demo1 extends StatefulWidget {
  final VCardController? controller;
  Demo1({Key? key, this.controller}) : super(key: key);

  [@override](/user/override)
  State<Demo1> createState() => _Demo1State();
}

class _Demo1State extends State<Demo1> {
  List colorList = List.from(colors);

  // 加载更多数据
  _addNewData() {
    for (var i = 0; i < 10; i++) {
      Color c = Color.fromRGBO(Random().nextInt(255), Random().nextInt(255),
          Random().nextInt(255), 1);
      colorList.add(c);
    }
    setState(() {});
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    final width = MediaQuery.of(context).size.width - 50;
    final height = min(MediaQuery.of(context).size.height, width * 1.8);
    return VCardView(
      size: Size(width, height),
      controller: widget.controller,
      itemCount: colorList.length,
      itemBuild: (context, index) {
        return Card(
          clipBehavior: Clip.hardEdge,
          elevation: 3,
          shadowColor: Colors.black26,
          shape: RoundedRectangleBorder(
            borderRadius: BorderRadius.circular(8),
          ),
          child: Container(
            color: colorList[index],
            child: Center(
              child: Text(
                '${index + 1}',
                style: TextStyle(color: Colors.white, fontSize: 50),
              ),
            ),
          ),
        );
      },
      endCallback: () {
        print('---->end');
      },
      indexChangeCallback: (index) {
        print('changed--->${index}');
        // 加载更多数据
        if (index > colorList.length - 3) {
          print('加载更多数据...');
          _addNewData();
        }
      },
      nextCallback: (index) {
        print('next--->${index}');
      },
      previousCallback: (index) {
        print('previous--->${index}');
      },
    );
  }
}

/// 示例
class Demo extends StatelessWidget {
  final VCardController? controller;

  const Demo({Key? key, this.controller}) : super(key: key);

  [@override](/user/override)
  Widget build(BuildContext context) {
    final width = MediaQuery.of(context).size.width - 64;
    final height = min(MediaQuery.of(context).size.height, width * 1.8);

    return Container(
      child: VCardView(
        size: Size(width, height),
        controller: controller,
        itemCount: colors.length,
        itemBuild: (context, index) {
          return Card(
            clipBehavior: Clip.hardEdge,
            elevation: 3,
            shadowColor: Colors.black26,
            shape: RoundedRectangleBorder(
              borderRadius: BorderRadius.circular(8),
            ),
            child: Container(color: colors[index]),
          );
        },
        endCallback: () {
          print('---->end');
        },
        indexChangeCallback: (index) {
          print('changed--->${index}');
        },
        nextCallback: (index) {
          print('next--->${index}');
        },
        previousCallback: (index) {
          print('previous--->${index}');
        },
      ),
    );
  }
}