前言

点赞这个动作不得不说在社交、短视频等App中实在是太常见了，当用户手指按下去的那一刻，给用户一个好的反馈效果也是非常重要的，这样用户点起赞来才会有一种强烈的我点了赞的效果，那么今天我们就用Flutter实现一个掘金App上的点赞效果。

• 首先我们看下掘金App的点赞组成部分，有一个小手，点赞数字、点赞气泡效果，还有一个震动反馈，接下来我们一步一步实现。

知识点：绘制、动画、震动反馈

1、绘制小手

这里我们使用Flutter的Icon图标中的点赞小手，Icons图标库为我们提供了很多App常见的小图标，如果使用苹果苹果风格的小图标可以使用cupertino_icons: ^1.0.2插件，图标并不是图片，本质上和emoji图标一样，可以添加到文本中使用，所以图标才可以设置不同的颜色属性，对比使用png格式图标可以节省不少的内存。

接下来我们就将这两个图标绘制出来，首先我们从上图可以看到真正的图标数据其实是IconData类，里面有一个codePoint属性可以获取到Unicode统一码，通过String.fromCharCode(int charCode)可以返回一个代码单元，在Text文本中支持显示。

class IconData{

/// The Unicode code point at which this icon is stored in the icon font.

/// 获取此图标的Unicode代码点

final int codePoint;

}



class String{

/// 如果[charCode]可以用一个UTF-16编码单元表示，则新的字符串包含一个代码单元

external factory String.fromCharCode(int charCode);

}

接下来我们就可以把图标以绘制文本的形式绘制出来了

关键代码：

  // 赞图标

  final icon = Icons.thumb_up_alt_outlined;

// 通过TextPainter可以获取图标的尺寸

  TextPainter textPainter = TextPainter(

      text: TextSpan(

          text: String.fromCharCode(icon.codePoint),

          style: TextStyle(

              fontSize: 30,

              fontFamily: icon.fontFamily,// 字体形象家族，这个字段一定要设置，不然显示不出来

              color: Colors.black)),

      textAlign: TextAlign.center,

      textDirection: TextDirection.ltr);

  textPainter.layout(); // 进行布局

  Size size2 = textPainter.size; // 尺寸必须在布局后获取

  //将图标偏移到画布中央

  textPainter.paint(canvas, Offset(-size2.width / 2, -size2.height / 2));

通过上方代码我们就实现了将图标绘制到画板当中



接下来继续绘制点赞数量，

代码：

TextPainter textPainter2 = TextPainter(

    text: TextSpan(

        text: "点赞",// 点赞数量

        style: TextStyle(

            fontSize: 9, fontWeight: FontWeight.w500, color: Colors.black)),

    textAlign: TextAlign.center,

    textDirection: TextDirection.ltr);

textPainter2.layout(); // 进行布局

// 向右上进行偏移在小手上面

textPainter2.paint(canvas, Offset(size.width / 9, -size.height / 2 + 5));

然后图标就变成了这样样子，



我们看到，掘金App点赞的过程中，周围还有一些小气泡的效果，这里提供一个思路，将这些气泡的坐标点放到一个圆的外环上面，通过动画改变圆的半径达到小圆点由内向外发散，发散的同时改变小圆点的大小，从而达到气泡的效果，
关键代码：

var r = size.width / 2 - 15; // 半径

var d = 4; // 偏移量 气泡的移动距离



// 绘制小圆点 一共4个 掘金也是4个 角度可以自由发挥 这里根据掘金App的发散角度定义的

canvas.drawPoints(

    ui.PointMode.points,

    [

      Offset((r + d * animation2.value) * cos(pi - pi / 18 * 2),

          (r + d * animation2.value) * sin(pi - pi / 18 * 2)),

      Offset((r + d * animation2.value) * cos(pi + pi / 18 * 2),

          (r + d * animation2.value) * sin(pi + pi / 18 * 2)),

      Offset((r + d * animation2.value) * cos(pi * 1.5 - pi / 18),

          (r + d * animation2.value) * sin(pi * 1.5 - pi / 18)),

      Offset((r + d * animation2.value) * cos(pi * 1.5 + pi / 18 * 5),

          (r + d * animation2.value) * sin(pi * 1.5 + pi / 18 * 5)),

    ],

    

    _paint

      ..strokeWidth = 5

      ..color = Colors.blue

      ..strokeCap = StrokeCap.round);

得到现在的图形，
发散前



发散后



接下来继续我们来添加交互效果，添加动画，如果有看上一篇吃豆人，相信这里就很so easy了，首先创建两个动画类，控制小手和气泡，再创建两个变量，是否点赞和点赞数量，代码：

late Animation<double> animation; // 赞

late Animation<double> animation2; // 小圆点

ValueNotifier<bool> isZan = ValueNotifier(false); // 记录点赞状态 默认没点赞

ValueNotifier<int> zanNum = ValueNotifier(0); // 记录点赞数量 默认0点赞

这里我们需要使用动画曲线CurvedAnimation这个类，这个类可以实现不同的0-1的运动曲线，根据掘金的点赞效果，比较符合这个曲线规则，快速放大，然后回归正常大小，这个类帮我们实现了很多好玩的运动曲线，有兴趣的小伙伴可以尝试下其他运动曲线。

小手运动曲线：



气泡运动曲线：



有了运动曲线之后，接下来我们只需将属性赋值给小手手和小圆点就好了，

完整源码： 封装一下，对外暴露大小，就是一个点赞组件了。

class ZanDemo extends StatefulWidget {

  const ZanDemo({Key? key}) : super(key: key);



  @override

  _ZanDemoState createState() => _ZanDemoState();

}



class _ZanDemoState extends State<ZanDemo> with TickerProviderStateMixin {

  late Animation<double> animation; // 赞

  late Animation<double> animation2; // 小圆点

  ValueNotifier<bool> isZan = ValueNotifier(false); // 记录点赞状态 默认没点赞

  ValueNotifier<int> zanNum = ValueNotifier(0); // 记录点赞数量 默认0点赞



  late AnimationController _controller; // 控制器

  late AnimationController _controller2; // 小圆点控制器

  late CurvedAnimation cure; // 动画运行的速度轨迹 速度的变化

  late CurvedAnimation cure2; // 动画运行的速度轨迹 速度的变化



  int time = 0;// 防止快速点两次赞导致取消赞



  @override

  void initState() {

    super.initState();

    _controller = AnimationController(

        vsync: this, duration: const Duration(milliseconds: 500)); //500ms

    _controller2 = AnimationController(

        vsync: this, duration: const Duration(milliseconds: 800)); //500ms



    cure = CurvedAnimation(parent: _controller, curve: Curves.easeInOutBack);

    cure2 = CurvedAnimation(parent: _controller2, curve: Curves.easeOutQuint);

    animation = Tween(begin: 0.0, end: 1.0).animate(cure);

    animation2 = Tween(begin: 0.0, end: 1.0).animate(_controller2);

  }



  @override

  Widget build(BuildContext context) {

    return InkWell(

      child: Center(

        child: CustomPaint(

          size: Size(50, 50),

          painter: _ZanPainter(animation, animation2, isZan, zanNum,

              Listenable.merge([animation, animation2, isZan, zanNum])),

        ),

      ),

      onTap: () {

        if (!isZan.value && !_isDoubleClick()) {

          _controller.forward(from: 0);

          // 延迟300ms弹窗气泡

          Timer(Duration(milliseconds: 300), () {

            isZan.value = true;

            _controller2.forward(from: 0);

          });

          Vibrate.feedback(FeedbackType.success);

          zanNum.value++;

        } else if (isZan.value) {

          Vibrate.feedback(FeedbackType.success);

          isZan.value = false;

          zanNum.value--;

        }

      },

    );

  }



  bool _isDoubleClick() {

    if (time == 0) {

      time = DateTime.now().microsecondsSinceEpoch;

      return false;

    } else {

      if (DateTime.now().microsecondsSinceEpoch - time < 800 * 1000) {

        return true;

      } else {

        time = DateTime.now().microsecondsSinceEpoch;

        return false;

      }

    }

  }

}



class _ZanPainter extends CustomPainter {

  Animation<double> animation;

  Animation<double> animation2;

  ValueNotifier<bool> isZan;

  ValueNotifier<int> zanNum;

  Listenable listenable;



  _ZanPainter(

      this.animation, this.animation2, this.isZan, this.zanNum, this.listenable)

      : super(repaint: listenable);



  Paint _paint = Paint()..color = Colors.blue;

  List<Offset> points = [];



  @override

  void paint(Canvas canvas, Size size) {

    canvas.clipRect(Offset.zero & size);

    canvas.translate(size.width / 2, size.height / 2);

    // 赞

    final icon =

        isZan.value ? Icons.thumb_up_alt_rounded : Icons.thumb_up_alt_outlined;

    // 通过TextPainter可以获取图标的尺寸

    TextPainter textPainter = TextPainter(

        text: TextSpan(

            text: String.fromCharCode(icon.codePoint),

            style: TextStyle(

                fontSize: animation.value < 0 ? 0 : animation.value * 30,

                fontFamily: icon.fontFamily,

                color: isZan.value ? Colors.blue : Colors.black)),

        textAlign: TextAlign.center,

        textDirection: TextDirection.ltr);

    textPainter.layout(); // 进行布局

    Size size2 = textPainter.size; // 尺寸必须在布局后获取

    //将图标偏移到画布中央

    textPainter.paint(canvas, Offset(-size2.width / 2, -size2.height / 2));



    var r = size.width / 2 - 15; // 半径

    var d = 4; // 偏移量



    canvas.drawPoints(

        ui.PointMode.points,

        [

          Offset((r + d * animation2.value) * cos(pi - pi / 18 * 2),

              (r + d * animation2.value) * sin(pi - pi / 18 * 2)),

          Offset((r + d * animation2.value) * cos(pi + pi / 18 * 2),

              (r + d * animation2.value) * sin(pi + pi / 18 * 2)),

          Offset((r + d * animation2.value) * cos(pi * 1.5 - pi / 18 * 1),

              (r + d * animation2.value) * sin(pi * 1.5 - pi / 18 * 1)),

          Offset((r + d * animation2.value) * cos(pi * 1.5 + pi / 18 * 5),

              (r + d * animation2.value) * sin(pi * 1.5 + pi / 18 * 5)),

        ],

        _paint

          ..strokeWidth = animation2.value <= 0.5 ? (5 * animation2.value) / 0.5

    : 5 * (1 - animation2.value) / 0.5

          ..color = Colors.blue

          ..strokeCap = StrokeCap.round);

    TextPainter textPainter2 = TextPainter(

        text: TextSpan(

            text: zanNum.value == 0 ? "点赞" : zanNum.value.toString(),

            style: TextStyle(

                fontSize: 9, fontWeight: FontWeight.w500, color: Colors.black)),

        textAlign: TextAlign.center,

        textDirection: TextDirection.ltr);

    textPainter2.layout(); // 进行布局

    // 向右上进行偏移在小手上面

    textPainter2.paint(canvas, Offset(size.width / 9, -size.height / 2 + 5));

  }



  @override

  bool shouldRepaint(covariant _ZanPainter oldDelegate) {

    return oldDelegate.listenable != listenable;

  }

}

到这里发现是不是少了点什么，不错,还少了震动的效果，这里我们引入flutter_vibrate: ^1.3.0这个插件，这个插件是用来管理设备震动效果的，Andoroid端记得加入震动权限，

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

使用方法也很简单，这个插件封装了一些常见的提示震动，比如操作成功、操作警告、操作失败等，其实就是震动时间的长短，这里我们就在点赞时候调用Vibrate.feedback(FeedbackType.success);有一个点击成功的震动就好了。

技术是永无止境的，需要不断地学习总结。

什么是协程？

协程就像非常轻量级的线程。线程是由系统调度的，线程切换或线程阻塞的开销都比较大。而协程依赖于线程，但是协程挂起时不需要阻塞线程，几乎是无代价的，协程是由开发者控制的。所以协程也像用户态的线程，非常轻量级，一个线程中可以创建任意个协程。

1. GlobalScope 的使用（不推荐），绑定的为应用的整个生命周期，GlobalScope是生命周期是process级别的，即使Activity或Fragment已经被销毁，协程仍然在执行。所以需要绑定生命周期。

添加依赖如下：

implementation"org.jetbrains.kotlinx:kotlinx-coroutines-core:1.3.9"



implementation"org.jetbrains.kotlinx:kotlinx-coroutines-android:1.3.9"

kotlin 中 GlobalScope 类提供了几个创建协程的构造函数：

launch： 创建协程

async ： 创建带返回值的协程，返回的是 Deferred 类

withContext：不创建新的协程，指定协程上运行代码块

runBlocking：不是 GlobalScope 的 API，可以独立使用，区别是 runBlocking 里面的 delay 会阻塞线程，而 launch 创建的不会

2、lifecycleScope （推荐使用） lifecycleScope只能在Activity、Fragment中使用，会绑定Activity和Fragment的生命周期

**lifecycleScope会绑定调用者的生命周期，因此通常情况下不需要手动去停止

**

添加依赖如下：

implementation'androidx.lifecycle:lifecycle-runtime-ktx:2.2.0'//lifecycleScope



implementation'androidx.lifecycle:lifecycle-viewmodel-ktx:2.2.0'//viewModelScope

1.在不使用回调的前提下完成来线程的切换，代码看上亲也是干净整洁很多。

2.因为线程没有上下文，不能控制线程执行完成后应该回到哪里，但是协程完全帮我们实现自动化，执行完毕自动回到上下文线程中，一般情况下是主线程，可以通过设置来决定要回到哪个线程中。

3.协程可以通过suspend关键字来标志耗时操作，通过编译器来帮助我们避免一些性能上的问题。

【Flutter】学习笔记——Dart中的List & Map的使用

• list列表，相当于 OC 中的 NSArray 数组，分为可变和不可变两种。


• map键值对，相当于 OC 中的 NSDictionary 字典，也分为可变和不可变两种。

1. list数组

list默认都是可变的，列表中可以添加不同数据类型的数据。

1.1 可变list

void main() { 

    // 直接 list创建 

    List a = ["1", 2, "3.0", 4.0];

    print(a);

    

    // var 创建 

    var list = [1, 2, "zjp", 3.0];

    print(list);

}

运行结果如下：

1.2 常用方法

获取&修改指定下标数据：

// 直接获取指定下标数据 

print(list[3]); 

// 直接修改指定下标数据 

list[3] = "reno";

插入数据：

list.insert(1, "hellow"); // list.insert(index, element)

print(list);

删除数据：

list.remove(1); // list.remove(element)

print(list);

清空所有数据：

list.clear();

print(list);

运行结果如下：

1.3 排序和截取

void main() {

    List b = [3, 4, 5, 8, 6, 7];

    // 排序

    b.sort();

    print(b);

    // 截取

    print(b.sublist(1, 3));

}

运行结果如下：

1.4 不可变list

不可变的 list 需要使用const修饰。

void main() {

    List b = const [3, 4, 5, 8, 6, 7];

    b[3] = 10; // 报错

}

不可变list不能修改其元素值，否则会报错。

2. map键值对

map默认也是可变的。

2.1 可变map

void main() {

    Map a = {"a": 1, "b": 2}; 

    print(a); 

    

    var a1 = {"a1": 1, "a2": 2}; 

    print(a1);

}

运行结果如下：

2.2 常用方法

获取&修改指定下标数据：

// 直接获取指定下标数据 

print(a["a"]);

// 直接修改指定下标数据 

a["a"] = "aa";

print(a["a"]);

获取map长度：

print(a.length);

获取map所有的key：

print(a.keys);

获取map所有的value：

print(a.values);

运行结果如下：

2.3 不可变map

不可变的 map 也是使用const修饰。

void main() {

    Map a = const {"a": 1, "b": 2}; 

    a["a"] = 10; // 报错

}

不可变map不能修改其元素值，否则也会报错。

3. list转map

void main() {

    List b = ["zjp", "reno"];

    print(b.asMap());

}

运行结果如下：

在flutter 路由跳转中，我们想要回到特定的一个页面 比如：从 A -> B-> C ->D，我们向从 D页面 pop至 B 页面。我们可以使用 popUtil方法回到 B 页面。

Navigator.popUnitil(context, ModalRoute.withName('/B'))

或者使用

   Navigator.popUntil(ctx.context, (route){

        if (route.settings.name == "/B"){

          return true;

        }else {

          return false;

        }

      });

但是 运行结果是 : 黑屏。

我们对 route.setting 进行打印后，发现 route.setting == null只有最后 一个A页面的route.setting有值，其name == '/'。

所以，我们在跳转至B页面的时候，需要给B页面的routeSetting进行赋值，

  Navigator.push(

      context,

      MaterialPageRoute(

        builder: (context) =>BPage(),

        settings: RouteSettings(name: '/B'),

      ));

这样就可以回到B页面了

使用方式1 默认为倒计时

CountdownWidget(

  5,            ///倒计时的时间

  onClick: () { ///  点击事件的回调

    _skip2main();

  },

  onFinish: () { ///倒计时完成的回调

    _skip2main();

  },

)

使用方式2修改圆角和文案

CountdownWidget(

  total: 10,

  content: "已发送",

  textColor: Colors.blue,

  borderRadius: 2,

  onClick: () {

    _skip2main();

  },

  onFinish: () {

    _skip2main();

  },

)

倒计时实现

import 'dart:async';



import 'package:bilibili_flutter/common/base/base_state.dart';

import 'package:bilibili_flutter/common/base/base_widget.dart';

import 'package:flutter/cupertino.dart';

import 'package:flutter/material.dart';

import 'package:flutter/src/widgets/framework.dart';



///用于splash界面中倒计时按钮



class CountdownWidget extends BiliWidget {

  ///构造中传入函数

  final VoidCallback? onClick;



  final VoidCallback? onFinish;

  final int total;

  final double borderRadius;

  final String content;

  final double? height;



  final Color? focusColor;

  final Color? hoverColor;

  final Color? highlightColor;



  CountdownWidget(

      {this.total = 5,

      Key? key,

      this.height = 40,

      this.onClick,

      this.onFinish,

      this.borderRadius = 20,

      this.content = "倒计时",

      this.focusColor,

      this.hoverColor,

      this.highlightColor})

      : super(key: key);



  @override

  State<CountdownWidget> createState() => _CountdownWidgetState();

}



class _CountdownWidgetState extends BiliState<CountdownWidget> {

  var _count = 0;



  late Timer _timer;



  ///注册倒计时

  @override

  void initState() {

    super.initState();

    var duration = const Duration(seconds: 1);

    _timer = Timer.periodic(duration, (timer) {

      if (_count < widget.total) {

        setState(() {

          _count++;

        });

      } else {

        widget.onFinish?.call();

        _timer.cancel();

      }

    });

  }



  @override

  Widget build(BuildContext context) {

    return InkWell(

      focusColor: widget.focusColor,

      hoverColor: widget.hoverColor,

      highlightColor: widget.highlightColor,

      onTap: () {

        widget.onClick?.call();

      },

      child: SizedBox(

        height: widget.height,

        child: Card(

          elevation: 1,

          shape: RoundedRectangleBorder(

            borderRadius:

                BorderRadius.all(Radius.circular(widget.borderRadius)),

          ),

          child: Center(

            child: Padding(

              padding: const EdgeInsets.only(left: 10, right: 10),

              child: Text("${widget.content}${widget.total - _count}s"),

            ),

          ),

        ),

      ),

    );

  }

}

依赖的两个基类

import 'package:flutter/material.dart';



@immutable

abstract class BiliWidget extends StatefulWidget {

  BiliWidget({

    Key? key,

  }) : super(key: key);



  String param = "";



  void setParam(String param) {

    this.param = param;

  }

}

import 'package:flutter/material.dart';



import 'base_state.dart';



abstract class BiliState<T extends BiliWidget> extends State<T> {}

项目源码

github.com/HaiYangCode…

前言

- 知识点：绘制、动画曲线、多动画状态更新

效果图：

1、绘制静态效果

首先我们需要把线和小圆球绘制出来，对于看过我之前文章的小伙伴来说这个就很简单了，效果图：

 


关键代码：

// 小圆球半径

double radius = 6;



/// 小球圆心和直线终点一致

//左边小球圆心

Offset offset = Offset(20, 60);

//右边小球圆心

Offset offset2 = Offset(20 * 6 * 8, 60);



Paint paint = Paint()

  ..color = Colors.black87

  ..strokeWidth = 2;



/// 绘制线

canvas.drawLine(Offset.zero, Offset(90, 0), paint);

canvas.drawLine(Offset(20, 0), offset, paint);

canvas.drawLine(

    Offset(20 + radius * 2, 0), Offset(20 + radius * 2, 60), paint);

canvas.drawLine(

    Offset(20 + radius * 4, 0), Offset(20 + radius * 4, 60), paint);

canvas.drawLine(

    Offset(20 + radius * 6, 0), Offset(20 + radius * 6, 60), paint);

canvas.drawLine(Offset(20 + radius * 8, 0), offset2, paint);



/// 绘制小圆球

canvas.drawCircle(offset, radius, paint);

canvas.drawCircle(Offset(20 + radius * 2, 60), radius, paint);

canvas.drawCircle(Offset(20 + radius * 4, 60), radius, paint);

canvas.drawCircle(Offset(20 + radius * 6, 60), radius, paint);

canvas.drawCircle(offset2, radius, paint);

2、加入动画

思路： 我们可以看到5个小球一共2个小球在运动，左边小球运动一个来回之后传递给右边小球，右边小球开始运动，右边一个来回再传递给左边开始，也就是左边运动周期是：0-1-0，正向运动一次，反向再运动一次，这样就是一个周期，右边也是一样，左边运动完传递给右边，右边运动完传递给左边，这样就简单实现了牛顿摆的效果。

两个关键点

小球运动路径： 小球的运动路径是一个弧度，以竖线的起点为圆心，终点为半径，那么我们只需要设置小球运动至最高点的角度即可，通过角度就可计算出小球的坐标点。

运动曲线： 当然我们知道牛顿摆小球的运动曲线并不是匀速的，他是有一个加速减速过程的，撞击之后，小球先加速然后减速达到最高点速度为0，之后速度再从0慢慢加速进行撞击小球，周而复始。

下面的运动曲线就是先加速再减速，大概符合牛顿摆的运动曲线。我们就使用这个曲线看看效果。

 


完整源码：

class OvalLoading extends StatefulWidget {

  const OvalLoading({Key? key}) : super(key: key);



  @override

  _OvalLoadingState createState() => _OvalLoadingState();

}



class _OvalLoadingState extends State

    with TickerProviderStateMixin {

  // 左边小球

  late AnimationController _controller =

      AnimationController(vsync: this, duration: Duration(milliseconds: 300))

        ..addStatusListener((status) {

          if (status == AnimationStatus.completed) {

            _controller.reverse(); //反向执行 1-0

          } else if (status == AnimationStatus.dismissed) {

            _controller2.forward();

          }

        })

        ..forward();

  // 右边小球

  late AnimationController _controller2 =

      AnimationController(vsync: this, duration: Duration(milliseconds: 300))

        ..addStatusListener((status) {

          // dismissed 动画在起始点停止

          // forward 动画正在正向执行

          // reverse 动画正在反向执行

          // completed 动画在终点停止

          if (status == AnimationStatus.completed) {

            _controller2.reverse(); //反向执行 1-0

          } else if (status == AnimationStatus.dismissed) {

            // 反向执行完毕左边小球执行

            _controller.forward();

          }

        });

  late var cure =

      CurvedAnimation(parent: _controller, curve: Curves.easeOutCubic);

  late var cure2 =

      CurvedAnimation(parent: _controller2, curve: Curves.easeOutCubic);



  late Animation animation = Tween(begin: 0.0, end: 1.0).animate(cure);



  late Animation animation2 =

      Tween(begin: 0.0, end: 1.0).animate(cure2);



  @override

  Widget build(BuildContext context) {

    return Container(

      margin: EdgeInsetsDirectional.only(top: 300, start: 150),

      child: CustomPaint(

        size: Size(100, 100),

        painter: _OvalLoadingPainter(

            animation, animation2, Listenable.merge([animation, animation2])),

      ),

    );

  }



  @override

  void dispose() {

    _controller.dispose();

    _controller2.dispose();

    super.dispose();

  }

}



class _OvalLoadingPainter extends CustomPainter {

  double radius = 6;

  final Animation animation;

  final Animation animation2;

  final Listenable listenable;



  late Offset offset; // 左边小球圆心

  late Offset offset2; // 右边小球圆心



  final double lineLength = 60; // 线长



  _OvalLoadingPainter(this.animation, this.animation2, this.listenable)

      : super(repaint: listenable) {

    offset = Offset(20, lineLength);

    offset2 = Offset(20 * radius * 8, lineLength);

  }



  // 摆动角度

  double angle = pi / 180 * 30; // 30°



  @override

  void paint(Canvas canvas, Size size) {

    Paint paint = Paint()

      ..color = Colors.black87

      ..strokeWidth = 2;



    // 左边小球 默认坐标 下方是90度 需要+pi/2

    var dx = 20 + 60 * cos(pi / 2 + angle * animation.value);

    var dy = 60 * sin(pi / 2 + angle * animation.value);

    // 右边小球

    var dx2 = 20 + radius * 8 - 60 * cos(pi / 2 + angle * animation2.value);

    var dy2 = 60 * sin(pi / 2 + angle * animation2.value);



    offset = Offset(dx, dy);

    offset2 = Offset(dx2, dy2);



    /// 绘制线

      canvas.drawLine(Offset.zero, Offset(90, 0), paint);

    canvas.drawLine(Offset(20, 0), offset, paint);

    canvas.drawLine(

        Offset(20 + radius * 2, 0), Offset(20 + radius * 2, 60), paint);

    canvas.drawLine(

        Offset(20 + radius * 4, 0), Offset(20 + radius * 4, 60), paint);

    canvas.drawLine(

        Offset(20 + radius * 6, 0), Offset(20 + radius * 6, 60), paint);

    canvas.drawLine(Offset(20 + radius * 8, 0), offset2, paint);



    /// 绘制球

    canvas.drawCircle(offset, radius, paint);

    canvas.drawCircle(

        Offset(20 + radius * 2, 60),

        radius,

        paint);



    canvas.drawCircle(Offset(20 + radius * 4, 60), radius, paint);

    canvas.drawCircle(Offset(20 + radius * 6, 60), radius, paint);

    canvas.drawCircle(offset2, radius, paint);

  }

  @override

  bool shouldRepaint(covariant _OvalLoadingPainter oldDelegate) {

    return oldDelegate.listenable != listenable;

  }

}

去掉线的效果：

总结

本文展示了实现牛顿摆的原理，其实并不复杂，关键点就是小球的运动轨迹和运动速度曲线，如果用到项目中当做Loading还有很多优化的空间，比如加上小球影子、修改小球颜色或者把小球换成好玩的图片等等操作会看起来更好看一点，本篇只展示了实现的原理，希望对大家有一些帮助~

场景

在MainActivity中分别加载两个Fragment处理业务。
首先触发加载SecondFragment：

//MainActivity触发

supportFragmentManager.commit {

      add(R.id.contentLayout, FirstFragment())

      addToBackStack(null)//点击返回键可以回到FirstFragment

}

        

//FirstFragment布局中有一个自定义MyButton且有bitmap属性

class MyButton @JvmOverloads constructor(

    context: Context, attrs: AttributeSet? = null, defStyle: Int = 0

) : Button(

    context, attrs, defStyle

) {

    private val bitmap = BitmapFactory.decodeResource(context.resources, R.drawable.a)

}

然后触发加载SecondFragment；

//MainActivity触发

supportFragmentManager.commit {

      replace(R.id.contentLayout, SecondFragment())

      addToBackStack(null)

}

Android Profile可以发现有内存泄露

- MyButton中的bitmap无法释放。

为什么认为bitmap无法释放就是内存泄漏呢？

内存泄漏：简单点说，就是该释放的内存无法得到释放，而且内存不能被使用。
从Fragment的生命周期说起，从FirstFragment切换到SecondFragment，前者生命周期从onPause->onStop->onDestoryView，注意这里只走到onDestoryView，并没有onDetach以及onDestory。其实也很好理解，FirstFragment是加入了回退栈，后续是要被恢复，所以保留了Fragment对象，但为了不占用过多的内存，View会被销毁释放资源。
当FirstFragment从回退栈回到前台，会再次触发onCreateView重建View。既然View会重建，那么之前的View就是不需要的，留着也没用，就应该销毁掉。

该释放的View、Bitmap没有被释放，所以就出现了泄漏。

例子比较简单，只是为了说明问题，如果FirstFragment View持有大量占内存的对象，而且SecondFragment的加载需要耗费比较多的内存且存在跳转的其他页面的可能性，那么FirstFragment View的释放就显得很有必要。

补充引用链：FirstFragment-MyButton-Bitmap

onDestoryView官方注释

注意到这句“The next time the fragment needs
* to be displayed, a new view will be created”，当Fragment恢复时，会创建新的view添加到Fragment，也就是重走onCreateView，那么我理解旧的view就应该可以被销毁。

    /**

     * Called when the view previously created by {@link #onCreateView} has

     * been detached from the fragment.  The next time the fragment needs

     * to be displayed, a new view will be created.  This is called

     * after {@link #onStop()} and before {@link #onDestroy()}.  It is called

     * <em>regardless</em> of whether {@link #onCreateView} returned a

     * non-null view.  Internally it is called after the view's state has

     * been saved but before it has been removed from its parent.

     */

    @MainThread

    @CallSuper

    public void onDestroyView() {

        mCalled = true;

    }

LeakCanary日志

建议在onDestroyView要释放掉View

LeakCanary: Watching instance of androidx.constraintlayout.widget.ConstraintLayout (com.yang.myapplication.MyFragment received Fragment#onDestroyView() callback (references to its views should be cleared to prevent leaks)) with key 0f101dfe-5e4e-4448-95cc-f5d08bbdf06e

解决方案

将ViewBinding置空就欧了。其实这也是官方的建议，当你新建项目的时候，就能看到这样的案列。

   override fun onDestroyView() {

        super.onDestroyView()

        _binding = null

    }

总结

当出现Fragment没有被销毁（onDestory没有回调），而view需要被销毁时（onDestoryView），要注意把ViewBinding置空，以免出现内存泄露。

当你点进来看这篇文章时，应该和我一样在思考如何优雅的请求网络、处理加载状态、处理加载异常。希望这篇文章和案例能给你带来不一样的思考。

解决的问题

• 通用异常处理


• 请求资源状态可见（加载成功，加载中，加载失败）


• 通用重试逻辑

效果展示

为了演示请求失败的处理，特意在wanApi抛了两次错

正文

搜索一下关于flutter网络封装的多半都是dio相关的封装，简单的封装、复杂的封装百花齐放，思路都是工具类的封装。今天换一个思路来实现，引入repository对数据层进行操作，在repository里使用dio作为一个数据源供repository使用，需要使用数据就对repository进行操作不直接调用数据源（在repositoy里是不允许直接操作数据源的）。用WanAndroid的接口写个示例demo

定义数据源

使用retrofit作为数据源，感兴趣的小伙伴可以看下retrofit这个库

@RestApi(baseUrl: "https://www.wanandroid.com")

abstract class WanApi {

  factory WanApi(Dio dio, {String baseUrl}) = _WanApi;



  @GET("/banner/json")

  Future<BannerModel> getBanner();



  @GET("/article/top/json")

  Future<TopArticleModel> getTopArticle();



  @GET("/friend/json")

  Future<PopularSiteModel> getPopularSite();

}

生成的代码

class _WanApi implements WanApi {

  _WanApi(this._dio, {this.baseUrl}) {

    baseUrl ??= 'https://www.wanandroid.com';

  }



  final Dio _dio;



  String? baseUrl;



  @override

  Future<BannerModel> getBanner() async {

    const _extra = <String, dynamic>{};

    final queryParameters = <String, dynamic>{};

    final _headers = <String, dynamic>{};

    final _data = <String, dynamic>{};

    final _result = await _dio.fetch<Map<String, dynamic>>(

        _setStreamType<BannerModel>(

            Options(method: 'GET', headers: _headers, extra: _extra)

                .compose(_dio.options, '/banner/json',

                    queryParameters: queryParameters, data: _data)

                .copyWith(baseUrl: baseUrl ?? _dio.options.baseUrl)));

    final value = BannerModel.fromJson(_result.data!);

    return value;

  }



  @override

  Future<TopArticleModel> getTopArticle() async {

    const _extra = <String, dynamic>{};

    final queryParameters = <String, dynamic>{};

    final _headers = <String, dynamic>{};

    final _data = <String, dynamic>{};

    final _result = await _dio.fetch<Map<String, dynamic>>(

        _setStreamType<TopArticleModel>(

            Options(method: 'GET', headers: _headers, extra: _extra)

                .compose(_dio.options, '/article/top/json',

                    queryParameters: queryParameters, data: _data)

                .copyWith(baseUrl: baseUrl ?? _dio.options.baseUrl)));

    final value = TopArticleModel.fromJson(_result.data!);

    return value;

  }



  @override

  Future<PopularSiteModel> getPopularSite() async {

    const _extra = <String, dynamic>{};

    final queryParameters = <String, dynamic>{};

    final _headers = <String, dynamic>{};

    final _data = <String, dynamic>{};

    final _result = await _dio.fetch<Map<String, dynamic>>(

        _setStreamType<PopularSiteModel>(

            Options(method: 'GET', headers: _headers, extra: _extra)

                .compose(_dio.options, '/friend/json',

                    queryParameters: queryParameters, data: _data)

                .copyWith(baseUrl: baseUrl ?? _dio.options.baseUrl)));

    final value = PopularSiteModel.fromJson(_result.data!);

    return value;

  }

  

  RequestOptions _setStreamType<T>(RequestOptions requestOptions) {

    if (T != dynamic &&

        !(requestOptions.responseType == ResponseType.bytes ||

            requestOptions.responseType == ResponseType.stream)) {

      if (T == String) {

        requestOptions.responseType = ResponseType.plain;

      } else {

        requestOptions.responseType = ResponseType.json;

      }

    }

    return requestOptions;

  }

}

repository封装

Resource是封装的资源加载状态类，用于包装资源

enum ResourceState { loading, failed, success }



class Resource<T> {

  final T? data;

  final ResourceState state;

  final dynamic error;

  Resource._({required this.state, this.error, this.data});



  factory Resource.failed(dynamic error) {

    return Resource._(state: ResourceState.failed, error: error);

  }



  factory Resource.success(T data) {

    return Resource._(state: ResourceState.success, data: data);

  }



  factory Resource.loading() {

    return Resource._(state: ResourceState.loading);

  }



  bool get isLoading => state == ResourceState.loading;

  bool get isSuccess => state == ResourceState.success;

  bool get isFailed => state == ResourceState.failed;

}

接下来我们在Repository里使用WanApi来封装，我们通过流的方式返回了资源加载的状态可供View层根据状态展示不同的界面，使用try-catch保证网络请求的健壮性

class WanRepository extends BaseRepository {

  late WanApi wanApi = GetInstance().find();

  ///获取首页所需的所有数据

  Stream<Resource<HomeDataMapper>> homeData() async* {

    //加载中

    yield Resource.loading();

    try {

      var result = await Future.wait<dynamic>([

        wanApi.getBanner(),

        wanApi.getPopularSite(),

        wanApi.getTopArticle()

      ]);

      final BannerModel banner = result[0];

      final PopularSiteModel site = result[1];

      final TopArticleModel article = result[2];

      //加载成功

      yield Resource.success(

          HomeDataMapper(site.data, banner.data, article.data));

    } catch (e) {

      //加载失败

      yield Resource.failed(e);

    }

  }

}

咋一看感觉没啥问题细思之下问题很多，每一个请求还多了try-catch以外那么多的模板方法，实际开发中只写try包裹的内容才符合摸鱼佬的习惯。ok，我们把模板方法提取出来到一个公共方法里去，就变成了这样：

class WanRepository extends BaseRepository {

  late WanApi wanApi = GetInstance().find();

  ///获取首页所需的所有数据

  Stream<Resource<HomeDataMapper>> homeData() async* {

    ///定义加载函数

    loadHomeData()async*{

      var result = await Future.wait<dynamic>([

        wanApi.getBanner(),

        wanApi.getPopularSite(),

        wanApi.getTopArticle()

      ]);

      final BannerModel banner = result[0];

      final PopularSiteModel site = result[1];

      final TopArticleModel article = result[2];

      //加载成功

      yield Resource.success(

          HomeDataMapper(site.data, banner.data, article.data));

    }

    ///将加载函数放在一个包装器里执行

    yield* MyWrapper.customStreamWrapper(loadHomeData);

  }

}

得益于Dart中函数可以作为参数传递，所以我们可以定义一个包装方法，入参是具体业务的函数，出参和业务函数一致，在这个方法里可以处理各种异常，甚至可以实现通用的请求重试（只需要在失败的时候弹窗提醒用户重试，获得认可后再次执行function就可以了，更关键的是此时状态管理里对repository的调用依旧是完整的，也就是说这是一个通用的重试功能）
包装器代码：

class MyWrapper {

  //流的方式

  static Stream<Resource<T>> customStreamWrapper<T>(

      Stream<Resource<T>> Function() function,

      {bool retry = false}) async* {

    yield Resource.loading();

    try {

      var result = function.call();

      await for(var data in result){

        yield data;

      }

    } catch (e) {

      //重试代码

      if (retry) {

        var toRetry = await Get.dialog(const RequestRetryDialog());

        if (toRetry == true) {

          yield* customStreamWrapper(function,retry: retry);

        } else {

          yield Resource.failed(e);

        }

      } else {

        yield Resource.failed(e);

      }

    }

  }

}

其实就是把相同的地方封装成一个通用方法，不同的地方单独拎出来编写，然后作为一个参数传到包装器里执行。显然这样的方法却不够优雅，每次在写repository的时候都得创建一个函数在里面编写请求数据的逻辑然后交给包装器执行。我们肯定希望repository里代码长成这个样子：

@Repo()

abstract class WanRepository extends BaseRepository {

  late WanApi wanApi = GetInstance().find();



  ///获取首页所需的所有数据

  @ProxyCall()

  @Retry()

  Stream<Resource<HomeDataMapper>> homeData() async* {

    var result = await Future.wait<dynamic>(

        [wanApi.getBanner(), wanApi.getPopularSite(), wanApi.getTopArticle()]);

    final BannerModel banner = result[0];

    final PopularSiteModel site = result[1];

    final TopArticleModel article = result[2];

    yield Resource.success(

        HomeDataMapper(site.data, banner.data, article.data));

  }

}

是的没错，最终的repository就长这个样子，你只需要在类上打个注解@Repo在需要代理调用的方法上注解@ProxyCall，运行 flutter pub run build_runner build 就可以生成对应的包装代码：

// GENERATED CODE - DO NOT MODIFY BY HAND



part of 'wan_repository.dart';



// **************************************************************************

// RepositoryGenerator

// **************************************************************************



class WanRepositoryImpl = WanRepository with _WanRepository;



mixin _WanRepository on WanRepository {

  @override

  Stream<Resource<HomeDataMapper>> homeData() {

    return MyWrapper.customStreamWrapper(() => super.homeData(), retry: true);

  }

}

结语

感谢你的阅读，这只是一个网络请求封装的思路不是最优解，但希望给你带来新思考

附demo地址:gitee.com/cysir/examp…

flutter版本:2.8

前言

算法是程序的灵魂，一个优秀的程序是可以在海量的数据中，仍保持高效计算。目前各大厂的面试要求也越来越高，算法肯定会要去。如果你不想去大厂，只想去小公司，获取并不需要要求算法。但是你永远只能当一个代码工人，也就是跟搬砖的没区别。可能一两年后你就会被淘汰。
如果不想永远当个代码工人，就在业余时间学学数据结构和算法。

今天就来分享一个朋友阿里四面挂了的排序算法题912. 排序数组,
排序数组这道题本身是没有规定使用什么排序算法的，但面试官指定需要使用归并排序算法来解答，肯定是有他道理的。

我们知道，排序算法有很多，大致有如下几种：

其中归并排序应该是使用的最多的几种之一，Java中Arrays.sort()采用了一种名为TimSort的排序算法，就是归并排序的优化版本。归并排序自身的优点有二，首先是因为它的平均时间复杂度低，为O(N*logN)；其次它是稳定的排序，即相等元素的顺序不会改变；除了这两点优点之外，其蕴含的分治思想，是可以用来解决我们许多算法问题的，这也是面试官为什么要指定归并排序的原因。好了，废话不多说，我们接下来具体看看归并排序算法是如何实现的吧。

归并排序（递归版）

归并排序（MERGE-SORT）是利用归并的思想实现的排序方法，该算法采用经典的分治策略，即分为两步：分与治。

1. 分：先递归分解数组成子数组

2. 治：将分阶段得到的子数组按顺序合并

我们来具体看看例子，假设我们现在给定一个数组：[6，3，2，7，1，3，5，4]，我们需要使用归并算法对其排序，其大致过程如下图所示：

分阶段可以理解为就是递归拆分子序列的过程，递归的深度为log2n。而治的阶段则是将两个子序列进行排序的过程，我们通过图解看看治阶段最后一步中是如何将[2，3，6，7]和[1，3，4，5]这两个数组合并的。

图中左边是复制的临时数组，而右边是原数组，我们将左右指针对应的值进行大小比较，将较小的那个数放入原数组中，然后将相应的指针右移。比如第一步中，我们比较左边指针L指向的2和右指针R指向的1，R指向的1小，则把1放入原数组中的第一个位置中，然后R指针向右移动。后面再继续，直到左边临时数组的元素都按序覆盖了右边的原数组。最后我们通过上图再结合源码来看看吧：

class Solution {

    public int[] sortArray(int[] nums) {

        sort(0, nums.length - 1, nums);

        return nums;

    }



    // 分：递归二分

    private void sort(int l, int r, int[] nums) {

        if (l >= r) return;



        int mid = (l + r) / 2;

        sort(l, mid, nums);

        sort(mid + 1, r, nums);

        merge(l, mid, r, nums);

    }





    // 治：将nums[l...mid]和nums[mid+1...r]两部分进行归并

    private void merge(int l, int mid, int r, int[] nums) {

        int[] aux = Arrays.copyOfRange(nums, l, r + 1);



        int lp =l, rp = mid + 1;



        for (int i = lp; i <= r; i ++) {

            if (lp > mid) {                // 如果左半部分元素已经全部处理完毕

                nums[i] = aux[rp - l];

                rp ++;

            }  else if (rp > r) {          // 如果右半部分元素已经全部处理完毕

                nums[i] = aux[lp - l];

                lp ++;

            } else if (aux[lp-l] > aux[rp - l]) { // 左半部分所指元素 > 右半部分所指元素

                nums[i] = aux[rp - l];

                rp ++;

            } else {                        // 左半部分所指元素 <= 右半部分所指元素

                nums[i] = aux[lp - l];

                lp ++;

            }

        }

    }

}

我们可以看到，分阶段的时间复杂度是logN，而合并阶段的时间复杂度是N，所以归并算法的时间复杂度是O(N*logN)，因为每次合并都需要对应范围内的数组，所以其空间复杂度是O(N);

归并排序（迭代版）

上面的归并排序是通过递归二分的方法进行数组切分的，其实我们也可以通过迭代的方法来完成分这步，看下图：

其因为数组，所以我们直接通过迭代从1开始合并，其中sz就是合并的长度，这种方法也可以称为自底向上的归并，其具体的代码如下

class Solution {

    public int[] sortArray(int[] nums) {

        int n = nums.length;

        // sz= 1,2,4,8 ... 排序

        for (int sz = 1; sz < n; sz *= 2) {

            // 对 arr[i...i+sz-1] 和 arr[i+sz...i+2*sz-1] 进行归并

            for (int i = 0; i < n - sz; i += 2*sz ) {

                merge(i, i + sz - 1, Math.min(i+sz+sz-1, n-1), nums);

            }

        }

        return nums;

    }



  	// 和递归版一样

    private void merge(int l, int mid, int r, int[] nums) {

        int[] aux = Arrays.copyOfRange(nums, l, r + 1);



        int lp =l, rp = mid + 1;



        for (int i = lp; i <= r; i ++) {

            if (lp > mid) {

                nums[i] = aux[rp - l];

                rp ++;

            }  else if (rp > r) {

                nums[i] = aux[lp - l];

                lp ++;

            } else if (aux[lp-l] > aux[rp - l]) {

                nums[i] = aux[rp - l];

                rp ++;

            } else {

                nums[i] = aux[lp - l];

                lp ++;

            }

        }

    }

}

总结

归并排序是一种十分高效的排序算法，其时间复杂度为O(N*logN)。归并排序的最好，最坏的平均时间复杂度均为O(nlogn)，排序后相等的元素的顺序不会改变，所以也是一种稳定的排序算法。归并排序被应用在许多地方，其java中Arrays.sort()采用了一种名为TimSort的排序算法，其就是归并排序的优化版本。

apply、also介绍

• 两者都是T的扩展函数，也就是任何类型对象都调用apply、also；


• 两者的返回值都是this，也就是函数调用者；


• apply的闭包使用this来访问函数调用者，also的闭包使用it来访问函数的调用者。

一看看apply、also源码

public inline fun <T> T.apply(block: T.() -> Unit): T {//1

    contract {

        callsInPlace(block, InvocationKind.EXACTLY_ONCE)

    }

    block()//2

    return this//返回值为this，也就是apply的调用者

}



public inline fun <T> T.also(block: (T) -> Unit): T {//3

    contract {

        callsInPlace(block, InvocationKind.EXACTLY_ONCE)

    }

    block(this)//4

    return this 返回值为this，也就是also的调用者

}

• 注释1：apply接受的闭包类型为T.() -> Unit，也就是调用者的扩展函数，例子tv.apply{}，闭包{}为tv的扩展函数，所以this可以访问到调用者；


• 注释2：直接调用闭包，完成apply的逻辑；


• 注释3：also接受的闭包类型为 (T) -> Unit，也就是任意函数，只要函数入参类型为also调用类型返回为Unit都可以；


• 注释3：把this作为闭包的参数传入，例子tv.also{}，闭包的入参为tv，所以it能访问到tv；


• apply this可以访问调用者本身，因为闭包是扩展函数，而also用it访问调用者本身，因为调用者是作为参数传入闭包的。

apply、also适用场景

因为返回值为调用者this，所以它们非常适合对同一个对象连续操作的链式调用。
以下代码以apply为例，链式调用对tv进行一系列操作。注意：例子不一定合理，只是想表达相应的意思而已。

    private fun init() {

        val tv = TextView(this)

        tv.apply {

            this.text = "name" //操作1

        }.apply {

            this.setOnClickListener { //操作2

                Log.d("MainActivity", "setOnClickListener")

            }

        }.apply {

            this.gravity = Gravity.CENTER //操作3

        }

    }

run、let介绍

• 两者都是T的扩展函数，也就是任何类型对象都调用run、let；


• 两者的返回值是：最后一行非赋值代码作为闭包的返回值，否则返回Unit；


• run的闭包使用this来访问函数调用者，let的闭包使用it来访问函数的调用者。

一起看看 run、let源码

public inline fun <T, R> T.run(block: T.() -> R): R {//1

    contract {

        callsInPlace(block, InvocationKind.EXACTLY_ONCE)

    }

    return block()//2

}



public inline fun <T, R> T.let(block: (T) -> R): R {//3

    contract {

        callsInPlace(block, InvocationKind.EXACTLY_ONCE)

    }

    return block(this)//4

}

• 注释1：run接受的闭包类型为T.() -> Unit，也就是调用者的扩展函数，this可以访问到调用者，这点跟apply一样；


• 注释2：直接调用闭包，将闭包的返回值返回；


• 注释3：let接受的闭包类型为block: (T) -> Unit，也就是任意函数，只要函数入参类型为also调用者类型返回为Unit都可以；


• 注释4：直接调用闭包，将this作为参数传入闭包；


• run this可以访问调用者本身，因为闭包是扩展函数，而let用it访问调用者本身，因为是作为参数传入闭包。

run、let适用场景

它们都可以有返回值，所以非常适合上一个操作返回值作用于下一个操作的链式调用。以下代码以let为例，操作1返回值作用于操作2，操作2返回值作用于操作3。注意：例子不一定合理，只是想表达相应的意思而已。

    private fun init(data: Int): Int {

        return data.let {

            if (data == 1) it + 1 else it + 2 //操作1

        }.let {

            if (data == 2) it + 3 else it + 4 //操作2

        }.let {

            if (data == 3) it + 5 else it + 6 //操作3

        }

    }

作用函数更重要的作用

确保操作的作用域，以下代码确保tv不为空的情况下执行，保证操作的作用域。

        val tv = TextView(this)

        tv?.apply {

            text = count.toString()

            setOnClickListener {

                Log.d("MainActivity", "setOnClickListener")

            }

            gravity = Gravity.CENTER

        }

为什么有的用this访问调用者，有的则用it?

前面分析源码的时候可以看到，

• apply、run接收的闭包类型为调用者的扩展函数，既然是扩展函数，那么当然是用this来访问调用者；


• also、let接受的闭包类型为任意类型的函数，只要函数入参类型为调用者类型返回为Unit都可以，既然是参数，那么就能用不能用this来访问，就得用其他字符来访问，定义it来访问也未尝不可；

总结

• apply、also，闭包的返回值都是this，前者apply接受的闭包类型调用者的扩展函数，后者接受的闭包类型为 入参为调用者类型的函数；


• also、apply，非常适合对同一个对象连续操作的链式调用；


• run、let，闭包的返回值为最后一行非赋值代码，前者run接受的闭包类型调用者的扩展函数，后者接受的闭包类型为 入参为调用者类型的函数；


• run、let，非常适合上一个操作返回值作用于下一个操作的调用；

以上分析有不对的地方，请指出，互相学习，谢谢哦！

之前做了一个自定义View，效果有些类似海报工厂，当做自定义View的入门学习吧~先看下效果图：

就是一个背景图，中间挖了若干个形状不同的“洞”，每个“洞”里放着一张图片，用手可以拖拽、缩放、旋转该图片，并且当前图片备操作时会有红色的高亮边框。点击选中某个图片的时候，底部会弹出菜单栏，菜单栏有三个按钮，分别是对该图片进行旋转90度、对称翻转图片、和保存整个海报到手机内置sd卡根目录。

这就类似海报工厂效果，选择若干张图片还有底部模板（就是背景图片和挖空部分的位置和形状），然后通过触摸改变选择的图片的大小位置角度，来制作一张自己喜爱的海报。

这里主要是一个自定义View，项目中叫做JigsawView完成的。它的基本结构是最底层绘制可操作的图片，第二层绘制背景图片，第三层绘制镂空的部分，镂空部分通过PorterDuffXfermode来实现，镂空部分的形状由对应手机目录的svg文件确定。

在用Android中的Canvas进行绘图时，可以通过使用PorterDuffXfermode将所绘制的图形的像素与Canvas中对应位置的像素按照一定规则进行混合，形成新的像素值，从而更新Canvas中最终的像素颜色值，这样会创建很多有趣的效果。关于PorterDuffXfermode详细可以参考
Android中Canvas绘图之PorterDuffXfermode使用及工作原理详解

首先这里要关掉硬件加速，因为硬件加速可能会使效果丢失。在View的初始化语句中调用

setLayerType(View.LAYER_TYPE_SOFTWARE, null);

即可。

由于JigsawView的代码不少，所以这里只展示比较重要的部分，完整代码请见文章末尾的GitHub链接。

首先需要两支画笔：

 //绘制图片的画笔

    Paint mMaimPaint = new Paint(Paint.ANTI_ALIAS_FLAG);

    //绘制高亮边框的画笔

    Paint mSelectPaint = new Paint(Paint.ANTI_ALIAS_FLAG);

这里图片的模型是PictureModel 。PictureModel 主要都是包含了位置和缩放信息以及镂空部分的HollowModel，而图片的具体位置和大小由HollowModel确定，图片时填充镂空部分的，以类似ImageView的CenterCrop方式填充，这个在JigsawView的makePicFillHollow方法中处理。

HollowModel持有解析svg文件得到的path对象集合，该集合可以表示一个svg文件表示的路径。具体的解析工作由自定义的SvgParseUtil类处理，SvgParseUtil从手机的内置sd卡中（当然路径可以灵活配置）读取对应的svg文件，然后解析为可以绘制的Path集合对象。SvgParseUtil本质是解析xml文件（以为svg就是一个xml文件），对于svg路径直接拷贝系统的PathParser处理，其他的圆形矩形多边形就自己处理。这里具体代码这里就不展示了，详细请看GitHub上的源码。

以下是完整的onDraw方法：

 @Override

    protected void onDraw(Canvas canvas) {

        if (mPictureModels != null && mPictureModels.size() > 0 && mBitmapBackGround != null) {

            //循环遍历画要处理的图片

            for (PictureModel pictureModel : mPictureModels) {

                Bitmap bitmapPicture = pictureModel.getBitmapPicture();

                int pictureX = pictureModel.getPictureX();

                int pictureY = pictureModel.getPictureY();

                float scaleX = pictureModel.getScaleX();

                float scaleY = pictureModel.getScaleY();

                float rotateDelta = pictureModel.getRotate();



                HollowModel hollowModel = pictureModel.getHollowModel();

                ArrayList<Path> paths = hollowModel.getPathList();

                if (paths != null && paths.size() > 0) {

                    for (Path tempPath : paths) {

                        mPath.addPath(tempPath);

                    }

                    drawPicture(canvas, bitmapPicture, pictureX, pictureY, scaleX, scaleY, rotateDelta, hollowModel, mPath);

                } else {

                    drawPicture(canvas, bitmapPicture, pictureX, pictureY, scaleX, scaleY, rotateDelta, hollowModel, null);

                }

            }

            //新建一个layer，新建的layer放置在canvas默认layer的上部，当我们执行了canvas.saveLayer()之后，我们所有的绘制操作都绘制到了我们新建的layer上，而不是canvas默认的layer。

            int layerId = canvas.saveLayer(0, 0, canvas.getWidth(), canvas.getHeight(), null, Canvas.ALL_SAVE_FLAG);



            drawBackGround(canvas);



            //循环遍历画镂空部分

            for (PictureModel pictureModel : mPictureModels) {

                int hollowX = pictureModel.getHollowModel().getHollowX();

                int hollowY = pictureModel.getHollowModel().getHollowY();

                int hollowWidth = pictureModel.getHollowModel().getWidth();

                int hollowHeight = pictureModel.getHollowModel().getHeight();

                ArrayList<Path> paths = pictureModel.getHollowModel().getPathList();

                if (paths != null && paths.size() > 0) {

                    for (Path tempPath : paths) {

                        mPath.addPath(tempPath);

                    }

                    drawHollow(canvas, hollowX, hollowY, hollowWidth, hollowHeight, mPath);

                    mPath.reset();

                } else {

                    drawHollow(canvas, hollowX, hollowY, hollowWidth, hollowHeight, null);

                }

            }



            //把这个layer绘制到canvas默认的layer上去

            canvas.restoreToCount(layerId);



            //绘制选择图片高亮边框

            for (PictureModel pictureModel : mPictureModels) {

                if (pictureModel.isSelect() && mIsNeedHighlight) {

                    canvas.drawRect(getSelectRect(pictureModel), mSelectPaint);

                }

            }

        }

    }

思路还是比较清晰的。第3行到第22行为绘制可操作图片。第19行的drawPicture就是绘制所有的可操作图片，而当该图片对应的镂空部分没有相应的svg时，就绘制HollowModel的位置尺寸对应的矩形作为镂空部分，即20行的drawPicture。

看下drawPicture方法：

private void drawPicture(Canvas canvas, Bitmap bitmapPicture, int coordinateX, int coordinateY, float scaleX, float scaleY, float rotateDelta

            , HollowModel hollowModel, Path path) {

        int picCenterWidth = bitmapPicture.getWidth() / 2;

        int picCenterHeight = bitmapPicture.getHeight() / 2;

        mMatrix.postTranslate(coordinateX, coordinateY);

        mMatrix.postScale(scaleX, scaleY, coordinateX + picCenterWidth, coordinateY + picCenterHeight);

        mMatrix.postRotate(rotateDelta, coordinateX + picCenterWidth, coordinateY + picCenterHeight);

        canvas.save();



        //以下是对应镂空部分相交的处理，需要完善

        if (path != null) {

            Matrix matrix1 = new Matrix();

            RectF rect = new RectF();

            path.computeBounds(rect, true);



            int width = (int) rect.width();

            int height = (int) rect.height();



            float hollowScaleX = hollowModel.getWidth() / (float) width;

            float hollowScaleY = hollowModel.getHeight() / (float) height;



            matrix1.postScale(hollowScaleX, hollowScaleY);

            path.transform(matrix1);

            //平移path

            path.offset(hollowModel.getHollowX(), hollowModel.getHollowY());

            //让图片只能绘制在镂空内部，防止滑动到另一个拼图的区域中

            canvas.clipPath(path);

            path.reset();

        } else {

            int hollowX = hollowModel.getHollowX();

            int hollowY = hollowModel.getHollowY();

            int hollowWidth = hollowModel.getWidth();

            int hollowHeight = hollowModel.getHeight();

            //让图片只能绘制在镂空内部，防止滑动到另一个拼图的区域中

            canvas.clipRect(hollowX, hollowY, hollowX + hollowWidth, hollowY + hollowHeight);

        }

        canvas.drawBitmap(bitmapPicture, mMatrix, null);

        canvas.restore();

        mMatrix.reset();

    }

这里主要是运用了Matrix处理图片的各种变化。在onTouchEvent方法中，会根据触摸的事件不同对正在操作的PictureModel对象的位置、缩放、角度进行对应的赋值，所以在drawPicture中将每次触摸后的赋值参数取出来，交给Matrix对象处理，最后通过

canvas.drawBitmap(bitmapPicture, mMatrix, null);

就能将触摸后的变化图片显示出来。
另外第26行的canvas.clipPath(path);是将图片的可绘制区域限定在镂空部分中，防止图片滑动到其他的镂空区域。

注意onDraw的第25行的

int layerId = canvas.saveLayer(0, 0, canvas.getWidth(), canvas.getHeight(), null, Canvas.ALL_SAVE_FLAG);

为了正确显示PorterDuffXfermode所带来的的效果，需要新建一个图层，具体可以参见上面链接引用的博文。

onDraw第26行的drawBackGround方法就是绘制背景，这个很简单就不必说了。

第28行到第44行为绘制镂空部分，主要是先把HollowModel中存储的Path集合取出，再通过addPath方法将路径数据交给mPath对象，再由drawHollow方法去真正绘制镂空部分。

private void drawHollow(Canvas canvas, int hollowX, int hollowY, int hollowWidth, int hollowHeight, Path path) {

        mMaimPaint.setXfermode(mPorterDuffXfermodeClear);

        //画镂空

        if (path != null) {

            canvas.save();

            canvas.translate(hollowX, hollowY);

             //缩放镂空部分大小使得镂空部分填充HollowModel对应的矩形区域

            scalePathRegion(canvas, hollowWidth, hollowHeight, path);

            canvas.drawPath(path, mMaimPaint);

            canvas.restore();

            mMaimPaint.setXfermode(null);

        } else {

            Rect rect = new Rect(hollowX, hollowY, hollowX + hollowWidth, hollowY + hollowHeight);

            canvas.save();

            canvas.drawRect(rect, mMaimPaint);

            canvas.restore();

            mMaimPaint.setXfermode(null);

        }

    }

这里首先对设置画笔的PorterDuffXfermode:

mMaimPaint.setXfermode(mPorterDuffXfermodeClear);

这里为了镂空效果，PorterDuffXfermode使用PorterDuff.Mode.CLEAR。

然后对画布进行平移，然后通过scalePathRegion方法让表示镂空路径的Path对象进行缩放，使得镂空的路径填充HollowModel对应的矩形区域。接着使用

canvas.drawRect(rect, mMaimPaint);

将镂空的路径绘制上去。

最后别忘了

canvas.restore();

mMaimPaint.setXfermode(null);

恢复画布和画笔的状态。

然后onDraw的第47行把这个layer绘制到canvas默认的layer上去：

 canvas.restoreToCount(layerId);

onDraw最后的

 //绘制选择图片高亮边框

            for (PictureModel pictureModel : mPictureModels) {

                if (pictureModel.isSelect() && mIsNeedHighlight) {

                    canvas.drawRect(getSelectRect(pictureModel), mSelectPaint);

                }

            }

在onTouchEvent中，将通过触摸事件判断哪个图片当前被选择，然后在onDraw中让当前被选择的图片绘制对应的HollowModel的边框。

onDraw到此结束。

再看下onTouchEvent方法：

@Override

    public boolean onTouchEvent(MotionEvent event) {

        if (mPictureModels == null || mPictureModels.size() == 0) {

            return true;

        }

        switch (event.getActionMasked()) {

            case MotionEvent.ACTION_POINTER_DOWN:



                //双指模式

                if (event.getPointerCount() == 2) {

                    //mPicModelTouch为当前触摸到的操作图片模型

                    mPicModelTouch = getHandlePicModel(event);

                    if (mPicModelTouch != null) {

                        // mPicModelTouch.setSelect(true);

                        //重置图片的选中状态

                        resetNoTouchPicsState();

                        mPicModelTouch.setSelect(true);

                        //两手指的距离

                        mLastFingerDistance = distanceBetweenFingers(event);

                        //两手指间的角度

                        mLastDegree = rotation(event);

                        mIsDoubleFinger = true;

                        invalidate();

                    }

                }

                break;



            //单指模式

            case MotionEvent.ACTION_DOWN:

                //记录上一次事件的位置

                mLastX = event.getX();

                mLastY = event.getY();

                //记录Down事件的位置

                mDownX = event.getX();

                mDownY = event.getY();

                //获取被点击的图片模型

                mPicModelTouch = getHandlePicModel(event);

                if (mPicModelTouch != null) {

                    //每次down重置其他picture选中状态

                    resetNoTouchPicsState();

                    mPicModelTouch.setSelect(true);

                    invalidate();

                }

                break;

            case MotionEvent.ACTION_MOVE:

                switch (event.getPointerCount()) {

                    //单指模式

                    case 1:

                        if (!mIsDoubleFinger) {

                            if (mPicModelTouch != null) {

                                //记录每次事件在x,y方向上移动

                                int dx = (int) (event.getX() - mLastX);

                                int dy = (int) (event.getY() - mLastY);

                                int tempX = mPicModelTouch.getPictureX() + dx;

                                int tempY = mPicModelTouch.getPictureY() + dy;



                                if (checkPictureLocation(mPicModelTouch, tempX, tempY)) {

                                    //检查到没有越出镂空部分才真正赋值给mPicModelTouch

                                    mPicModelTouch.setPictureX(tempX);

                                    mPicModelTouch.setPictureY(tempY);

                                    //保存上一次的位置，以便下次事件算出相对位移

                                    mLastX = event.getX();

                                    mLastY = event.getY();

                                    //修改了mPicModelTouch的位置后刷新View

                                    invalidate();

                                }

                            }

                        }

                        break;



                    //双指模式

                    case 2:

                        if (mPicModelTouch != null) {

                            //算出两根手指的距离

                            double fingerDistance = distanceBetweenFingers(event);

                            //当前的旋转角度

                            double currentDegree = rotation(event);

                            //当前手指距离和上一次的手指距离的比即为图片缩放比

                            float scaleRatioDelta = (float) (fingerDistance / mLastFingerDistance);

                            float rotateDelta = (float) (currentDegree - mLastDegree);



                            float tempScaleX = scaleRatioDelta * mPicModelTouch.getScaleX();

                            float tempScaleY = scaleRatioDelta * mPicModelTouch.getScaleY();

                            //对缩放比做限制

                            if (Math.abs(tempScaleX) < 3 && Math.abs(tempScaleX) > 0.3 &&

                                    Math.abs(tempScaleY) < 3 && Math.abs(tempScaleY) > 0.3) {

                                //没有超出缩放比才真正赋值给模型

                                mPicModelTouch.setScaleX(tempScaleX);

                                mPicModelTouch.setScaleY(tempScaleY);

                                mPicModelTouch.setRotate(mPicModelTouch.getRotate() + rotateDelta);

                                //修改模型之后，刷新View

                                invalidate();

                                //记录上一次的两手指距离以便下次计算出相对的位置以算出缩放系数

                                mLastFingerDistance = fingerDistance;

                            }

                            //记录上次的角度以便下一个事件计算出角度变化值

                            mLastDegree = currentDegree;

                        }

                        break;

                }

                break;

            //两手指都离开屏幕

            case MotionEvent.ACTION_UP:

//                for (PictureModel pictureModel : mPictureModels) {

//                    pictureModel.setSelect(false);

//                }

                mIsDoubleFinger = false;

                double distance = getDisBetweenPoints(event);



                if (mPicModelTouch != null) {

                    //是否属于滑动，非滑动则改变选中状态

                    if (distance < ViewConfiguration.getTouchSlop()) {

                        if (mPicModelTouch.isLastSelect()) {

                            mPicModelTouch.setSelect(false);

                            mPicModelTouch.setLastSelect(false);

                            if (mPictureCancelSelectListner != null) {

                                mPictureCancelSelectListner.onPictureCancelSelect();

                            }



                        } else {

                            mPicModelTouch.setSelect(true);

                            mPicModelTouch.setLastSelect(true);

                            //选中的回调

                            if (mPictureSelectListener != null) {

                                mPictureSelectListener.onPictureSelect(mPicModelTouch);

                            }

                        }

                        invalidate();

                    } else {

                        //滑动则取消所有选择的状态

                        mPicModelTouch.setSelect(false);

                        mPicModelTouch.setLastSelect(false);

                        //取消状态之后刷新View

                        invalidate();

                    }

                } else {

                    //如果没有图片被选中，则取消所有图片的选中状态

                    for (PictureModel pictureModel : mPictureModels) {

                        pictureModel.setLastSelect(false);

                    }

                    //没有拼图被选中的回调

                    if (mPictureNoSelectListener != null) {

                        mPictureNoSelectListener.onPictureNoSelect();

                    }

                    //取消所有图片选中状态后刷新View

                    invalidate();

                }

                break;

            //双指模式中其中一手指离开屏幕，取消当前被选中图片的选中状态

            case MotionEvent.ACTION_POINTER_UP:

                if (mPicModelTouch != null) {

                    mPicModelTouch.setSelect(false);

                    invalidate();

                }

        }

        return true;

    }

虽然比较长，但是并不难理解，基本是比较套路化的东西，看注释应该就能懂。

总的流程就是：
首先在Down事件：
不管单手还是双手模式，都将选择当前点击到的图片模型，这也是为了以后的事件中可以修改选中的图片模型以在onDraw中改变图片的显示。

Move事件中：
单手模式的话，针对每个MOVE事件带来的位移给PictureModel的位置赋值，然后就调用invalidate进行刷新界面。

如果是双手模式，则根据每个MOVE事件带来的角度变化和两个手指间的距离变化分别给PictureModel的角度和缩放比赋值，然后调用invalidate进行刷新界面。

Up事件：
单指模式下，先判断是否已经滑动过（滑动距离小于ViewConfiguration.getTouchSlop()就认为不是滑动而是点击），不是滑动的话就以改变当前的图片选中状态处理，切换选中状态。
是滑动过的话则取消所有图片的选中状态。

双指状态下均取消所有图片的选中状态。

这里为了使得缩放旋转体验更好，所以只要手指DOWN事件落在镂空部分中，在没有Up事件的情况下即使滑出镂空部分仍然可以继续对选中的图片进行操作，避免因为镂空部分小带来的操作不便，这也和海报工厂的效果一致。

源码地址：github.com/yanyinan/Ji…

• 知识点：绘制、动画、多状态监听

国际惯例，先看效果图：

• 具体效果就是吃豆人会根据吃不同颜色的豆子改变身体的颜色。

1、绘制静态吃豆人、豆豆、眼睛

首先，我们需要将这个静态的吃豆人绘制出来，我们可以把吃豆人看做是一个实心圆弧，豆豆和眼睛就是一个圆。

关键代码：

//画头

_paint

  ..color = color.value

  ..style = PaintingStyle.fill;

var rect = Rect.fromCenter(

    center: Offset(0, 0), width: size.width, height: size.height);

/// 起始角度

var a =  40 / 180 * pi;

// 绘制圆弧

canvas.drawArc(rect, 0, 2 * pi - a * 2, true, _paint);



// 画豆豆

canvas.drawOval(

    Rect.fromCenter(

        center: Offset(

            size.width / 2 +

                ddSize -

                angle2.value * (size.width / 2 + ddSize),

            0),

        width: ddSize,

        height: ddSize),

    _paint..color = color2.value);



//画眼睛

canvas.drawOval(

    Rect.fromCenter(

        center: Offset(0, -size.height / 3), width: 8, height: 8),

    _paint..color = Colors.black87);

动画属性： 嘴巴的张合：通过圆弧的角度不断改变实现，豆豆移动：从头的右侧源源不断的有豆子向左移动，改变豆豆x轴的坐标即可，接下来我们让吃豆人动起来吧。

2、加入动画属性

这里我们需要创建2个动画控制器，一个控制头，一个控制豆豆，我们看到因为头部一开一合属于动画正向执行一次然后再反向执行一次，相当于执行了两次，豆豆的从右边到嘴巴只执行了一次，所以头的执行时间是豆豆执行时间的两倍，嘴巴一张一合才能吃豆子嘛，吃豆完毕，将豆子颜色赋值给头改变颜色，豆子随机获取另一个颜色，不断的吃豆。 这里的绘制状态有多种情况，嘴巴的张合、豆子的平移、颜色的改变都需要进行重新绘制，这里我们可以使用 Listenable.merge方法来进行监听，接受一个Listenable数组，可以将我们需要改变的状态放到这个数组里，返回一个 Listenable赋值给CustomPainter构造函数repaint属性即可，然后在监听只需判断这个Listenable即可。

factory Listenable.merge(List<Listenable?> listenables) = _MergingListenable;

复制代码

关键代码： 动画执行相关。

late Animation<double> animation; // 吃豆人

late Animation<double> animation2; // 豆豆

late AnimationController _controller = AnimationController(

    vsync: this, duration: Duration(milliseconds: 500)); //1s

late AnimationController _controller2 = AnimationController(

    vsync: this, duration: Duration(milliseconds: 1000)); //2s



//初始化吃豆人、豆豆颜色

ValueNotifier<Color> _color = ValueNotifier<Color>(Colors.yellow.shade800);

ValueNotifier<Color> _color2 =

    ValueNotifier<Color>(Colors.redAccent.shade400);



// 动画轨迹

late CurvedAnimation cure = CurvedAnimation(

    parent: _controller, curve: Curves.easeIn); // 动画运行的速度轨迹 速度的变化



@override

void initState() {

  super.initState();

  animation = Tween(begin: 0.2, end: 1.0).animate(_controller)

    ..addStatusListener((status) {

      // dismissed 动画在起始点停止

      // forward 动画正在正向执行

      // reverse 动画正在反向执行

      // completed 动画在终点停止

      if (status == AnimationStatus.completed) {

        _controller.reverse(); //反向执行 100-0

      } else if (status == AnimationStatus.dismissed) {

        _color.value = _color2.value;

        // 获取一个随机彩虹色

        _color2.value = getRandomColor();

        _controller.forward(); //正向执行 0-100

        // 豆子已经被吃了 从新加载豆子动画

        _controller2.forward(from: 0); //正向执行 0-100

      }

    });

animation2 = Tween(begin: 0.2, end: 1.0).animate(_controller2);

  // 启动动画 正向执行

  _controller.forward();

  // 启动动画 0-1循环执行

  _controller2.forward();

  // 这里这样重复调用会导致两次动画执行时间不一致 时间长了就不对应了

  // _controller2.repeat();

}



@override

void dispose() {

  _controller.dispose();

  _controller2.dispose();



  super.dispose();

}



@override

Widget build(BuildContext context) {

  return Center(

      child: CustomPaint(

    size: Size(50, 50),

    painter: Pain2Painter(

        _color,

        _color2,

        animation,

        animation2,

        Listenable.merge([

          animation,

          animation2,

          _color,

        ]),

        ddSize: 8),

  ));

}



// 获取一个随机颜色

Color getRandomColor() {

  Random random = Random.secure();

  int randomInt = random.nextInt(6);

  var colors = <Color>[

    Colors.red,

    Colors.orange,

    Colors.yellow,

    Colors.green,

    Colors.blue,

    Colors.indigo,

    Colors.purple,

  ];

  Color color = colors[randomInt];

  while (color == _color2.value) {

    // 重复再选一个

    color = colors[random.nextInt(6)];

  }

  return color;

}

绘制吃豆人源码：

class Pain2Painter extends CustomPainter {

  final ValueNotifier<Color> color; // 吃豆人的颜色

  final ValueNotifier<Color> color2; // 豆子的的颜色

  final Animation<double> angle; // 吃豆人

  final Animation<double> angle2; // 豆

  final double ddSize; // 豆豆大小

  final Listenable listenable;



  Pain2Painter(

      this.color, this.color2, this.angle, this.angle2, this.listenable,

      {this.ddSize = 6})

      : super(repaint: listenable);

  Paint _paint = Paint();



  @override

  void paint(Canvas canvas, Size size) {

    canvas.clipRect(Offset.zero & size);

    canvas.translate(size.width / 2, size.height / 2);

    // 画豆豆

    canvas.drawOval(

        Rect.fromCenter(

            center: Offset(

                size.width / 2 +

                    ddSize -

                    angle2.value * (size.width / 2 + ddSize),

                0),

            width: ddSize,

            height: ddSize),

        _paint..color = color2.value);

    //画头

    _paint

      ..color = color.value

      ..style = PaintingStyle.fill;



    var rect = Rect.fromCenter(

        center: Offset(0, 0), width: size.width, height: size.height);



    /// 起始角度

    /// angle.value 动画控制器的值 0.2~1 0是完全闭合就是 起始0~360° 1是完全张开 起始 40°~ 280° 顺时针

    var a = angle.value * 40 / 180 * pi;

    // 绘制圆弧

    canvas.drawArc(rect, a, 2 * pi - a * 2, true, _paint);

    //画眼睛

    canvas.drawOval(

        Rect.fromCenter(

            center: Offset(0, -size.height / 3), width: 8, height: 8),

        _paint..color = Colors.black87);

canvas.drawOval(

    Rect.fromCenter(

        center: Offset(-1.5, -size.height / 3 - 1.5), width: 3, height: 3),

    _paint..color = Colors.white);

  }



  @override

  bool shouldRepaint(covariant Pain2Painter oldDelegate) {

    return oldDelegate.listenable != listenable;

  }

}

至此，一个简单的吃豆人加载Loading就完成啦。再也不要到处都是菊花转的样式了。。。

总结

通过这个加载Loading动画可以重新复习下Flutter中绘制、动画的使用的联动使用、还有多状态重绘机制，通过动画还可以改变吃豆的速度和吃豆的时间运动轨迹，有兴趣可以试试哦，希望这篇文章对你有所帮助，喜欢的话点个赞再走呗~

简单来说，Autocomplete 意为 自动填充 。其作用就是在输入时，进行 关键字联想。在输入框下方展示列表，如下所示：注意，这是目前 Flutter 框架内部的组件，非三方组件。目前已收录入 FlutterUnit ，下面效果的源码详见之，大家可以更新查看体验：

FlutterUnit 中	输入时联想效果

下面是动态搜索的效果展示：

1. Autocomplete 组件最简代码

我们先一步步来了解 Autocomplete 组件，先实现如下的最简代码：

使用 Autocomplete 时，必须提供的是 optionsBuilder 参数，另外可以通过 onSelected 回调来监听选中的条目。

Autocomplete<String>(

    optionsBuilder: buildOptions,

    onSelected: onSelected,

)

optionsBuilder 是一个 AutocompleteOptionsBuilder<T> 类型的函数，从下面的定义中可以发现，该函数会回调 TextEditingValue 对象，且返回 FutureOr<Iterable<T>> 。这说明这个函数是一个异步函数，我们可以在此进行网络请求，数据库查询等工作，来返回一个 Iterable<T> 的可迭代对象。

用脚指头想一下也知道，这个可迭代对象，就决定这输入框下面的联想词是哪些。

final AutocompleteOptionsBuilder<T> optionsBuilder;



typedef AutocompleteOptionsBuilder<T extends Object> = 

    FutureOr<Iterable<T>> Function(TextEditingValue textEditingValue);

比如下面通过 searchByArgs 模拟网络请求，通过 args 参数搜索数据，

Future<Iterable<String>> searchByArgs(String args) async{

  // 模拟网络请求

  await Future.delayed(const Duration(milliseconds: 200));

  const List<String> data =  [

    'toly', 'toly49', 'toly42', 'toly56', 

    'card', 'ls', 'alex', 'fan sha',

  ];

 return data.where((String name) => name.contains(args));

}

这样，buildOptions 的逻辑如下，这就完成了 输入--> 搜索 --> 展示联想词 的流程。这也是 Autocomplete 组件最简单的使用。

Future<Iterable<String>> buildOptions( TextEditingValue textEditingValue ) async {

  if (textEditingValue.text == '') {

    return const Iterable<String>.empty();

  }

  return searchByArgs(textEditingValue.text);

}

2. 自定义 Autocomplete 组件内容

其实上面那样的默认样式很丑，而且没有提供 直接 的属性设置样式。所以了解如何自定义是非常关键的，否则只是一个玩具罢了。如下，我们先来实现搜索高亮显示的自定义，其中也包括对输入框的自定义。

Autocomplete 中提供了 fieldViewBuilder 和 optionsViewBuilder 分别用于构造输入框 和 浮层面板 。

如下，代码中通过 _buildOptionsView 和 _buildFieldView 进行相应组件构造：

Autocomplete<String>(

  optionsBuilder: buildOptions,

  onSelected: onSelected,

  optionsViewBuilder: _buildOptionsView,

  fieldViewBuilder: _buildFieldView,

);

如下是 _buildOptionsView 方法的实现，其中会回调 onSelected 回调函数，和 options 数据，我们需要做的就是依靠数据，构建组件进行展示即可。另外，默认浮层面板和输入框底部平齐，可以通过 Padding 进行下移。另外，由于是浮层，展示文字时，上面需要嵌套 Material 组件。

至于高亮某个关键字，下面是我封装的一个小方法，拿来即用。

---->[高亮某些文字]----

final TextStyle lightTextStyle = const TextStyle(

  color: Colors.blue,

  fontWeight: FontWeight.bold,

);

InlineSpan formSpan(String src, String pattern) {

  List<TextSpan> span = [];

  List<String> parts = src.split(pattern);

  if (parts.length > 1) {

    for (int i = 0; i < parts.length; i++) {

      span.add(TextSpan(text: parts[i]));

      if (i != parts.length - 1) {

        span.add(TextSpan(text: pattern, style: lightTextStyle));

      }

    }

  } else {

    span.add(TextSpan(text: src));

  }

  return TextSpan(children: span);

}

另外，对于输入框的构建，通过如下的 _buildFieldView 实现，其中有 _controller 记录一下 TextEditingController，是因为 optionsViewBuilder 回调中并没有回调输入的 arg 字符，所以想要输入的关键字高亮，只能出此下策。这样，在 TextFormField 构建时，你可以指定自己需要的装饰。

到此，我们就实现了上面，输入过程中，浮层面板内容关键字高亮显示的效果。

3.关于 Autocomplete 中的泛型

泛型的作用非常明显，它最主要的是对浮层面板的构建，如果浮层中的条目不止是 String ，我们就需要使用泛型，来提供某个的数据类型。比如下面的效果，其中浮层面板的条目是可以显示更多的信息：

先定义一个数据类 User ，记录信息：

class User {

  final String name;

  final bool man;

  final String image;



  const User(this.name, this.man, this.image);



  @override

  String toString() {

    return 'User{name: $name, man: $man, image: $image}';

  }

}

然后在 Autocomplete 的泛型中使用 User 即可。

这样在 _buildOptionsView 中，回调的就是 User 的可迭代对象。如下。封装一个 _UserItem 组件，对条目进行显示。

4、Autocomplete 源码简看

Autocomplete 本质上依赖于 RawAutocomplete 组件进行构建，可见它是一层简单的封装，简化使用。为我们提供了默认的 optionsViewBuilder 和 fieldViewBuilder ，显示一个很丑的界面。也就是说，如果你了解如何定制这两部分内容，你也就会了 RawAutocomplete 组件。

我们先看一下 Autocomplete 对 optionsViewBuilder 提供的默认显示，其返回的是 _AutocompleteOptions 组件。如下，其实和我们自己实现的也没有太大的区别，只是个默认存在，方便使用的小玩意而已。

另外，对于输入框的构建，使用 _defaultFieldViewBuilder 静态方法完成。

该方法，返回 _AutocompleteField 组件，本质上也就是构建了一个 TextFormField 组件。

对 Autocomplete 来说，只是 RawAutocomplete 套了个马甲，本质上的功能还是在 RawAutocomplete 的状态类中完成的。如下是 _RawAutocompleteState 的部分代码，可以看出这里的浮层面板，是通过 Overlay 实现的，另外通过 CompositedTransformTarget 和 CompositedTransformFollower 对浮层进行定位。

那本文就这样，如果想要简单地实现搜索联想词，Autocomplete 是一个很不错的选择。

正文

了解如何在您的 Flutter 应用程序创建一个扩展面板列表

在本文中，我们将探讨 ExpansionPanelList In Flutter. 。我们将实施一个扩展面板列表演示程序，并学习如何自定义其风格与不同的属性在您的 Flutter 应用程序。

Expansion Panel List:

它是一个类似于 listView 的实质性 Flutter 小部件。它可以只有扩展面板作为儿童。在某些情况下，我们可能需要显示一个列表，其中子元素可以展开/折叠以显示/隐藏一些详细的数据。为了显示这样的列表 flutter，提供了一个名为 ExapansionPanelList 的小部件。

在这个列表中，每个子元素都是 expsionpanel 小部件。在这个列表中，我们不能使用不同的窗口小部件作为子窗口。我们可以借助于 expsioncallback 属性来处理事物的状态调整(扩展或崩溃)。

演示模块:

这个演示视频显示了如何在一个 Flutter 扩展面板清单。它显示如何扩展面板列表将工作在您的 Flutter 应用程序。它显示了一个列表，在这个列表中孩子们可以展开/折叠以显示/隐藏一些详细信息。它会显示在你的设备上。

Constructor:

要使用 ExpansionPanelList，需要调用下面的构造函数:

const ExpansionPanelList({

  Key? key,

  this.children = const <ExpansionPanel>[],

  this.expansionCallback,

  this.animationDuration = kThemeAnimationDuration,

  this.expandedHeaderPadding = _kPanelHeaderExpandedDefaultPadding,

  this.dividerColor,

  this.elevation = 2,

})

Properties:

ExpansionPanelList 的一些属性如下:

• > children: 此属性用于扩展面板 List 的子元素。它们的布局类似于[ListBody]。


• > expansionCallback: 此属性用于每当按下一个展开/折叠按钮时调用的回调。传递给回调的参数是按下的面板的索引，以及面板当前是否展开。


• > animationDuration: 这个属性用于展开或折叠时，我们可以观察到一些动画在一定时间内发生。我们可以通过使用扩展面板 List 的 animationDuration 属性来更改持续时间。我们只需要提供以微秒、毫秒或分钟为单位的持续时间值。


• > expandedHeaderPadding: 此属性用于展开时围绕面板标头的填充。默认情况下，16px 的空间是在扩展期间垂直添加到标题(上面和下面)。


• > dividerColor: 当[ expsionpanel.isexpanded ]为 false 时，此属性用于定义分隔符的颜色。如果‘ dividerColor’为空，则使用[ DividerThemeData.color ]。如果为 null，则使用[ ThemeData.dividerColor ]。


• > elevation: 此属性用于在扩展时定义[ expsionpanel ]的提升。这使用[ kElevationToShadow ]来模拟阴影，它不使用[ Material ]的任意高度特性。默认情况下，仰角的值为 2。

如何实现 dart 文件中的代码:

你需要分别在你的代码中实现它:

在 lib 文件夹中创建一个名为 main.dart 的新 dart 文件。

首先，我们将生成虚拟数据。我们将创建一个列表 <Map<String, dynamic>> 并添加变量 _ items 等于生成一个列表。在这个列表中，我们将添加 number、 id、 title、 description 和 isExpanded。

List<Map<String, dynamic>> _items = List.generate(

    10,

        (index) => {

      'id': index,

      'title': 'Item $index',

      'description':

      'This is the description of the item $index. Lorem Ipsum is simply dummy text of the printing and typesetting industry.',

      'isExpanded': false

    });

在正文中，我们将添加 ExpansionPanelList() 小部件。在这个小部件中，我们将添加标高为 3，在括号中添加 expsioncallback 索引和 isExpanded。我们将添加 setState ()方法。在方法中，我们将添加 _ items [ index ][‘ isexpanded’] equal not isExpanded。

ExpansionPanelList(

  elevation: 3,

  expansionCallback: (index, isExpanded) {

    setState(() {

      _items[index]['isExpanded'] = !isExpanded;

    });

  },

  animationDuration: Duration(milliseconds: 600),

  children: _items

      .map(

        (item) => ExpansionPanel(

      canTapOnHeader: true,

      backgroundColor:

      item['isExpanded'] == true ? Colors._cyan_[100] : Colors._white_,

      headerBuilder: (_, isExpanded) => Container(

          padding:

          EdgeInsets.symmetric(vertical: 15, horizontal: 30),

          child: Text(

            item['title'],

            style: TextStyle(fontSize: 20),

          )),

      body: Container(

        padding: EdgeInsets.symmetric(vertical: 15, horizontal: 30),

        child: Text(item['description']),

      ),

      isExpanded: item['isExpanded'],

    ),

  )

      .toList(),

),

我们将增加 animationDuration 为 600 毫秒。我们将添加子节点，因为 variable_items 映射到 expsionpanel ()小部件。在这个小部件中，我们将添加 canTapOnHeader was true，backgroundColor，headerBuilder 返回 Container ()小部件。在这个小部件中，我们将添加填充，并在其子属性上添加文本。在正文中，我们将添加 Conatiner 及其子属性，我们将添加文本。当我们运行应用程序时，我们应该获得屏幕输出，就像下面的屏幕截图一样。

全部代码

import 'package:flutter/material.dart';

import 'package:flutter_expansion_panel_list/splash_screen.dart';



void main() {

  runApp(MyApp());

}



class MyApp extends StatelessWidget {

  @override

  Widget build(BuildContext context) {

    return MaterialApp(

        debugShowCheckedModeBanner: false,

        theme: ThemeData(

          primarySwatch: Colors._teal_,

        ),

        home: Splash());

  }

}



class HomePage extends StatefulWidget {

  const HomePage({Key? key}) : super(key: key);



  @override

  _HomePageState createState() => _HomePageState();

}



class _HomePageState extends State<HomePage> {

  List<Map<String, dynamic>> _items = List.generate(

      10,

          (index) => {

        'id': index,

        'title': 'Item $index',

        'description':

        'This is the description of the item $index. Lorem Ipsum is simply dummy text of the printing and typesetting industry.',

        'isExpanded': false

      });



  @override

  Widget build(BuildContext context) {

    return Scaffold(

      appBar: AppBar(

        automaticallyImplyLeading: false,

        title: Text('Flutter Expansion Panel List Demo'),

      ),

      body: SingleChildScrollView(

        child: ExpansionPanelList(

          elevation: 3,

          // Controlling the expansion behavior

          expansionCallback: (index, isExpanded) {

            setState(() {

              _items[index]['isExpanded'] = !isExpanded;

            });

          },

          animationDuration: Duration(milliseconds: 600),

          children: _items

              .map(

                (item) => ExpansionPanel(

              canTapOnHeader: true,

              backgroundColor:

              item['isExpanded'] == true ? Colors._cyan_[100] : Colors._white_,

              headerBuilder: (_, isExpanded) => Container(

                  padding:

                  EdgeInsets.symmetric(vertical: 15, horizontal: 30),

                  child: Text(

                    item['title'],

                    style: TextStyle(fontSize: 20),

                  )),

              body: Container(

                padding: EdgeInsets.symmetric(vertical: 15, horizontal: 30),

                child: Text(item['description']),

              ),

              isExpanded: item['isExpanded'],

            ),

          )

              .toList(),

        ),

      ),

    );

  }

}

结语

在本文中，我已经简单地解释了 ExpansionPanelList 的基本结构; 您可以根据自己的选择修改这段代码。这是一个小的介绍扩展/panellist On User Interaction 从我这边，它的工作使用 Flutter。

当你点进来看这篇文章时，应该和我一样在思考如何优雅的请求网络、处理加载状态、处理加载异常。希望这篇文章和案例能给你带来不一样的思考。

解决的问题

效果展示

为了演示请求失败的处理，特意在wanApi抛了两次错

正文

搜索一下关于flutter网络封装的多半都是dio相关的封装，简单的封装、复杂的封装百花齐放，思路都是工具类的封装。今天换一个思路来实现，引入repository对数据层进行操作，在repository里使用dio作为一个数据源供repository使用，需要使用数据就对repository进行操作不直接调用数据源（在repositoy里是不允许直接操作数据源的）。用WanAndroid的接口写个示例demo

定义数据源

使用retrofit作为数据源，感兴趣的小伙伴可以看下retrofit这个库

class _WanApi implements WanApi {
  _WanApi(this._dio, {this.baseUrl}) {
    baseUrl ??= 'https://www.wanandroid.com';
  }

  final Dio _dio;

  String? baseUrl;

  @override
  Future<BannerModel> getBanner() async {
    const _extra = <String, dynamic>{};
    final queryParameters = <String, dynamic>{};
    final _headers = <String, dynamic>{};
    final _data = <String, dynamic>{};
    final _result = await _dio.fetch<Map<String, dynamic>>(
        _setStreamType<BannerModel>(
            Options(method: 'GET', headers: _headers, extra: _extra)
                .compose(_dio.options, '/banner/json',
                    queryParameters: queryParameters, data: _data)
                .copyWith(baseUrl: baseUrl ?? _dio.options.baseUrl)));
    final value = BannerModel.fromJson(_result.data!);
    return value;
  }

  @override
  Future<TopArticleModel> getTopArticle() async {
    const _extra = <String, dynamic>{};
    final queryParameters = <String, dynamic>{};
    final _headers = <String, dynamic>{};
    final _data = <String, dynamic>{};
    final _result = await _dio.fetch<Map<String, dynamic>>(
        _setStreamType<TopArticleModel>(
            Options(method: 'GET', headers: _headers, extra: _extra)
                .compose(_dio.options, '/article/top/json',
                    queryParameters: queryParameters, data: _data)
                .copyWith(baseUrl: baseUrl ?? _dio.options.baseUrl)));
    final value = TopArticleModel.fromJson(_result.data!);
    return value;
  }

  @override
  Future<PopularSiteModel> getPopularSite() async {
    const _extra = <String, dynamic>{};
    final queryParameters = <String, dynamic>{};
    final _headers = <String, dynamic>{};
    final _data = <String, dynamic>{};
    final _result = await _dio.fetch<Map<String, dynamic>>(
        _setStreamType<PopularSiteModel>(
            Options(method: 'GET', headers: _headers, extra: _extra)
                .compose(_dio.options, '/friend/json',
                    queryParameters: queryParameters, data: _data)
                .copyWith(baseUrl: baseUrl ?? _dio.options.baseUrl)));
    final value = PopularSiteModel.fromJson(_result.data!);
    return value;
  }
  
  RequestOptions _setStreamType<T>(RequestOptions requestOptions) {
    if (T != dynamic &&
        !(requestOptions.responseType == ResponseType.bytes ||
            requestOptions.responseType == ResponseType.stream)) {
      if (T == String) {
        requestOptions.responseType = ResponseType.plain;
      } else {
        requestOptions.responseType = ResponseType.json;
      }
    }
    return requestOptions;
  }
}

repository封装

Resource是封装的资源加载状态类，用于包装资源

enum ResourceState { loading, failed, success }



class Resource {

  final T? data;

  final ResourceState state;

  final dynamic error;

  Resource._({required this.state, this.error, this.data});



  factory Resource.failed(dynamic error) {

    return Resource._(state: ResourceState.failed, error: error);

  }



  factory Resource.success(T data) {

    return Resource._(state: ResourceState.success, data: data);

  }



  factory Resource.loading() {

    return Resource._(state: ResourceState.loading);

  }



  bool get isLoading => state == ResourceState.loading;

  bool get isSuccess => state == ResourceState.success;

  bool get isFailed => state == ResourceState.failed;

}

接下来我们在Repository里使用WanApi来封装，我们通过流的方式返回了资源加载的状态可供View层根据状态展示不同的界面，使用try-catch保证网络请求的健壮性

class WanRepository extends BaseRepository {

  late WanApi wanApi = GetInstance().find();

  ///获取首页所需的所有数据

  Stream> homeData() async* {

    //加载中

    yield Resource.loading();

    try {

      var result = await Future.wait([

        wanApi.getBanner(),

        wanApi.getPopularSite(),

        wanApi.getTopArticle()

      ]);

      final BannerModel banner = result[0];

      final PopularSiteModel site = result[1];

      final TopArticleModel article = result[2];

      //加载成功

      yield Resource.success(

          HomeDataMapper(site.data, banner.data, article.data));

    } catch (e) {

      //加载失败

      yield Resource.failed(e);

    }

  }

}

咋一看感觉没啥问题细思之下问题很多，每一个请求还多了try-catch以外那么多的模板方法，实际开发中只写try包裹的内容才符合摸鱼佬的习惯。ok，我们把模板方法提取出来到一个公共方法里去，就变成了这样：

class WanRepository extends BaseRepository {

  late WanApi wanApi = GetInstance().find();

  ///获取首页所需的所有数据

  Stream> homeData() async* {

    ///定义加载函数

    loadHomeData()async*{

      var result = await Future.wait([

        wanApi.getBanner(),

        wanApi.getPopularSite(),

        wanApi.getTopArticle()

      ]);

      final BannerModel banner = result[0];

      final PopularSiteModel site = result[1];

      final TopArticleModel article = result[2];

      //加载成功

      yield Resource.success(

          HomeDataMapper(site.data, banner.data, article.data));

    }

    ///将加载函数放在一个包装器里执行

    yield* MyWrapper.customStreamWrapper(loadHomeData);

  }

}

得益于Dart中函数可以作为参数传递，所以我们可以定义一个包装方法，入参是具体业务的函数，出参和业务函数一致，在这个方法里可以处理各种异常，甚至可以实现通用的请求重试（只需要在失败的时候弹窗提醒用户重试，获得认可后再次执行function就可以了，更关键的是此时状态管理里对repository的调用依旧是完整的，也就是说这是一个通用的重试功能）
包装器代码：

class MyWrapper {

  //流的方式

  static Stream> customStreamWrapper(

      Stream> Function() function,

      {bool retry = false}) async* {

    yield Resource.loading();

    try {

      var result = function.call();

      await for(var data in result){

        yield data;

      }

    } catch (e) {

      //重试代码

      if (retry) {

        var toRetry = await Get.dialog(const RequestRetryDialog());

        if (toRetry == true) {

          yield* customStreamWrapper(function,retry: retry);

        } else {

          yield Resource.failed(e);

        }

      } else {

        yield Resource.failed(e);

      }

    }

  }

}

其实就是把相同的地方封装成一个通用方法，不同的地方单独拎出来编写，然后作为一个参数传到包装器里执行。显然这样的方法却不够优雅，每次在写repository的时候都得创建一个函数在里面编写请求数据的逻辑然后交给包装器执行。我们肯定希望repository里代码长成这个样子：

@Repo()

abstract class WanRepository extends BaseRepository {

  late WanApi wanApi = GetInstance().find();



  ///获取首页所需的所有数据

  @ProxyCall()

  @Retry()

  Stream> homeData() async* {

    var result = await Future.wait(

        [wanApi.getBanner(), wanApi.getPopularSite(), wanApi.getTopArticle()]);

    final BannerModel banner = result[0];

    final PopularSiteModel site = result[1];

    final TopArticleModel article = result[2];

    yield Resource.success(

        HomeDataMapper(site.data, banner.data, article.data));

  }

}