简化代码、提高效率：Dart和Flutter开发小技巧
前言
在日常开发中，我们常常会使用一些常用的技巧或语法糖，以简化代码、提高开发效率。本文将分享一些在Dart和Flutter中常用的小贴士，帮助你更轻松地编写优雅高效的代码。
日常开发，技巧，语法糖，Dart，Flutter，功能扩展，安全数组，图像宽高比，自动间距
参考
函数扩展
在Dart中，我们可以扩展任何数据类型，将任何函数转换为数据类型。因此，我们也可以在Dart中扩展任何类型的函数。通过使用extension关键字，可以实现函数扩展，用于提高代码的可读性和可维护性。
定义 String 扩展
extension StringExtensions on String {
String capitalize() {
if (isEmpty) {
return this;
}
return substring(0, 1).toUpperCase() + substring(1);
}
}
调用扩展
class DartTipsPage extends StatefulWidget {
const DartTipsPage({
Key? key}) : super(key: key);
State<DartTipsPage> createState() => _DartTipsPageState();
}
class _DartTipsPageState extends State<DartTipsPage> {
void initState() {
super.initState();
String text = "hello";
print(text.capitalize()); // "Hello"
}
}
您还可以直接创建 extensions 到函数类型，以在函数之上添加功能。例如，将延迟调用功能添加到函数类型。
extension on VoidCallback {
Future<void> delayedCall(
Duration duration,
) =>
Future<void>.delayed(duration, this);
}
class DartTipsPage extends StatefulWidget {
const DartTipsPage({
Key? key}) : super(key: key);
State<DartTipsPage> createState() => _DartTipsPageState();
}
class _DartTipsPageState extends State<DartTipsPage> {
void initState() {
super.initState();
_click.delayedCall(const Duration(seconds: 1));
} _click(){
print("delayedCall");
}
}
这里的
VoidCallback是一个已转换为数据类型的函数类型，因此我们也可以向其添加扩展。
Secure array
在Flutter开发过程中，遇到数组越界或访问不存在的数组元素会导致运行时错误。
List<int> numbers = [1, 2, 3, 4, 5];
print(numbers[5]);
尝试访问索引为 5 的元素，但数组长度仅为 5 个元素，将触发数组越界错误， Flutter 错误消息：
RangeError (index): Index out of range: index should be less than 5: 5
为了避免这种情况，我们可以自定义一个安全的数组类SafeList，继承自ListBase，用于处理数组越界情况。
class SafeList<T> extends ListBase<T> {
final List<T> _list;
// 调用 set 方法修改 length 的时候，若大于当前数组的长度时，就使用 defaultValue 填充
final T defaultValue; // 在数组中查询不存在的值时，即数组越界时，返回 absentValue
final T absentValue;
SafeList({
required this.defaultValue,
required this.absentValue,
List<T>? values,
}) : _list = values ?? [];
T operator [](int index) => index < _list.length ? _list[index] : absentValue;
void operator []=(int index, T value) => _list[index] = value;
int get length => _list.length;
T get first => _list.isNotEmpty ? _list.first : absentValue;
T get last => _list.isNotEmpty ? _list.last : absentValue;
set length(int newValue) {
if (newValue < _list.length) {
_list.length = newValue;
} else {
_list.addAll(List.filled(newValue - _list.length, defaultValue));
}
}
}
调用
const notFound = 'Value Not Found';
const defaultString = ''; final SafeList<String> 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来处理获取图像宽高比的需求。
定义
import 'dart:async' show Completer;
import 'package:flutter/material.dart' as material
show Image, ImageConfiguration, ImageStreamListener;
extension GetImageAspectRatio on material.Image {
Future<double> getAspectRatio() {
final completer = Completer<double>();
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;
}
}
调用
class _DartTipsPageState extends State<DartTipsPage> {
void initState() {
super.initState();
_getImageAspectRatio(); // 打印结果：2.8160919540229883
}
_getImageAspectRatio() async {
Image wxIcon = Image.asset("images/wx_icon.png");
var aspectRatio = await wxIcon.getAspectRatio();
print(aspectRatio);
}
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: const Color(0xffffffff),
);
}
}
自动添加间距
在Flutter中，当需要在Row或Column中为元素之间添加相同的间距时，通常会写出大量重复的代码。
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来简化代码。
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<Widget> children = const [],
}) : super(
children: [
...existLeadingSpace ? [SizedBox(width: spacing)] : <Widget>[],
...children.expand(
(w) => [
w,
SizedBox(width: spacing),
],
)
],
);
}
调用
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
