一洼绿地

Flutter resize widget

·4 min read

再论编辑工具栏

这次重写了工具栏,非常的完美,不会乱跳,乱跳看起来简单,处理起来繁琐

除了苹果和 KenNote ^_^ 我没看到其他的文档编辑器解决了这个问题的。

https://play.google.com/store/apps/details?id=xyz.onote.gg.ml.app

核心问题

核心的我觉得有三个

  1. 基本状态是是什么 写着写着,有时脑子就会乱,现在状态到哪里了,要确认操作上状态基础是什么, 基础状态就是编辑栏,要跟随键盘,每个动作都要考虑到回位的情况, 我设置了基础状态为 -1 ,如果是 -1, 编辑条就会跟随键盘行动。 每次点击,键盘滑动,都要考虑状态到哪里了,如果键盘滑入,那么可能需要 延时设置为 -1

  2. 用什么来做状态管理 (好奇怪要点) 我最开始用 BloC ,后来用 Widget Status ,其实我用 Get 很久了,但是我 迷信自带的,或简洁的。但因为结构上比较乱,写着写着就思路乱了。 最后,我用回了 Get 做状态管理,用 Rx 来管理状态,思路就变得清晰多了。 代码变得干净。

  3. 键盘不动,只滑动编辑栏怎么滑 这里的问题是,编辑栏有两种滑动方式,跟随键盘,或独立滑动, 最开始我做独立滑动时,用了动画,后来发现特别的别扭,那么跟随键盘时,需要 变更动画 widget 的延迟为 0 ,经常出现乱跳,后来的处理是用一个递归的滑动器 来处理,滑动器和键盘弹起是等价的,他们都是负责改变编辑条下部分的高度。不会出现 状态叠加,可以加入 sin 函数来,来增加动画效果,例子是匀速的,

    void menuOptionsSlidePeriodic(Rx<double> rx, double tv, {int? millisecond, int? direction}) {
     if (rx.value==tv) {
       return;
     }
     millisecond ??= DateTime.now().millisecondsSinceEpoch;
     direction ??= rx.value>tv ? -1 : 1;
     WidgetsBinding.instance.addPostFrameCallback((t){
       if (rx.value!=tv) {
         final int ms = DateTime.now().millisecondsSinceEpoch; // 当前时间
         final int mm = ms - millisecond!; // 过了多长时间
         final double y = mm * menuOptionsSlideStep * direction!;  // 计算移动了多少距离
         final double rxv = rx.value + y; // 预计到达
         if (direction>0) {
           if (rxv>=tv + 5) {
             rx.value = tv - 1;
           }
           else {
             rx.value += y;
             rx.refresh;
             menuOptionsSlidePeriodic(rx, tv, millisecond:ms, direction:direction);
           }
         }
         else if (direction<0) {
           if (rxv<tv - 5) {
             rx.value = tv;
           }
           else {
             rx.value += y;
             rx.refresh;
             menuOptionsSlidePeriodic(rx, tv, millisecond:ms, direction:direction);
           }
         }
       }
     });
    

}