如果你已经照着这个系列写到了第七篇应该对 Flutter 里的 Widget、State 和 class 都有点感觉了。每次写页面你都会发现有重复的代码逻辑在到处粘贴同一个样式的按钮、同一段格式化逻辑、同一套网络请求模板。这个时候就该把 Dart 的函数Function和代码封装这件事单独拎出来讲清楚。这篇不只讲语法更想带你把“写一段能跑的代码”升级成“写一段能复用的代码”。零基础完全可以跟着敲都是我实际项目里常用的写法。1. 为什么函数在 Flutter 项目里比想象中更重要1.1 从“写功能”到“定义零件”的思维切换很多零基础同学一开始接触 Flutter会把所有代码都堆在build方法里。今天写一个按钮把一串样式代码复制到下一个页面明天写一个日期格式化又从上一个页面复制过来。代码能跑但改起来特别痛苦因为同一个样式要改七八个地方。这种痛苦其实就是你该认真学函数和代码封装的最佳信号。函数在这里不只是“做一次计算”的工具更是一个“零件”。你定义一个函数等于给一段逻辑起了一个名字下次需要它的时候直接调用名字。比如你有一个卡片样式内容是标题、副标题和一张图片你可以写一个函数返回这个Card。如果样式要调整只需要改函数内部所有调用它的地方都会同步更新。这个思维一旦形成后面的 Flutter 开发效率会明显提升。1.2 Widget 本身就是函数思想的产物Flutter 里自定义组件最简单的写法是继承StatelessWidget并重写build方法。你可以把build方法看成一个特殊的函数输入BuildContext context输出一个Widget。虽然它不是普通函数但思想完全一致。比如下面这个组件class GreetingCard extends StatelessWidget { final String name; const GreetingCard({super.key, required this.name}); override Widget build(BuildContext context) { return Card( child: Text(你好$name), ); } }本质上它就是“参数 name 进来界面出去”。如果你能理解函数参数和返回值那你就能理解为什么 Flutter 推荐用小组件拼大页面。每个 Widget 都是一个定义好的零件页面只是把这些零件按顺序组装起来。函数学会以后再去看 Flutter 官方文档里的ListView.builder、FutureBuilder这些组件会通透很多因为它们很多都接收函数类型的参数。1.3 回调让组件之间能说话按钮的onPressed、输入框的onChanged、列表的onRefresh这些属性接收的都是回调函数。你写ElevatedButton( onPressed: () { print(点了按钮); }, child: Text(点击), )这里的onPressed就是一个函数对象。Flutter 不知道也不关心按钮被点击之后你要做什么它只负责在点击事件发生时调用这个函数。这种“把行为作为参数传进去”的机制就是回调函数。如果你不理解函数可以作为参数传递你会发现自己很难写出真正可复用的组件。比如你封装了一个点赞按钮点击后是刷新列表、弹出提示还是发请求都应该由调用方决定而不是写死在组件内部。这就是代码封装的起点。2. Dart 函数基础语法其实比 JS 更友好2.1 一个最普通的函数有多少种写法Dart 的函数声明很简单。返回类型写在前面函数名在后面括号里是参数。int add(int a, int b) { return a b; }如果你不关心返回值函数体里没有return可以声明为voidvoid logInfo(String message) { print(日志$message); }Dart 也允许省略返回类型但不推荐尤其是团队协作时明确返回类型的函数更利于阅读和维护。调用就更简单了var sum add(1, 2); logInfo(计算结果$sum);这种基础写法是所有语言通用的套路。新手容易犯的错误是把函数定义写在build方法里面。Dart 允许这么做这种函数叫局部函数但如果局部函数的逻辑超过三五行我更建议你提到类外面或者类里面否则页面会很难读。早期封装代码的基本原则就是一个函数只做一件事并且一眼能看出它做了什么。2.2 命名参数、可选参数与默认值Dart 函数最让新手觉得奇怪的一点是函数参数默认情况下是“位置参数”调用时必须按顺序传。但同时它还有强大的命名参数定义时用花括号{}包起来。void register({ required String username, required String password, String? nickname, bool agreeProtocol false, }) { print(用户名$username); print(昵称$nickname); print(是否同意协议$agreeProtocol); }调用时位置顺序不再重要register( username: flutter新手, password: 123456, agreeProtocol: true, );这里的required表示必填?表示可空 false表示默认值。为什么 Flutter 大量使用命名参数因为组件属性太多用位置参数实在没法看。比如Container的构造函数有color、padding、margin、alignment一大堆如果你全部靠位置传递写出来的代码几乎没法维护。还有一种可选位置参数用方括号[]包起来String format(String value, [String? unit]) { if (unit null) return value; return $value $unit; }这种写法在工具函数里偶尔有用但 Flutter 内部不常用。零基础阶段可以先记住特点位置参数强调顺序命名参数强调可读性默认值负责兜底。实际项目中超过两个参数的函数我都建议优先考虑命名参数。2.3 箭头函数与“单行表达式”的边界很多同学搜过“箭头函数写法”被 JavaScript 的箭头函数带偏。Dart 里的箭头函数并不是“更高级的函数”它只是一个简写语法当函数体只有一个表达式的时候可以用省略花括号和return。int doubleNum(int x) x * 2;它等价于int doubleNum(int x) { return x * 2; }这里的重点有两个。第一后面必须是一个表达式不是语句。如果你写void show(int a) if (a 0) print(正数);这就会报错因为if是语句不是表达式。正确写法是换回花括号。第二如果函数体里既有返回值又有打印日志就不适合用箭头函数。比如int calculate(int a, int b) { print(计算中...); return a b; }这种逻辑超过一行还是老老实实写花括号。箭头函数最大的价值是在写回调时让代码更紧凑比如list.map((item) item * 2).toList();一行就能表达很清楚展开成花括号反而显啰嗦。2.4 返回值与空安全Dart 有严格空安全机制。函数声明了非空返回类型时必须在所有分支都返回值否则编译器直接报错。String getLevel(int score) { if (score 90) return 优秀; if (score 60) return 及格; return 不及格; }如果把最后一行return 不及格去掉Dart 会提示这个函数可能没有返回值。很多新人在接入手机号校验之类的函数时经常踩坑就是因为漏了某个分支函数末尾没有 return 语句。如果函数确实可能没有返回值就要声明成可空类型String? findByKey(String key, MapString, String map) { return map[key]; }否则在调用方直接使用返回值空安全检查会拦住你。这一点在 Flutter 里牵扯到的不只是函数本身还关系到State的初始化。比如你已经声明int _count 0;了但在某个方法里忘记返回编译器会在你调试之前就给出红色提示。初期会觉得烦实际用久了会发现空安全帮你挡掉了大量线上崩溃。3. 高阶函数与闭包封装不可见的逻辑3.1 函数是一等公民所以可以当参数传Dart 里的函数是一等公民意思是你可以把一个函数赋值给变量也可以把它作为参数传给另一个函数还可以把它作为返回值返回。这在平时写 UI 时非常常见。最典型的例子是ListView.builderListView.builder( itemCount: items.length, itemBuilder: (context, index) { return ListTile( title: Text(items[index]), ); }, )itemBuilder就是一个函数参数。Flutter 在需要渲染第 index 行时会自动回调这个函数让你根据 index 生成对应行。你不需要自己写循环也不需要管理 item 的创建时机框架帮你做好了。理解了一等公民概念你就明白为什么有时候函数名后面没有括号。比如void doSomething() { print(do something); } var action doSomething; action(); // 输出 do somethingaction保存的是函数本身而不是调用结果。等到action()才会真正执行。这个区别在封装回调时非常关键。你经常需要把“某个行为”作为变量传递而不是马上执行它。3.2 回调函数到底怎么编写假设你要做一个自定义卡片点击卡片后要通知父页面。设计成卡片组件不要自己处理点击逻辑而是通过回调把事件抛出去。class ActionCard extends StatelessWidget { final String title; final VoidCallback? onTap; const ActionCard({super.key, required this.title, this.onTap}); override Widget build(BuildContext context) { return Card( child: InkWell( onTap: onTap, child: Padding( padding: EdgeInsets.all(16), child: Text(title), ), ), ); } }VoidCallback是 Flutter 自带的一个函数类型表示一个没有参数、没有返回值的函数。如果回调需要传递数据你可以自定义函数类型或者直接写typedef ValueChangedT void Function(T value);Dart 的typedef可以给函数类型起一个名字。例如typedef DeleteCallback void Function(String id); class DeleteDialog extends StatelessWidget { final DeleteCallback onDelete; const DeleteDialog({super.key, required this.onDelete}); override Widget build(BuildContext context) { return ElevatedButton( onPressed: () onDelete(item_001), child: Text(删除), ); } }这样父组件在使用DeleteDialog时就能明确知道回调会收到一个String id代码可读性会高很多。如果回调签名很长比如Futurevoid Function(int page, int size)你不可能每次都在参数声明里写这么一大串定义一个 typedef 是最好的选择。3.3 闭包把状态留在函数体内闭包这个词听起来很高深其实非常简单。在 Dart 里一个函数内部定义的函数如果引用了外部函数的变量这个内部函数就能一直记住那个变量。哪怕外部函数已经执行完毕变量也不会被立刻销毁。看一个经典的计数器例子Function createCounter() { var count 0; return () { count; return count; }; }执行var counter createCounter(); print(counter()); // 1 print(counter()); // 2这里的counter函数捕获了createCounter里的count变量。每次调用都会累加。如果你再创建一个counter2它会有自己独立的count。实际开发中闭包常见于事件监听和builder场景。比如你用ListView.builder在itemBuilder里用到了循环变量index这个itemBuilder就是一个闭包。Flutter 在后续渲染某项时依然能从闭包中取出当初那个index对应的数据。这也是为什么你可以在列表回调里安全访问外层变量。零基础阶段不需要刻意制造闭包但你要能认出来。看到函数里返回另一个函数并且内部用到了外层变量这就是闭包。理解以后再看很多状态管理的源码不会觉得云里雾里。3.4 typedef给你的函数类型起个名字自定义函数类型还有一个好处就是接口变化时修改成本低。假设你的项目里有很多地方需要定义“分页加载更多”的回调typedef LoadMoreCallback Futurevoid Function(int page);以后如果加载更多需要传入分页大小只需要改这个 typedef相关的地方大概率只需要微调调用签名在声明处统一更新就行。这个优势在多人协作项目里特别明显。如果一个组件里有多个同类型的回调比如上传成功回调、上传失败回调你也可以分别定义typedef UploadSuccess void Function(String url); typedef UploadFailure void Function(String message);而不是直接写一大串Function(String)这样代码的语义会非常清楚。代码封装的本质就是让读代码的人不用猜。函数类型命名是其中一个很有用的手段。4. 代码封装实战把页面拆到能复用为止4.1 哪些东西值得封装我总结过一套很简单的判断标准只要满足下面任意一条就值得封装同一段 UI 代码出现在两个及以上页面同一段逻辑代码比如日期转换、手机号校验在多处调用一个页面里的build方法超过 100 行视觉上已经分不清主次组件内部需要频繁修改而外部使用者不希望关心细节。新手最容易犯的错是过早封装。明明只有一处使用的代码为了炫技硬拆成三个文件和两个函数结果阅读成本反而更高。封装的正确节奏应该是先让代码能跑再在写第二个重复页面时顺手抽取而不是第一次就把它做得过度抽象。4.2 拆独立 Widget 的标准动作假设你的个人中心页面有一块“头像 昵称 简介”的布局消息页面又来了一块几乎一样的布局。刚开始你可能是复制Row( children: [ CircleAvatar(backgroundImage: NetworkImage(user.avatarUrl)), SizedBox(width: 12), Column( crossAxisAlignment: CrossAxisAlignment.start, children: [ Text(user.nickname, style: TextStyle(fontWeight: FontWeight.bold)), Text(user.bio, style: TextStyle(color: Colors.grey)), ], ), ], )写两遍以后你决定抽成一个 Widgetclass UserHeader extends StatelessWidget { final String avatarUrl; final String nickname; final String bio; const UserHeader({ super.key, required this.avatarUrl, required this.nickname, required this.bio, }); override Widget build(BuildContext context) { return Row( children: [ CircleAvatar(backgroundImage: NetworkImage(avatarUrl)), const SizedBox(width: 12), Expanded( child: Column( crossAxisAlignment: CrossAxisAlignment.start, children: [ Text(nickname, style: const TextStyle(fontWeight: FontWeight.bold)), Text(bio, style: const TextStyle(color: Colors.grey)), ], ), ), ], ); } }注意我加了Expanded因为如果昵称太长不包Expanded的话右侧文字会被挤出屏幕。这类布局细节在重复使用时最容易漏掉。抽成独立 Widget 以后调用方只需要三行UserHeader( avatarUrl: user.avatarUrl, nickname: user.nickname, bio: user.bio, )如果以后要加一个“关注”按钮只需要改UserHeader内部不需要动两个页面。4.3 把工具函数抽成独立库除了 UI 封装逻辑代码同样可以封装。比如项目里常用的日期格式化、金额展示、正则校验放一个地方维护。我习惯在lib/utils/下面建一个format.dartString formatPrice(double value) ¥${value.toStringAsFixed(2)}; String formatDateTime(DateTime time) { String two(int n) n.toString().padLeft(2, 0); return ${time.year}-${two(time.month)}-${two(time.day)} ${two(time.hour)}:${two(time.minute)}; } bool isValidPhone(String phone) { return RegExp(r^1[3-9]\d{9}$).hasMatch(phone); }然后在页面里导入import ../utils/format.dart;这样做的最大好处是你可以集中写单元测试。不用为了测一个函数跑到模拟器里去点页面直接在纯 Dart 环境里调用就行。函数越独立测试越容易写。这也是为什么我建议把简单的工具函数写成顶层函数避免和 Widget 绑定在一起。4.4 用回调让子 Widget 把事件传出去代码封装最容易搞混的地方是父子组件之间的数据流。父组件向子组件传值用参数子组件向父组件“汇报”事件用回调。举一个删除列表项的简单例子。父组件class ListPage extends StatelessWidget { final ListString ids; void handleDelete(String id) { print(删除 $id); // 这里可以做真正的删除逻辑 } override Widget build(BuildContext context) { return ListView.builder( itemCount: ids.length, itemBuilder: (context, index) { return DeleteRow( id: ids[index], onDelete: handleDelete, ); }, ); } }子组件class DeleteRow extends StatelessWidget { final String id; final ValueChangedString onDelete; const DeleteRow({ super.key, required this.id, required this.onDelete, }); override Widget build(BuildContext context) { return ListTile( title: Text(id), trailing: IconButton( icon: Icon(Icons.delete), onPressed: () onDelete(id), ), ); } }看起来只是绕了一圈但这个模式非常重要。DeleteRow不知道删除请求怎么发也不需要知道刷新列表的事它只负责“有人点了删除按钮把 id 告诉我”。父组件拿到 id 后做真正的业务处理。这样拆完之后DeleteRow可以放到任何地方复用哪怕它的父组件是一个弹窗、一个页面甚至一个底部面板。如果你需要传多个参数可以定义一个自定义函数类型。比如typedef ConfirmCallback void Function(String id, bool confirmed);然后在参数里使用这个 typedef比写一长串Function(String, bool)清楚得多。4.5 对重复状态逻辑做封装不只是页面结构可以封装State内部的业务逻辑同样可以用函数整理。比如一个计数器页面里原本build方法下面直接写加减按钮的回调void _increase() { setState(() { _count; }); } void _decrease() { setState(() { _count--; }); }这已经算函数封装但如果你好好利用空安全可以把逻辑抽得更通用void _updateCount(int delta) { setState(() { _count delta; }); }这样onPressed: () _updateCount(1)和onPressed: () _updateCount(-1)都指向同一个方法改动逻辑时只需要改一处。当逻辑复杂以后还可以把纯业务函数拆到 State 外面比如判断当前数字能否减少、金额是否足够等这些函数不依赖界面测试和复用都非常方便。归根结底封装的目的不是少写代码而是让代码更容易修改和不容易出错。5. 异步函数Flutter 网络与本地操作绕不开的坎5.1 async/await 只是函数返回值变了Flutter 开发里每天都在用异步函数。最简单的网络请求FutureString fetchUserNickname() async { await Future.delayed(Duration(seconds: 1)); return flutter新手; }async关键字并不神奇它只是告诉 Dart这个函数会立刻返回一个Future对象真正的函数体会在之后某个时间点执行。你在函数体内用await等待异步操作等结果回来再继续往下走。很多人刚接触时容易混淆以为async函数的返回值直接就是String。其实它的声明类型必须写成FutureString。调用方如果直接拿返回值当String用编译器会报错String nickname await fetchUserNickname();这里必须加上await并且调用方自身也要在async函数里。如果你不需要等待可以直接接收 FutureFutureString future fetchUserNickname(); future.then((value) { print(value); });then和await只是两种不同的写法实际项目里我更推荐async/await因为它处理串行逻辑时更直观。5.2 Future 与 build 的关系Flutter 的build方法不是异步的。你不能在里面直接await一个网络请求因为框架需要同步返回 Widget。正确做法是点击按钮时触发异步方法然后通过setState或FutureBuilder更新界面。没有封装概念时新手会写出这种代码void _loadData() async { var data await fetchData(); setState(() { _data data; }); }这里_loadData的返回类型其实是Futurevoid虽然省略了 Future 也能写但我建议你显式写出来Futurevoid _loadData() async { ... }好处是调用方可以感知这是一个异步任务。如果页面销毁的时候请求还没回来你还需要注意状态更新是否安全。实际项目中通常会在组件dispose时取消订阅或者用一个_mounted标记判断。这是封装异步逻辑时很容易踩的坑尤其是列表页不断切换时错误状态会导致崩溃。5.3 对异步操作做统一封装每个页面都写try - catch会非常累。代码封装可以帮你把这个重复动作抽出来。比如定义一个统一的异步执行函数FutureT guardAsyncT(FutureT Function() action) async { try { return await action(); } catch (e) { // 你可以在这里统一上报也可以统一弹出提示 print(异步操作失败$e); rethrow; } }调用时Futurevoid loadUserInfo() async { await guardAsync(() fetchUserInfo()); }你会发现guardAsync接收的参数本身也是一个函数。这就是函数作为参数在真实场景中的价值。如果以后要加日志、埋点、loading 管理只需要改guardAsync内部所有调用方都能受益。6. 常见问题与排查技巧实录6.1 命名参数忘记 required 的报错到底在说什么使用命名参数时如果某个参数类型是非空类型但你没有加required也没有默认值编译器会提示类似 “The parameter username cant have a value of null because of its type”。很多新手看到这个报错一头雾水其实就是空安全机制在提醒你这个参数必须传东西要么设成可空要么加默认值要么标记为required。我的习惯是业务上必须由调用方决定的参数直接加required偶尔要传、大部分时候不传的参数声明成可空有默认值最清晰的参数直接给 默认值。6.2 箭头函数里写多条语句为什么报错我见过不少从 JavaScript 转过来的同学习惯性写list.forEach((item) { print(item); print(---); });在 Dart 里这样会报错因为后面只能是一个表达式。正确写法是list.forEach((item) { print(item); print(---); });判断标准很简单后面能放什么取决于这一句话能不能直接作为返回值。如果逻辑里有分号、有多条语句、有if块就不要用箭头函数。6.3 闭包导致内存泄漏先把工具方法写对闭包本身不会必然导致泄漏但如果一个长时间存活的对象持有某个闭包而这个闭包又捕获了不该捕获的大对象就可能让内存无法释放。在 Flutter 里最常见的场景是给某个全局对象注册监听器监听器内部使用了setState结果组件销毁后监听器还在造成无意义回调。处理办法是遵守对称原则在哪里注册就在哪里注销。比如initState里注册就在dispose里注销。零基础阶段先不要追求什么复杂的内存优化把这套对称原则做好就能避免绝大多数问题。6.4 处理“万能函数”式封装的诱惑我在早期练手时特别喜欢封装“万能函数”。比如封装一个showCustomDialog({String? title, String? content, bool showCancel, String? confirmText, ...})参数越加越多最后超过十个连自己都记不住顺序。代码封装不是为了让函数变得万能的而是为了把经常一起变化的逻辑组合起来把不经常变化的部分隐藏起来。现在我给自己定了一个很实用的标准如果一个函数里出现超过三个bool类型的参数就会优先考虑拆分成两个函数或者把这些 bool 整理成一个配置类。因为几个 bool 组合在一起很容易出现“第四个 bool 参数是不是生效”这类问题。函数是给人读的也是要人维护的简单清晰往往比花哨更值钱。踩过几次坑之后我越来越觉得 Flutter 难的不是语法而是“什么时候该抽函数”这个判断。希望这篇对函数和代码封装的梳理能帮你在写第七篇的时候少走一点弯路。你可以在自己项目里挑一个重复超过两次的 UI 代码块试着按上面的思路抽成一个独立 Widget再把重复的逻辑函数用typedef规范一下写完回头看代码会清爽很多。