flutter dart mixin 姿势

简介: flutter dart mixin 姿势

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 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 on State {
int countTime = 60;
countNum() {
if (countTime > 1) {
setState(() {
countTime--;
});
}
}
}
调用 Widget

class _PageMixinState extends State 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 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): 开始上班 搬砖中 要搬一整天

每天上班前:起床-> 做饭 -> 到公司开始搬砖:

相关文章
|
4月前
|
开发框架 Dart 前端开发
Flutter 是谷歌推出的一款高效跨平台移动应用开发框架,使用 Dart 语言,具备快速开发、跨平台支持、高性能、热重载及美观界面等特点。
Flutter 是谷歌推出的一款高效跨平台移动应用开发框架,使用 Dart 语言,具备快速开发、跨平台支持、高性能、热重载及美观界面等特点。本文从 Flutter 简介、特点、开发环境搭建、应用架构、组件详解、路由管理、状态管理、与原生代码交互、性能优化、应用发布与部署及未来趋势等方面,全面解析 Flutter 技术,助你掌握这一前沿开发工具。
203 8
|
6月前
|
Dart
如何在 Flutter 项目中使用 Dart 语言?
如何在 Flutter 项目中使用 Dart 语言?
159 58
|
5月前
|
Dart 开发者 Windows
flutter:dart的学习
本文介绍了Dart语言的下载方法及基本使用,包括在Windows系统上和VSCode中的安装步骤,并展示了如何运行Dart代码。此外,还详细说明了Dart的基础语法、构造函数、泛型以及库的使用方法。文中通过示例代码解释了闭包、运算符等概念,并介绍了Dart的新特性如非空断言操作符和延迟初始化变量。最后,提供了添加第三方库依赖的方法。
56 12
|
7月前
|
Dart 前端开发 JavaScript
Flutter&Dart-异步编程Future、Stream极速入门
Flutter&Dart-异步编程Future、Stream极速入门
120 4
|
7月前
|
Dart
Flutter笔记:手动配置VSCode中Dart代码自动格式化
Flutter笔记:手动配置VSCode中Dart代码自动格式化
840 5
|
7月前
|
Dart JavaScript 前端开发
Dart或Flutter中解决异常-type ‘int‘ is not a subtype of type ‘double‘
Dart或Flutter中解决异常-type ‘int‘ is not a subtype of type ‘double‘
221 4
|
7月前
|
Dart 开发工具 Android开发
Android Studio导入Flutter项目提示Dart SDK is not configured
Android Studio导入Flutter项目提示Dart SDK is not configured
662 4
|
7月前
|
Dart 安全 API
Android跨平台开发之Dart 3.5 与 Flutter 3.24:革新跨平台应用开发
【Dart 3.5 与 Flutter 3.24:革新跨平台应用开发】首发于公众号“AntDream”。本文深度解析 Dart 3.5 和 Flutter 3.24 的新特性,包括空安全强化、Web 与原生互操作性增强及 Flutter GPU API 等,展示了如何提升代码质量和用户体验。
97 1
|
7月前
|
Dart 开发工具
消除Flutter doctor的警告Warning: `dart` on your path resolves to xxx/bin/dart
消除Flutter doctor的警告Warning: `dart` on your path resolves to xxx/bin/dart
143 0
|
Dart Java Android开发
Flutter 103: 初识 Flutter Mixin
0 基础学习 Flutter,第一百零三步:简单了解一下 Mixin 混入~
1100 0
Flutter 103: 初识 Flutter Mixin

热门文章

最新文章

  • 1
    【Flutter 开发必备】AzListView 组件全解析,打造丝滑索引列表!
    26
  • 2
    flutter3-wetrip跨平台自研仿携程app预约酒店系统模板
    33
  • 3
    通过外部链接启动 Flutter App(详细介绍及示例)
    32
  • 4
    【01】噩梦终结flutter配安卓android鸿蒙harmonyOS 以及next调试环境配鸿蒙和ios真机调试环境-flutter项目安卓环境配置-gradle-agp-ndkVersion模拟器运行真机测试环境-本地环境搭建-如何快速搭建android本地运行环境-优雅草卓伊凡-很多人在这步就被难倒了
    155
  • 5
    零基础构建即时通讯开源项目OpenIM移动端-Flutter篇
    101
  • 6
    flutter3-dart3-dymall原创仿抖音(直播+短视频+聊天)商城app系统模板
    59
  • 7
    【11】flutter进行了聊天页面的开发-增加了即时通讯聊天的整体页面和组件-切换-朋友-陌生人-vip开通详细页面-即时通讯sdk准备-直播sdk准备-即时通讯有无UI集成的区别介绍-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
    174
  • 8
    【09】flutter首页进行了完善-采用android studio 进行真机调试开发-增加了直播间列表和短视频人物列表-增加了用户中心-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
    54
  • 9
    当flutter react native 等混开框架-并且用vscode-idea等编译器无法打包apk,打包安卓不成功怎么办-直接用android studio如何打包安卓apk -重要-优雅草卓伊凡
    82
  • 10
    【08】flutter完成屏幕适配-重建Android,增加GetX路由,屏幕适配,基础导航栏-多版本SDK以及gradle造成的关于fvm的使用(flutter version manage)-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
    176