Android-Kotlin VS Flutter-Dart - 自定义控制摇杆

前言

比较Kotlin OR Flutter 谁好, 就像在比较[程序员]和[画家]谁[唱歌]比较好听
Kotlin是语言，完美平复了我对Java的恨铁不成钢的心情。
Flutter是框架，完美实现了我一套代码，六端运行的梦想。

Flutter是和Android一个等级的，它们都是运行在设备上的框架
Kotlin是和Dart一个等级的，它们都是新时代的编程语言  
那谁更香? 别问，问就都香。 

如果你还在Kotlin和Flutter之间犹豫不定  
那我就为你指条路: 去研究[数据结构和算法分析]
研究到想吐的时候再来选择，如果还是在Kotlin和Flutter犹豫不定  
那我就为你指条路: 去研究[数据结构和算法分析]
研究到想吐的时候再来选择，如果还是在Kotlin和Flutter犹豫不定  
那我就为你指条路: 去研究[数据结构和算法分析]
研究到想吐的时候再来选择，如果还是在Kotlin和Flutter犹豫不定  
...
这样最终你就会成为一个[数据结构和算法分析]的大师
而这样的大师拥有同时掌握Kotlin和Flutter的耐力和技术支持

通过本篇想说明: 不是什么技术好不好，而是你能干什么。
就像作文模板、中文汉字你都认识，却无法写出流芳百世的佳作
限制你的并非是语言/框架本身，而是你的思维分析和解决问题的能力

王侯将相宁有种乎? 何必贴上好坏的标签，非争个天下第一？ 香不就行了吗!

Kotlin

Flutter

Android-Kotlin 篇

一、自定义控件

1.类的定义

 [1] 类通过[class]关键字定义，类名[大驼峰]  
 [2] 构造器关键字[constructor],可直接跟在类名后  
 [3] 继承通过 : 指定父类

class HandleView constructor(context: Context, attrs: AttributeSet? = null) : View(context, attrs){

}

2.初始函数与变量定义

[1] 通过[var]关键字指定变量, 
[2] 通过[privite]关键字修饰私有权限
[3] 创建对象[不需要] new 关键字
[4] 一条语句的末尾[不需要] ; 
[5] init代码块内可以盛放数据初始逻辑
[6] 对于对象的get/set方法,可使用简写方式

class HandleView constructor(context: Context, attrs: AttributeSet? = null) : View(context, attrs){

    private var paint:Paint = Paint()

    init {
        paint.color = Color.BLUE
        paint.isAntiAlias=true
        paint.style=Paint.Style.FILL
    }
}

3.方法的覆写

[1] 方法的关键字[fun]
[2] 复写的关键字[override]
[3] 入参格式 [名称:类型 ]

class HandleView constructor(context: Context, attrs: AttributeSet? = null) : View(context, attrs){
   //英雄所见...
    override fun onDraw(canvas: Canvas) {
        super.onDraw(canvas)
        canvas.drawCircle(100f,100f,50f,paint)
    }
}

4.使用自定义控件

这里先直接放在setContentView里看下效果

class MainActivity : AppCompatActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(HandleView(this))
    }
}

二、事件响应

如下图，在移动时会触发事件，根据事件来处理小圆的坐标
当超越区域时，对其进行限定。放手时回到中心

1.变量介绍

zoneR:背景区域大小，即限定摇杆的区域
handleR:摇杆大小 centerX,centerY摇杆中心偏移

private var zoneR: Float = 150f
private var handleR: Float = 80f
priate var centerX: Float = 0f
private var centerY: Float = 0f

2.绘制圆

绘制圆时，移动了一下画布，将画布左上角和中心重合

[1] 当函数返回值只要一行时，可以直接用 = 

override fun onDraw(canvas: Canvas) {
    super.onDraw(canvas)
    canvas.translate(maxR(), maxR())
    paint.alpha = 100
    canvas.drawCircle(0f, 0f, zoneR, paint)
    paint.alpha = 150
    canvas.drawCircle(centerX, centerY, handleR, paint)
}

fun maxR():Float = zoneR + handleR

3.事件处理

核心就是处理好小圆的圆心在画布坐标系的位置。
分为在圆内和圆外两种情况:
触点在域内，根据触点位置确定摇杆圆心位置
触点在域外，摇杆圆心位置在域的边缘游走

在parser方法里，实现通过atan2获取夹角(图左)
然后转化为通常的坐标系(图左),由于再根据画布坐标系校正90°

override fun onTouchEvent(event: MotionEvent): Boolean {
    when (event.action) {
        MotionEvent.ACTION_UP -> reset()
        else -> parser(event)
    }
    invalidate()
    return true
}

private fun reset() {
    centerX = 0f
    centerY = 0f
}

private fun parser(event: MotionEvent) {
    centerX = event.x - maxR()
    centerY = event.y - maxR()
    var rad = atan2(centerX, centerY)
    if(centerX<0){
        rad += 2*PI.toFloat()
    }
    val thta = rad- PI.toFloat()/2  //旋转坐标系90度
    if (sqrt(centerX * centerX + centerY * centerY) > zoneR) {
        centerX =  zoneR * cos(thta)
        centerY = -zoneR * sin(thta)
    }
}

4.监听器回调

现在数据是在View内部的,需要将它们暴露出去，比如旋转的角度，位移百分比
Java中设置监听，还要啰嗦一堆弄接口，校验回调。
由于Kotlin函数也是类型，回调起来就so easy

[1] (rad:Float, offset:Float) -> Unit 代表一种函数类型

lateinit var onHandleListener:(rad:Float, offset:Float) -> Unit

private fun parser(event: MotionEvent) {
    //英雄所见...
    val len = sqrt(centerX * centerX + centerY * centerY)
    onHandleListener(rad,len/zoneR)
}

使用:

[1] Kotlin 的lambda 表达式形式如下

handleView.onHandleListener= {
    rad,offset ->
    Log.e("MainActivity","角度${rad*180/Math.PI},位移:${offset}")        
}

Flutter-Dart 篇

一、自定义组件

1. 继承自StatefulWidget

很明显，移动中需要改变状态，使用基础自继承自StatefulWidget

 [1] 类通过[class]关键字定义，类名[大驼峰]  
 [2] 继承通过 [extends] 指定父类
 [3] final 修饰不可变量
 [4] 构造函数通过 {this.XXX} 初始化变量,可通过具名传参
 [5] 函数只要一行时，通过 => 简写

class HandleWidget extends StatefulWidget {
  final double zoneR;
  final double handleR;

  HandleWidget(
      {this.zoneR = 60.0,
      this.handleR = 30.0});

  @override
  _HandleWidgetState createState() => _HandleWidgetState();
}

2.状态类中操作状态

[1] 覆写可使用 @override 注解
[2] get关键字XXX,可以像一样属性访问XXX
[3] 私有包/类/字段 通过_XXX指定

class _HandleWidgetState extends State<HandleWidget> {
  double zoneR;
  double handleR;
  double centerX=0.0;
  double centerY=0.0;
  
  @override
  void initState() {
    zoneR=widget.zoneR;
    handleR=widget.handleR;
    super.initState();
  }
  
  @override
  Widget build(BuildContext context) {
    return CustomPaint(
          painter: _HandleView(zoneR: zoneR, handleR: handleR, centerX: centerX, centerY: centerY)
          )
    );
  }
  double get maxR => zoneR + handleR;
}

3 画板

[1] ..级联操作，相当于该对象

class _HandleView extends CustomPainter {
  var _paint = Paint();
  var zoneR;
  var handleR;
  var centerX;
  var centerY;
  _HandleView({this.zoneR, this.handleR, this.centerX, this.centerY}) {
    _paint
      ..color = Colors.blue
      ..style = PaintingStyle.fill
      ..isAntiAlias = true;
  }
  double get maxR => zoneR + handleR;
  @override
  void paint(Canvas canvas, Size size) {
    canvas.translate(maxR, maxR);
    _paint.color = _paint.color.withAlpha(100);
    canvas.drawCircle(Offset(0, 0), zoneR, _paint);
    _paint.color = _paint.color.withAlpha(150);
    canvas.drawCircle(Offset(centerX, centerY), handleR, _paint);
  }
  @override
  bool shouldRepaint(CustomPainter oldDelegate) {
    return true;
  }
}

二、事件处理

通过GestureDetector进行嵌套，即可让任意组件响应事件

@override
Widget build(BuildContext context) {
  return GestureDetector(
    onPanEnd: (d) => reset(),
    onPanUpdate: (d) => parser(d.localPosition),
    child: Container(
      width: MediaQuery.of(context).size.width,
      height: MediaQuery.of(context).size.height,
      child: CustomPaint(
        painter: _HandleView(
            zoneR: zoneR,
            handleR: handleR,
            centerX: centerX,
            centerY: centerY),
      ),
    ),
  );
}

2.处理逻辑

逻辑和上面是一毛一样的，所以，你悟到了什么?

reset() {
  centerX = 0;
  centerY = 0;
  setState(() {});
}

parser(Offset offset) {
  centerX = offset.dx - maxR;
  centerY = offset.dy - maxR;
  var rad = atan2(centerX, centerY);
  if (centerX < 0) {
    rad += 2 * pi;
  }
  var thta = rad - pi / 2; //旋转坐标系90度
  if (sqrt(centerX * centerX + centerY * centerY) > zoneR) {
    centerX = zoneR * cos(thta);
    centerY = -zoneR * sin(thta);
  }
  setState(() {});
}

3.监听器回调

[1] 调用函数对象 Function(double,double) onHandleListener; 

class HandleWidget extends StatefulWidget {
  final double zoneR;
  final double handleR;
  final Function(double,double) onHandleListener;

  HandleWidget({this.zoneR = 60.0, this.handleR = 30.0,this.onHandleListener});
  @override
  _HandleWidgetState createState() => _HandleWidgetState();
}

parser(Offset offset) {
  //英雄所见...
  var len = sqrt(centerX * centerX + centerY * centerY);
  if(widget.onHandleListener!=null) widget.onHandleListener(rad,len/zoneR);
  setState(() {});
}

两种实现的核心是什么？也就那一个解析的过程
如果过程都明白，你管它是Kotlin还是Flutter,就是js也可以在浏览器上画出来
你需要学的从不是使用框架/语言的能力，而是思维分析和解决问题的能力
限制你的并非是框架/语言，而是你贫瘠的想象力、控制力、创造力
Flutter 可以用两天就能上手，Kotlin用一天就能了解语法
之后的是你的固有瓶颈，而非框架/语言的问题，知道做什么是最重要的
好了，如果你还在犹豫，你可以去研究[数据结构和算法分析]了，吐了再回来。

尾声

Kotlin和Dart的语法都非常简洁。Android本身的View体系比较臃肿，毕竟放在xml里，沟通起来需要费些劲
Flutter组件出来起来非常灵活，复用非常棒。最好的是属性可以很容易修改
Android里自定义View的属性挺麻烦，增加、删除、修改都费劲
Kotlin无可挑剔，除了移动端，Spring运用，还能玩js
Flutter也无可挑剔，UI写起来非常爽，可以处理数据，管理状态，六端同开，前途无量
还在犹豫Flutter移动开发的人，现在Flutter对于桌面的支持，已经远远超过了你的想象。