阅读 3375

Flutter开发日记-如何实现一个照片选择器plugin

背景

im 中台的聊天室需要一个类似微信的相册选择器的功能,因此我们打算实现一个相册 plugin

我们使用 photo_manager ,获取相册和资源信息。

在 photo_manager 源代码基础上进行了业务层的封装。

flutter plugin 是什么

如下官网所述,简单来说分为两种

dart package : 纯 dart 实现,在 flutter 工程中使用

plugin package: dart 实现,但是需要和原生平台通信(MethodChannel) 我们的相册选择器是后者,但 photo_manager 帮我们做了原生的实现这一部分

实现 plugin 入门

Flutter 官方

Writing a good Flutter plugin

功能

抹平 ios 和安卓端调用差异。eg.请求相册权限

展示相片 list

切换相册

预览照片

跨相册选择图片

发送照片

接入指北 🐶

项目中提供了 example 的使用示例,接入时可使用同样方式,我们来康康

first step 初始化一个 flutter 工程

目录结构

second step

在 pubspec.yaml 引用相册选择器 plugin

third step

在 lib/main.dart (或者你需要的入口) new 一下我们的 indexPage 对象,即可打开相册选择器

import 'package:photo_manager/page/index.dart';
......
......
 _scanGalleryList() async {
    // await provider.refreshGalleryList();
    Navigator.of(context).push(MaterialPageRoute(builder: (BuildContext context) {
    // 控制器
      SelectedPhotosController contreoller = SelectedPhotosController()
      // 在需要的时候实例化
      return IndexPage(controller);
    }));
  }
复制代码

done!

plugin 实现

plugin 结构图

项目代码结构

我拉了 photo_manager 的代码下来改(其他同学不需要可以直接新建一个 plugin 工程引用线上 photo_manager 包),只修改了 lib,这里只展示 lib 的结构。(未标注部分为源码原有)

1 做为一个 plugin 考虑不用 provider 做数据管理,因此我改掉了 photo_manager 的 provider_util.dart 文件,如下图所示, 使用一个 controller 对象,负责操作数据对象,有 get 和 set 方法,可以操作 photoutil(所有相册实体),pathutil(当前相册的所有资源实体)对象,并在 set 方法中定义时使用 setstate,达到视图更新的目的

数据 photoutil(所有相册实体),pathutil(当前相册的所有资源实体)对象,存储在页面(index.dart)中.

eg.通过 controller 切换当前相册

//gallery_list_page.dart

// index.dart

2 相册操作使用 flutter package ,photo_manager,photomanager.dart 是这个包所有方法的出口,有兴趣的同学可以康康 photo_manager 是如何实现的

import 'dart:async';
import 'dart:io';
import 'dart:typed_data';
import 'dart:ui';
import 'package:flutter/foundation.dart';
import 'package:flutter/rendering.dart';
import 'package:flutter/services.dart';
import 'package:photo_manager/src/utils/convert_utils.dart';
import 'src/plugin.dart';
export 'src/plugin.dart';
part './src/manager.dart';
part './src/type.dart';
part './src/entity.dart';
part './src/notify.dart';
part './src/editor.dart';

复制代码

后续改造--TODO

1 考虑使用 InheritedWidget 做数据状态的管理,本文将 controller 放在最上层的缺点显而易见,就是不能局部刷新,并且子组件不能监听到数据的变化。

2 本项目的代码结构不够规范,有待优化,数据操作比较混乱,不易读,第一次尝试实现 plugin,结构上比较糙。

总结

1 经过实践 此插件没有 androidX 的兼容问题

2 感谢实现过程中大家的建议!

3 欢迎大嘎的 批评 意见 留言~~~~!🐶

原文链接

文章分类
前端
文章标签