Flutter出版物卡片展示插件publication_card_g4的使用

插件简介

publication_card_g4 是一个用于在 Flutter 应用中展示出版物卡片的插件。它支持多种配置选项，可以轻松创建美观且功能丰富的卡片界面。

安装

首先，在 pubspec.yaml 文件中添加 publication_card_g4 作为依赖项：

dependencies:
  publication_card_g4: ^版本号

然后运行以下命令以安装依赖：

flutter pub get

iOS 配置

如果需要通过 HTTP URL 访问视频资源，需在应用的 Info.plist 文件中添加适当的 NSAppTransportSecurity 权限。Info.plist 文件位于 <项目根目录>/ios/Runner/Info.plist。具体配置可参考 Apple 官方文档。

Android 配置

确保在 Android 清单文件中添加网络权限：

<uses-permission android:name="android.permission.INTERNET"/>

Web 配置

注意：Web 平台不支持 dart:io，因此避免使用 VideoPlayerController.file 构造函数。否则会抛出 UnimplementedError。

不同浏览器可能对视频播放的支持有所不同（如支持的格式、自动播放等）。更多详细信息请查看 package:video_player_web。

使用示例

以下是一个完整的示例代码，展示了如何使用 publication_card_g4 创建多个出版物卡片。

import 'package:flutter/material.dart';
import 'package:publication_card_g4/config/publication_card.dart';

class Page1 extends StatelessWidget {
  const Page1({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.green,
      body: SafeArea(
        child: Center(
          child: SingleChildScrollView(
            child: Column(
              children: [
                // 第一张卡片
                PublicationCard(
                  name: 'Lionel Messi',
                  imageUserUrl:
                      'https://estaticos-cdn.sport.es/clip/0cfef2b5-ce7d-4c45-b27d-9ca0fabde1d2_alta-libre-aspect-ratio_default_0.jpg',
                  imagePublicationUrl:
                      'https://k-vod.uecdn.es/html5/html5lib/v2.89.0_ue/modules/KalturaSupport/thumbnail.php/p/110/uiconf_id/14969339/entry_id/0_1qcns792/height/407?',
                  description:
                      'Quis dolore nisi magna Lorem Lorem ullamco Lorem nisi proident culpa ipsum duis. Pariatur ea pariatur nulla reprehenderit ea. Laboris irure culpa consectetur et occaecat labore nostrud sint nulla anim nulla officia ut.',
                  onPressedPopMenu: () {
                    print('Andá pa shar');
                  },
                ),
                // 第二张卡片
                PublicationCard(
                  name: 'Cristiano Ronaldo',
                  imageUserUrl:
                      'https://upload.wikimedia.org/wikipedia/commons/8/8c/Cristiano_Ronaldo_2018.jpg',
                  imagePublicationUrl:
                      'https://phantom-marca.unidadeditorial.es/19c28439011a800605d50e13289c0fa4/resize/1320/f/jpg/assets/multimedia/imagenes/2022/12/05/16702399461500.jpg',
                  onPressedPopMenu: () {
                    print('CR7');
                  },
                ),
                // 第三张卡片
                PublicationCard(
                  name: 'Neymar',
                  imageUserUrl:
                      'https://upload.wikimedia.org/wikipedia/commons/thumb/8/83/Bra-Cos_%281%29_%28cropped%29.jpg/640px-Bra-Cos_%281%29_%28cropped%29.jpg',
                  imagePublicationUrl:
                      'https://www.ole.com.ar/images/2022/12/09/mnqHlHD3h_980x690__1.jpg',
                  onPressedPopMenu: () {
                    print('Neymarcito');
                  },
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}

代码说明

1. PublicationCard 是核心组件，用于创建卡片。

   • name: 卡片上显示的名字。
   • imageUserUrl: 用户头像的 URL。
   • imagePublicationUrl: 发布内容的图片 URL。
   • description: 卡片的描述文本。
   • onPressedPopMenu: 点击弹出菜单时触发的回调函数。

2. Scaffold 和 SafeArea 用于构建基本页面结构。

3. SingleChildScrollView 允许用户滚动查看多张卡片。

进阶用法

播放速度设置

可以通过 VideoPlayerController 设置视频的播放速度。例如：

final controller = VideoPlayerController.network(
  'https://example.com/video.mp4',
);

// 设置播放速度为 2 倍速
controller.setPlaybackSpeed(2.0);