当前位置：首页 > article >正文

flutter dart mixin 姿势

article 2024/11/5 9:35:42

在日常搬砖过程中经常会有页面或者功能可以共用或者 相互依赖 的情况，这时候我们可以 合理使用混入功能。用来共用页面或者逻辑减少代码冗余：

1.基本的变量，方法共用与重载变量的重新赋值

mixin 混入之后实际上就是一个整体，混入的顺序 重写方法 变量重新赋值 都会对整理产生影响。

mixin Swimmer {
  String name = '海豚';
  void swim() {
    print("$name 会游泳");
  }
}

mixin Flyer {
  String name = '燕子';
  void fly() {
    print("$name 会飞");
  }

  void eat() {
    print("eat $name 喜欢吃虫子");
  }
}

在 widget 中的使用：

class _PageMixinState extends State<PageMixin> with Swimmer, Flyer {
  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    swim(); // step 1
    fly();  // step 2

    name = '大猩猩'; // step 3
    swim(); // step 4
    fly();  // step 5
    eat();  // step 6
  }

  // step 7
  @override
  void eat() {
    // TODO: implement eat
    super.eat(); //调用父类方法 也可以不用
    print("eat $name 喜欢吃香蕉");
  }

  @override
  Widget build(BuildContext context) {
    return const Placeholder();
  }
}


对应的输出：
I/flutter (23523): 燕子 会游泳
I/flutter (23523): 燕子 会飞
I/flutter (23523): 大猩猩 会游泳
I/flutter (23523): 大猩猩 会飞
I/flutter (23523): eat 大猩猩 喜欢吃虫子
I/flutter (23523): eat 大猩猩 喜欢吃香蕉

mixin 混入顺序对变量的影响

燕子会游泳
燕子会飞

Swimmer Flyer 有各自的方法 分别是 swim() 和 fly(), 但是他们有同名的变量 name, 由于顺序原因 Flyer 中 name 变量得以保留， 最终变成燕子会游泳了，

大猩猩会游泳
大猩猩会飞

我们在 step 3 中我们对 name 重新赋值之后，最终变成大猩猩会飞

eat 大猩猩喜欢吃虫子
eat 大猩猩喜欢吃香蕉

我们在 step 7 中对 eat 函数重写，并且调用 super.eat(); 此时 Flyer 中的 eat() 方法也会被调用，然而 name 还是 setp3 中被复制的值

2.类型约束，访问约束类型变量，方法

有时候我们编写混类的时候，需要在 mixin 类中别的类中的方法或者变量，例如： 调用StatefulWidget 方法 setState 使 Widget 刷新。这个时候我们可以启用约束，这样就能在 mixin 中操作对应的属性或者方法
import 'package:flutter/cupertino.dart';

mixin Count<T extends StatefulWidget> on State<T> {
  int countTime = 60;
  countNum() {
    if (countTime > 1) {
      setState(() {
        countTime--;
      });
    }
  }
}
调用 Widget
class _PageMixinState extends State<PageMixin> with Count {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Text('$countTime'),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          countNum();
        },
      ),
    );
  }
}
这样就能在 mixin 方法中调用 setState 刷新 widget

3.mixin 中访问另一个 mixin 变量，方法 on 关键字

由于我们不会吧所有的共用功能写在一个 mixin 中，多个 mixin 可能存在相互依赖的关系：
mixin Work on WakingUp, Breakfast {
  doWork() {
    doWakingUp();
    makeBreakfast();
    print('开始上班 搬砖中 要搬一整天');
  }
}

mixin WakingUp {
  doWakingUp() {
    print('闹钟响了要起床了');
  }
}

mixin Breakfast {
  makeBreakfast() {
    print('开火做法');
  }
}
调用：
class _PageMixinState extends State<PageMixin> with WakingUp, Breakfast, Work {
  @override
  void initState() {
    /// 总的调用
    doWork();
    // TODO: implement initState
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return const Scaffold(
      body: Center(),
    );
  }
}


输出：
I/flutter (23523): 闹钟响了要起床了
I/flutter (23523): 开火做法
I/flutter (23523): 开始上班 搬砖中 要搬一整天
每天上班前：起床-> 做饭 -> 到公司开始搬砖：

在这个场景中我们模拟上班的过程，每一个过程都是一个独立的环节，终止把各个独立的环节合成一个完整流程：