flutter简单的本地草稿箱功能

2023-09-14 15:12:59

请添加图片描述

需求1：发帖退出时提示是否保存草稿
需求2：每条草稿中可以保存多张图片(最多9张)或一条视频及三十来个其它参数
需求3：每条草稿都是可以被覆盖的、可以点击删除
需求4：草稿页面可以一键清空
需求5：草稿随app删除一起没掉

看到需求第一时间想到的就是存轻量级SharedPreferences中；
行动：将图片转为base64,然后将base64转json从而实现将图片存入轻量级

/*
  * Asset类型图片转base64(其它类型替换能获取字节的对象)
  * */
  imageToUint8List(List<Asset> imageList) async {
    Completer<List<String>> _completer = Completer<List<String>>();
    List<String> dataList = [];
    if(imageList.length > 0){
      for (int i = 0; i < imageList.length; i++) {
        Asset asset = imageList[i];
        ByteData byteData = await asset.getByteData();
        var imageBase64 = base64.encode(Uint8List.view(byteData.buffer));
        dataList.add(imageBase64);
      }
      _completer.complete(dataList);
    }
    return _completer.future;
  }

结果：行不通。转换加储存极易造成内存泄漏且耗时太多（一张图片都有可能10mb以上而需求更是多图）
方法：
1.在app的file目录下新建一个文件夹保存草稿箱时把图片、视频文件复制进去。
2.把普通的字符串、数字等参数和图片、视频的文件路径封装转成json字符串一起存入轻量级
封装工具

import 'dart:convert';
import 'dart:io';

import 'package:test/common/sp_util.dart';
import 'package:test/generated/l10n.dart';
import 'package:test/jade/bean/DraftsBean.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:path_provider/path_provider.dart';

class DraftsUtil{
  /*
  * 保存草稿箱提示框
  * */
  draftsSaveDialog(context, {Function callback,Function cancelCallback}) async {
    showDialog(
        context: context,
        barrierDismissible: false,
        builder: (BuildContext context) {
          return CupertinoAlertDialog(
            content: SingleChildScrollView(
              child: ListBody(
                children: <Widget>[
                  Padding(
                    child: Text(
                      S.current.tuichu,
                      style: TextStyle(fontSize: 15, color: Color(0xffea2020)),
                    ),
                    padding: EdgeInsets.only(top: 15),
                  ),
                  SizedBox(height: 10),
                  Padding(
                    child: Text(
                      '是否保存编辑到草稿箱？',
                      style: TextStyle(fontSize: 15, color: Color(0xff666666)),
                    ),
                    padding: EdgeInsets.only(bottom: 15),
                  )
                ],
              ),
            ),
            actions: <Widget>[
              CupertinoDialogAction(
                child: Text(
                  S.current.quxiao,
                  style: TextStyle(fontSize: 14, color: Color(0xff999999)),
                ),
                onPressed: () {
                  if(cancelCallback != null){
                    cancelCallback();
                  }
                  Navigator.pop(context, false);
                },
              ),
              CupertinoDialogAction(
                child: Text(
                  '保存并退出',
                  style: TextStyle(fontSize: 14, color: Color(0xff4ec6cc)),
                ),
                onPressed: () {
                  if (callback != null) {
                    callback();
                  }
                  Navigator.pop(context, false);
                },
              )
            ],
          );
        });
  }

  /*
  * 读取草稿列表数据
  * */
  readDraftsList(var userId){
    List<DraftsBean> draftsList = [];
    List<Map<dynamic, dynamic>> getDraftsList = SpUtil.getObjectList('${userId}draftsList');

    if (getDraftsList != null && getDraftsList.length > 0) {
      getDraftsList.forEach((element) {
        draftsList.add(DraftsBean(type: element['type'],paramsData: element['paramsData'],time: element['time']));
      });
    }
    return draftsList;
  }

  /*
  * 删除某一条草稿
  * */
  deleteDrafts(var userId,int index,{List<DraftsBean> draftsList}){
    if(draftsList == null){
      draftsList = [];
      List<Map<dynamic,dynamic>> _getDraftsList = SpUtil.getObjectList('${userId}draftsList');
      if (_getDraftsList != null && _getDraftsList.length > 0) {
        _getDraftsList.forEach((element) {
          draftsList.add(DraftsBean(
              type: element['type'],
              paramsData: element['paramsData'],
              time: element['time']
          ));
        });
      }
    }
    var _paramsData = json.decode(draftsList[index].paramsData);
    List <dynamic> imagePathList = _paramsData['selectImageList'];
    String videoPath = _paramsData['selectVideoPath'];
    if(imagePathList != null && imagePathList.length>0){
      imagePathList.forEach((element) {
        var imageFile = File(element);
        if(imageFile.existsSync()){
          imageFile.deleteSync();
        }
      });
    }
    if(videoPath != null){
      var videoFile = File(videoPath);
      if(videoFile.existsSync()){
        videoFile.deleteSync();
      }
    }
    draftsList.removeAt(index);
    SpUtil.putObjectList('${userId}draftsList',draftsList);
  }

  //清空草稿箱
  clearDrafts(var userId) async {
    Directory libDir = await getExternalStorageDirectory();
    String draftsPath = libDir.path + '/draftsFiles';
    var directory = Directory(draftsPath);
    try{
      bool exists = await directory.exists();
      if(exists){
        directory.deleteSync(recursive: true);
      }
    }catch(e){
      print('删除文件夹出错：${e.toString()}');
    }
    SpUtil.remove('${userId}draftsList');
  }
}

草稿箱参数对象

class DraftsBean {
  int type; //草稿类型： 0普通发帖 1 A型发帖 2 B型发帖
  String paramsData;//保存的发帖参数 json字符串
  String time; //日期

  DraftsBean({this.type, this.paramsData,this.time});

  DraftsBean.fromJson(dynamic json) {
    type = json['type'];
    paramsData = json['paramsData'];
    time = json['time'];
  }

  Map<String, dynamic> toJson() {
    final map = <String, dynamic>{};
    map['type'] = type;
    map['paramsData'] = paramsData;
    map['time'] = time;
    return map;
  }
}

引用

//草稿箱提示框
  _backDrafts(context){
    if(logic.canSaveDrafts()){
      DraftsUtil().draftsSaveDialog(context,
          cancelCallback: (){
            Navigator.of(context).pop();
          },
          callback: () async {
            print('========点击了保存草稿');
            //当前时间
            DateTime nowTime = DateTime.now();
            var _dateFormatStr = DateUtil.formatDate(nowTime, format: DateFormats.y_mo_d);

            state.selectImagePathList.clear();
            state.selectVideoPath = null;
            List<DraftsBean> draftsList = DraftsUtil().readDraftsList(logic.userInfo.user.id);

            if(state.selectImageList.length>0){
              state.selectImagePathList = await Utils().copyFile(state.selectImageList);
            }else if(state.videoPath != null){
              List<String> videoPathList = await Utils().copyFile([File(state.videoPath)]);
              state.selectVideoPath = videoPathList.first;
            }

            if(widget.draftsIndex != null ){
              //从草稿箱进来的，传递了草稿的index，先删除再插入用来覆盖该条
              DraftsUtil().deleteDrafts(logic.userInfo.user.id, widget.draftsIndex,draftsList: draftsList);
              List<DraftsBean> latestDraftsList = DraftsUtil().readDraftsList(logic.userInfo.user.id);
              latestDraftsList.insert(widget.draftsIndex, DraftsBean(
                  type: logic.state.type == 0? 1:2,
                  paramsData: json.encode(logic.paramsData()),
                  time: '$_dateFormatStr',
              ));
              SpUtil.putObjectList('${logic.userInfo.user.id}draftsList',latestDraftsList);
            }else{
              draftsList.insert(0, DraftsBean(
                  type: logic.state.type == 0? 1:2,
                  paramsData: json.encode(logic.paramsData()),
                  time: '$_dateFormatStr',
              ));
              SpUtil.putObjectList('${logic.userInfo.user.id}draftsList',draftsList);
            }
            ATuiEventBusTool.shared().fire(CommonConfig.draftsPageRefresh);
            Navigator.of(context).pop();
          });
    }else{
      Navigator.of(context).pop();
    }
  }

草稿箱列表页面

import 'dart:convert';
import 'dart:io';
import 'package:test/common/sp_util.dart';
import 'package:test/jade/bean/DraftsBean.dart';
import 'package:test/jade/configs/CommonConfig.dart';
import 'package:test/jade/configs/PathConfig.dart';
import 'package:test/jade/customWidget/EmptyWidget.dart';
import 'package:test/jade/homePage/wantHave/WantPost.dart';
import 'package:test/jade/homePage/wantHave/wantHaveLogic/WantHaveLogic.dart';
import 'package:test/jade/homePage/wantHave/wantHaveLogic/WantHavePostBinding.dart';
import 'package:test/jade/mine/drafts/DraftsUtil.dart';
import 'package:test/jade/mine/draftsVideoItemView.dart';
import 'package:test/jade/utils/JadeColors.dart';
import 'package:test/jade/utils/Utils.dart';
import 'package:test/model/user/user_info_model.dart';
import 'package:test/pages/user_share/edit/push_share_edit.dart';
import 'package:test/util/eventbustool.dart';
import 'package:test/util/navigator_util.dart';
import 'package:test/widget/custom_appbar.dart';
import 'package:city_pickers/city_pickers.dart';
import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:flutter_staggered_grid_view/flutter_staggered_grid_view.dart';
import 'package:get/get.dart';
import 'package:provider/provider.dart';

class DraftsPage extends StatefulWidget{
  @override
  State<StatefulWidget> createState() {
    // TODO: implement createState
    return _DraftsPage();
  }
}

class _DraftsPage extends State<DraftsPage>{

  String _userId;
  List<DraftsBean> _draftsList = [];
  var _eventBus;
  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    _userId = Provider.of<UserInfoModel>(context, listen: false).user?.id;
    _draftsList = DraftsUtil().readDraftsList(_userId);
    _eventBus = ATuiEventBusTool.shared().on().listen((event) {
      if(event == CommonConfig.draftsPageRefresh){
        _draftsList = DraftsUtil().readDraftsList(_userId);
        setState(() {});
      }
    });
  }

  @override
  void dispose() {
    // TODO: implement dispose
    if(_eventBus != null){
      _eventBus.cancel();
      _eventBus = null;
    }
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Scaffold(
        backgroundColor: JadeColors.lightGrey,
        appBar: CustomAppBar(
          elevation: 0.5,
          leading: GestureDetector(
            onTap: () {
              Navigator.of(context).pop();
            },
            child: Icon(
              Icons.arrow_back_ios,
              color: Colors.black,
            ),
          ),
          title: Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: [
              Container(),
              Container(
                margin: EdgeInsets.only(right: 34.w),
                child: Text(
                  '草稿箱',
                  style: TextStyle(color: Colors.black,fontSize: 38.sp,fontWeight: FontWeight.w400),
                ),
              ),
              GestureDetector(
                child: Container(
                  color: Colors.transparent,
                  padding: EdgeInsets.only(left: 25.w,top: 6.w,bottom: 6.w),
                  child: Text('清空',style: TextStyle(color: JadeColors.grey_2,fontSize:32.sp),),
                ),
                onTap: () async {
                  var bool = await Utils.commonDialog(context,"是否清空草稿？");
                  if (bool) {
                    DraftsUtil().clearDrafts(_userId);
                    setState(() {
                      _draftsList.clear();
                    });
                  }
                },
              )
            ],
          )
        ),
        body: _draftsList.length>0?_body(): EmptyLayout(description: '没有草稿~',),
    );
  }

  _body(){
    return Column(
      children: [
        Container(
          margin: EdgeInsets.only(left: 20.w,right: 20.w,top: 24.w,bottom: 40.w),
          alignment: Alignment.centerLeft,
          child: Text('草稿在APP卸载后会被删除，请及时发布。',style: TextStyle(color: JadeColors.grey_2,fontSize: 24.sp,),)
        ),
        Expanded(child: Container(
            margin: EdgeInsets.symmetric(horizontal: 20.w,),
            padding: EdgeInsets.only(bottom: 20.w),
            child: MasonryGridView.count(
              crossAxisCount: 2,
              itemBuilder: (BuildContext context, int index){
                var data = _draftsList[index].paramsData;
                var decodeData = json.decode(data);
                return _itemView(index,decodeData);
              },
              mainAxisSpacing: 6.0,
              crossAxisSpacing: 6.0,
              itemCount: _draftsList.length,
              shrinkWrap: true,
            )
        ))
      ],
    );
  }


  _itemView(int index,var paramsData){
    return GestureDetector(
      child: Container(
          decoration: BoxDecoration(
              color: Colors.white,
              borderRadius: BorderRadius.circular(10)
          ),
          child: Column(
            children: [
              if(paramsData['selectImageList'] != null && paramsData['selectImageList'].isNotEmpty)
                ClipRRect(
                  borderRadius: BorderRadius.only(topLeft: Radius.circular(10),topRight: Radius.circular(10)),
                  child: Image.file(
                      File(paramsData['selectImageList'][0]),
                      width: double.infinity,
                      height: index % 2 == 1?500.w : 400.w,
                      fit: BoxFit.cover,
                      frameBuilder: (context, child, frame, wasSynchronouslyLoaded){
                        if(wasSynchronouslyLoaded){
                          return child;
                        }
                        return AnimatedOpacity(
                          child: child,
                          opacity: frame == null ? 0 : 1,
                          duration: const Duration(seconds: 4),
                          curve: Curves.easeOut,
                        );
                      }
                  ),
                ),
              if(paramsData['selectVideoPath'] != null)
                DraftsVideoItemView(mediaUrl: paramsData['selectVideoPath'],currentIndex: index,),
              Container(
                  margin: EdgeInsets.only(left: 10.w,right: 10.w,top: 20.w,bottom: 20.w),
                  alignment: Alignment.centerLeft,
                  child: Text('${paramsData['articleContent']??''}',
                      style: TextStyle(fontSize: 26.sp,fontWeight: FontWeight.w600),maxLines: 2,overflow: TextOverflow.ellipsis)
              ),
              Container(
                  margin: EdgeInsets.only(left: 20.w,right: 20.w,bottom: 20.w),
                  child: Row(
                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                    children: [
                      Text('${_draftsList[index].time}',style: TextStyle(fontSize: 20.sp,color: JadeColors.grey)),
                      GestureDetector(
                        child: Container(
                          width: 32.w,
                          height: 32.w,
                          color: Colors.transparent,
                          padding: EdgeInsets.all(2),
                          child: Image.asset(PathConfig.iconDeleteGrey),
                        ),
                        onTap: () async {
                          var bool = await Utils.commonDialog(context,"是否删除草稿？");
                          if (bool) {
                            DraftsUtil().deleteDrafts(_userId,index,draftsList:_draftsList);
                            setState(() {});
                          }
                        },
                      )
                    ],
                  )
              )
            ],
          )
      ),
      onTap: (){
        switch(_draftsList[index].type){
          case 0:
            NavigatorUtil.push(PushShareEdit(
              draftsJson: _draftsList[index].paramsData,
              draftsIndex: index,
            ));
            break;
          case 1:
            Get.to(() => WantPost(),
                binding: WantHavePostBinding(), arguments: {
                  'type':0,
                  'draftsParamsJson': _draftsList[index].paramsData, //草稿箱json数据
                  'draftsIndex': index //草稿index
                });
            break;
          case 2:
            Get.to(() => WantPost(),
                binding: WantHavePostBinding(), arguments: {
                  'type':1,
                  'draftsParamsJson': _draftsList[index].paramsData, //草稿箱json数据
                  'draftsIndex': index //草稿index
                });
            break;
        }
      },
    );
  }
}
更多推荐

ChatGPT 或其它 AI，能用在文书创作上吗？

新的申请季已经正式开始，一些热门项目的ED截止日期也不再遥远，因此很多准留学生们都已经开始了关于文书的创作。而随着科技的不断发展，以ChatGPT为首的一众AI工具也作为一种辅助手段愈发融入了我们的生活。那么不免就会有一些同学在准备申请时“动起了歪脑筋”，如果选择用ChatGPT来帮自己写文书的话，岂不是又省事又省力还

6.2 Sunday搜索内存特征

Sunday算法是一种字符串搜索算法，由DanielM.Sunday于1990年开发，该算法用于在较长的字符串中查找子字符串的位置。算法通过将要搜索的模式的字符与要搜索的字符串的字符进行比较，从模式的最左侧位置开始。如果发现不匹配，则算法将模式向右滑动一定数量的位置。这个数字是由当前文本中当前模式位置的最右侧字符确定的

Vue模板语法【下】事件处理器，表单、自定义组件、通信组件

目录一、事件处理器1.1常用的事件修饰符1.2常用的按键修饰符二，vue中的表单三、自定义组件四，通信组件一、事件处理器1.1常用的事件修饰符Vue的事件修饰符是用来改变事件的默认行为或者添加额外的功能。以下是一些常用的事件修饰符及其作用：.stop：阻止事件冒泡，相当于调用event.stopPropagation(

IntelliJ IDEA使用——Debug操作

文章目录版本说明图标和快捷键查看变量计算表达式条件断点多线程调试版本说明当前的IntelliJIDEA的版本是2021.2.2（下载IntelliJIDEA）ps：不同版本一些图标和设置位置可能会存在差异，但应该大部分都差不多。图标和快捷键图标快捷键说明Ctrl+F8打断点，在需要的代码行进行断点测试Alt+F10定位

Vue｜项目结构与执行过程介绍

一、项目文件1.1目录结构1.2结构介绍二、执行过程2.1main.js2.2App.vue2.3index.html三、生命周期3.1周期阶段3.2Vue实例的产生过程3.3钩子函数用途一、项目文件1.1目录结构1.2结构介绍文件结构文件介绍node_modules第三方包文件夹public放html文件的地方fav

微信小程序商城怎么弄

微信小程序商城怎么弄？这是一个常见的问题，对于那些想要在微信上创建一个自己的商城的人来说。下面为您介绍一些基本的步骤和注意事项，帮助您轻松地创建一个微信小程序商城。首先，要创建一个微信小程序商城，您需要注册一个微信小程序账号并开通商户号。具体步骤如下：打开微信公众平台，点击右上角的“立即注册”，选择小程序账号，并按照提

【lesson8】gdb的介绍及使用

文章目录gdb的介绍什么是gdb？背景认识gdb的使用gcc/g++程序文件名-o将来生成的可执行程序名-ggdb调试命令gdb可执行程序名quitlistl0Enterr（run）b（breakpoint）+n（行号）infobd（delete）+断点编号n（next）p（printf）+变量名s（step）btfi

Python中的文件I/O操作：常见问题与解决方案

目录常见问题代码示例文件路径问题：文件权限问题：文件编码问题：文件读写模式问题：文件未关闭问题：大文件处理问题：文件读写过程中的异常处理问题：文件内容格式问题：跨平台换行符问题：二进制文件处理问题：总结在Python编程中，文件I/O操作是常见的任务之一。无论是读取文件内容、写入新数据还是追加信息，文件I/O操作都是不

客观题：Android基础【基础题】

一.单选题（共6题，60分）1.(单选题,10分)Android四层架构中，应用框架层使用的是什么语法？A.JavaB.AndroidC.CD.C++正确答案:AAndroid四层架构通常指的是Android应用的四个关键组件，包括：应用层（ApplicationLayer）：这是最顶层的层次，包括用户界面（UI）和应

GaussDB技术解读系列：数据库迁移创新实践

近日，以“数智赋能共筑未来”为主题的第14届中国数据库技术大会（DTCC2023）在北京举行，在GaussDB“五高两易”核心技术，给世界一个更优选择的专场，华为云数据库生态工具研发总监窦德明分享了GaussDB数据库的迁移创新实践。本篇将分享GaussDB数据库迁移的创新实践。易迁移能力是企业数据库替换选型的关键考量

华硕电脑怎么录屏？分享实用录制经验！

“华硕电脑怎么录屏呀，刚买的笔记本电脑，是华硕的，自我感觉挺好用的，但是不知道怎么录屏，最近刚好要录一个教程，怎么都找不到在哪里录制，有人能教教我吗？”随着电脑技术的不断发展，人们越来越依赖电脑进行工作和娱乐。录屏功能作为电脑的一项重要功能，已经逐渐成为人们日常生活中的必备工具。华硕作为知名的电脑品牌，为用户提供了便捷

热文推荐
  1. 探索人工智能 | 模型训练 使用算法和数据对机器学习模型进行参数调整和优化

    前言模型训练是指使用算法和数据对机器学习模型进行参数调整和优化的过程。模型训练一般包含以下步骤：数据收集、数据预处理、模型选择、模型训练、模型评估、超参数调优、模型部署、持续优化。文章目录前言数据收集数据预处理模型选择模型训练模型评估超参数调优模型部署持续优化总结数据收集数据收集是指为机器学习或数据分析任务收集和获取用

  2. OpenMMLab AI 实战营笔记4——MMPreTrain算法库：构建高效、灵活、可扩展的深度学习模型

    文章目录摘要一、工具箱介绍二、丰富的模型三、推理API四、环境搭建——OpenMMLab软件栈五、OpenMMLab重要概念——配置文件六、代码框架七、配置及运作方式经典主干网络残差网络VisonTransformer(VIT)注意力机制自监督学习常见类型SimCLRMAE自监督学习多模态CLIPBLIPOthers总

  3. 【ELFK】之zookeeper

    本章主要内容：1、zookeeper简介2、zookeeper工作机制3、zookeeper数据结构4、应用场景5、选举机制6、非第一次启动选举机制7、zookeeper部署实验一、zookeeper简介zookeeper是一个开源的分布式的，为分布式框架提供协调服务的Apache项目。管理节点服务器，完成对节点的调用

  4. LVS+Keepalived群集

    1、keepalived概述及其功能·故障自动切换failover·实现lvs群集中节点健康检查·节点服务器的高可用性keepalived软件就是通过vrrp协议来实现高可用功能Keepalived是一个基于VRRP协议来实现的LVS服务高可用方案，可以解决静态路由出现的单点故障问题。在一个LVS服务集群中通常有主服务

  5. YOLOv5算法改进（20）— 引入 RepVGG 重参数化模块

    前言：Hello大家好，我是小哥谈。RepVGG重参数化模块是一种用于深度卷积神经网络的模块化设计方法，旨在通过将卷积层和全连接层统一为卷积层来简化网络结构并提高计算效率。该方法通过重参数化，将常规的卷积层分解为一个轻量级的卷积层和一个恒等映射层，从而达到降低计算复杂度的目的。本节课就简单介绍一下如何在YOLOv5中引

  6. 最新ChatGPT网站源码+支持GPT4.0+支持Midjourney绘画+支持国内全AI模型

    一、智能创作系统SparkAi创作系统是基于国外很火的ChatGPT进行开发的Ai智能问答系统。本期针对源码系统整体测试下来非常完美，可以说SparkAi是目前国内一款的ChatGPT对接OpenAI软件系统。那么如何搭建部署AI创作ChatGPT？小编这里写一个详细图文教程吧！SparkAi程序使用Nestjs和Vu

  7. 【uni-app】uni-app内置组件和扩展组件

    内置组件和扩展组件的关系先引用uni-app官网原文：uni-app是有内置组件的。这和web开发不一样。web开发基本上不用基础组件，都是找一个三方ui库，全套组件都包含。那是因为html的基础组件默认样式不适配手机风格。但uni-app体系不是这样，内置组件就是为手机优化的。但内置组件只能满足基础需求，更多场景，需

  8. 想要精通算法和SQL的成长之路 - 最长回文子序列

    想要精通算法和SQL的成长之路-最长回文子序列前言一.最长回文子序列前言想要精通算法和SQL的成长之路-系列导航一.最长回文子序列原题链接首先，我们看下动态规划方程的定义，我们用dp[i][j]来代表：字符串s在下标区间为[i,j]之间的最长回文子序列。那么请问，最终的返回结果，就是我们要求得字符串s的最长回文子序列，

  9. Day66｜图part5：130. 被围绕的区域、827.最大人工岛

    130.被围绕的区域leetcode链接：题目链接这题看起来很复杂，其实跟之前找飞地和找边缘地区的是差不多的，主要分三步：使用dfs将边缘的岛都找出来，然后用A代替防止混淆；再用dfs找中间不与任何岛相连的飞地；最后把之前的A替换成O。最终代码：classSolution{public:voiddfs(vector<v