# 简化代码、提高效率：Dart和Flutter开发小技巧 ![](https://files.ducafecat.com/docs/images/2025/11/23/07645385f4fd451487569478eddbd836.png) ## 视频 https://youtu.be/7WC-YjPSeZY https://www.bilibili.com/video/BV17x4y1n74x/ ## 前言 > 原文 https://ducafecat.com/blog/flutter-development-tips 在日常开发中，我们常常会使用一些常用的技巧或语法糖，以简化代码、提高开发效率。本文将分享一些在Dart和Flutter中常用的小贴士，帮助你更轻松地编写优雅高效的代码。日常开发，技巧，语法糖，Dart，Flutter，功能扩展，安全数组，图像宽高比，自动间距 ## 参考 - https://dart.dev/guides/language/extension-methods - https://pub.dev/packages/flutter_network_image ## 函数扩展在Dart中，我们可以扩展任何数据类型，将任何函数转换为数据类型。因此，我们也可以在Dart中扩展任何类型的函数。通过使用`extension`关键字，可以实现函数扩展，用于提高代码的可读性和可维护性。定义 String 扩展 ```dart extension StringExtensions on String { String capitalize() { if (isEmpty) { return this; } return substring(0, 1).toUpperCase() + substring(1); } } ``` 调用扩展 ```dart class DartTipsPage extends StatefulWidget { const DartTipsPage({Key? key}) : super(key: key); @override State createState() => _DartTipsPageState(); } class _DartTipsPageState extends State { @override void initState() { super.initState(); String text = "hello"; print(text.capitalize()); // "Hello" } } ``` 您还可以直接创建 `extensions` 到函数类型，以在函数之上添加功能。例如，将延迟调用功能添加到函数类型。 ```dart extension on VoidCallback { Future delayedCall( Duration duration, ) => Future.delayed(duration, this); } ``` ```dart class DartTipsPage extends StatefulWidget { const DartTipsPage({Key? key}) : super(key: key); @override State createState() => _DartTipsPageState(); } class _DartTipsPageState extends State { @override void initState() { super.initState(); _click.delayedCall(const Duration(seconds: 1)); } _click(){ print("delayedCall"); } } ``` > 这里的 `VoidCallback` 是一个已转换为数据类型的函数类型，因此我们也可以向其添加扩展。 ## Secure array 在Flutter开发过程中，遇到数组越界或访问不存在的数组元素会导致运行时错误。 ```dart List numbers = [1, 2, 3, 4, 5]; print(numbers[5]); ``` 尝试访问索引为 5 的元素，但数组长度仅为 5 个元素，将触发数组越界错误， `Flutter` 错误消息： ```dart RangeError (index): Index out of range: index should be less than 5: 5 ``` 为了避免这种情况，我们可以自定义一个安全的数组类SafeList，继承自ListBase，用于处理数组越界情况。 ```dart class SafeList extends ListBase { final List _list; // 调用 set 方法修改 length 的时候，若大于当前数组的长度时，就使用 defaultValue 填充 final T defaultValue; // 在数组中查询不存在的值时，即数组越界时，返回 absentValue final T absentValue; SafeList({ required this.defaultValue, required this.absentValue, List? values, }) : _list = values ?? []; @override T operator [](int index) => index < _list.length ? _list[index] : absentValue; @override void operator []=(int index, T value) => _list[index] = value; @override int get length => _list.length; @override T get first => _list.isNotEmpty ? _list.first : absentValue; @override T get last => _list.isNotEmpty ? _list.last : absentValue; @override set length(int newValue) { if (newValue < _list.length) { _list.length = newValue; } else { _list.addAll(List.filled(newValue - _list.length, defaultValue)); } } } ``` 调用 ```dart const notFound = 'Value Not Found'; const defaultString = ''; final SafeList myList = SafeList( defaultValue: defaultString, absentValue: notFound, values: ['Flutter', 'iOS', 'Android'], ); print(myList[0]); // Flutter print(myList[1]); // iOS print(myList[2]); // Android print(myList[3]); // Value Not Found myList.length = 5; print(myList[4]); // '' myList.length = 0; print(myList.first); // Value Not Found print(myList.last); // Value Not Found ``` ## 获取图像宽高比在Flutter开发中，经常需要获取图像的宽高比，特别是在需要设置图像宽高时。我们可以通过Completer和ImageStreamListener来处理获取图像宽高比的需求。定义 ```dart import 'dart:async' show Completer; import 'package:flutter/material.dart' as material show Image, ImageConfiguration, ImageStreamListener; extension GetImageAspectRatio on material.Image { Future getAspectRatio() { final completer = Completer(); image.resolve(const material.ImageConfiguration()).addListener( material.ImageStreamListener( (imageInfo, synchronousCall) { final aspectRatio = imageInfo.image.width / imageInfo.image.height; imageInfo.image.dispose(); completer.complete(aspectRatio); }, ), ); return completer.future; } } ``` 调用 ```dart class _DartTipsPageState extends State { @override void initState() { super.initState(); _getImageAspectRatio(); // 打印结果：2.8160919540229883 } _getImageAspectRatio() async { Image wxIcon = Image.asset("images/wx_icon.png"); var aspectRatio = await wxIcon.getAspectRatio(); print(aspectRatio); } @override Widget build(BuildContext context) { return Scaffold( backgroundColor: const Color(0xffffffff), ); } } ``` ## 自动添加间距在Flutter中，当需要在Row或Column中为元素之间添加相同的间距时，通常会写出大量重复的代码。 ```dart Row( crossAxisAlignment = CrossAxisAlignment.center, mainAxisAlignment = MainAxisAlignment.center, children = [ _hasFirstSpacing ? SizedBox(width: 20,) : Container(), Text("Flutter"), SizedBox(width: 20,), Text("ReactNative"), SizedBox(width: 20,), Text("uni-app"), ], ), ``` 我们可以创建一个自动添加间距的自定义类RowWithSpacing来简化代码。 ```dart class RowWithSpacing extends Row { RowWithSpacing({ super.key, double spacing = 8, // 是否需要在开头添加间距 bool existLeadingSpace = false, super.mainAxisAlignment, super.mainAxisSize, super.crossAxisAlignment, super.textDirection, super.verticalDirection, super.textBaseline, List children = const [], }) : super( children: [ ...existLeadingSpace ? [SizedBox(width: spacing)] : [], ...children.expand( (w) => [ w, SizedBox(width: spacing), ], ) ], ); } ``` 调用 ```dart RowWithSpacing( crossAxisAlignment: CrossAxisAlignment.center, mainAxisAlignment: MainAxisAlignment.center, existLeadingSpace: true, spacing: 20, children: [ Text("Flutter"), Text("ReactNative"), Text("uniapp"), ], ), ``` ## 小结以上小贴士代码量少，简单轻便，可立即投入使用，并在日常开发中带来诸多便利。感谢阅读本文如果有什么建议，请在评论中让我知道。我很乐意改进。 --- ## flutter 学习路径 - Flutter 优秀插件推荐 https://flutter.ducafecat.com - Flutter 基础篇1 - Dart 语言学习 https://ducafecat.com/course/dart-learn - Flutter 基础篇2 - 快速上手 https://ducafecat.com/course/flutter-quickstart-learn - Flutter 实战1 - Getx Woo 电商APP https://ducafecat.com/course/flutter-woo - Flutter 实战2 - 上架指南 Apple Store、Google Play https://ducafecat.com/course/flutter-upload-apple-google - Flutter 基础篇3 - 仿微信朋友圈 https://ducafecat.com/course/flutter-wechat - Flutter 实战3 - 腾讯即时通讯第一篇 https://ducafecat.com/course/flutter-tim - Flutter 实战4 - 腾讯即时通讯第二篇 https://ducafecat.com/course/flutter-tim-s2 --- © 猫哥 ducafecat.com end

標籤

继续学习

評論