簡化代碼害驹、提高效率：Dart和Flutter開發(fā)小技巧
前言
在日常開發(fā)中寻馏，我們常常會使用一些常用的技巧或語法糖兆龙，以簡化代碼、提高開發(fā)效率耻台。本文將分享一些在Dart和Flutter中常用的小貼士空免，幫助你更輕松地編寫優(yōu)雅高效的代碼。
日常開發(fā)粘我，技巧鼓蜒，語法糖痹换，Dart，F(xiàn)lutter都弹，功能擴展娇豫，安全數(shù)組，圖像寬高比畅厢，自動間距
參考
函數(shù)擴展
在Dart中冯痢，我們可以擴展任何數(shù)據(jù)類型，將任何函數(shù)轉(zhuǎn)換為數(shù)據(jù)類型框杜。因此浦楣，我們也可以在Dart中擴展任何類型的函數(shù)。通過使用extension關(guān)鍵字咪辱，可以實現(xiàn)函數(shù)擴展振劳，用于提高代碼的可讀性和可維護(hù)性。
定義 String 擴展
extension StringExtensions on String {
String capitalize() {
if (isEmpty) {
return this;
}
return substring(0, 1).toUpperCase() + substring(1);
}
}
調(diào)用擴展
class DartTipsPage extends StatefulWidget {
const DartTipsPage({Key? key}) : super(key: key); @override
State<DartTipsPage> createState() => _DartTipsPageState();
}
class _DartTipsPageState extends State<DartTipsPage> {
@override
void initState() {
super.initState();
String text = "hello";
print(text.capitalize()); // "Hello"
}
}
您還可以直接創(chuàng)建 extensions 到函數(shù)類型油狂，以在函數(shù)之上添加功能历恐。例如，將延遲調(diào)用功能添加到函數(shù)類型专筷。
extension on VoidCallback {
Future<void> delayedCall(
Duration duration,
) =>
Future<void>.delayed(duration, this);
}
class DartTipsPage extends StatefulWidget {
const DartTipsPage({Key? key}) : super(key: key); @override
State<DartTipsPage> createState() => _DartTipsPageState();
}
class _DartTipsPageState extends State<DartTipsPage> {
@override
void initState() {
super.initState();
_click.delayedCall(const Duration(seconds: 1));
} _click(){
print("delayedCall");
}
}
這里的
VoidCallback是一個已轉(zhuǎn)換為數(shù)據(jù)類型的函數(shù)類型弱贼，因此我們也可以向其添加擴展。
Secure array
在Flutter開發(fā)過程中磷蛹，遇到數(shù)組越界或訪問不存在的數(shù)組元素會導(dǎo)致運行時錯誤吮旅。
List<int> numbers = [1, 2, 3, 4, 5];
print(numbers[5]);
嘗試訪問索引為 5 的元素，但數(shù)組長度僅為 5 個元素味咳，將觸發(fā)數(shù)組越界錯誤庇勃， Flutter 錯誤消息：
RangeError (index): Index out of range: index should be less than 5: 5
為了避免這種情況，我們可以自定義一個安全的數(shù)組類SafeList莺葫，繼承自ListBase匪凉，用于處理數(shù)組越界情況。
class SafeList<T> extends ListBase<T> {
final List<T> _list;
// 調(diào)用 set 方法修改 length 的時候捺檬，若大于當(dāng)前數(shù)組的長度時再层，就使用 defaultValue 填充
final T defaultValue; // 在數(shù)組中查詢不存在的值時，即數(shù)組越界時堡纬，返回 absentValue
final T absentValue;
SafeList({
required this.defaultValue,
required this.absentValue,
List<T>? 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));
}
}
}
調(diào)用
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開發(fā)中聂受，經(jīng)常需要獲取圖像的寬高比，特別是在需要設(shè)置圖像寬高時烤镐。我們可以通過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;
}
}
調(diào)用
class _DartTipsPageState extends State<DartTipsPage> {
@override
void initState() {
super.initState();
_getImageAspectRatio(); // 打印結(jié)果：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中，當(dāng)需要在Row或Column中為元素之間添加相同的間距時炮叶，通常會寫出大量重復(fù)的代碼碗旅。
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"),
],
),
我們可以創(chuàng)建一個自動添加間距的自定義類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),
],
)
],
);
}
調(diào)用
RowWithSpacing(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.center,
existLeadingSpace: true,
spacing: 20,
children: [
Text("Flutter"),
Text("ReactNative"),
Text("uniapp"),
],
),
小結(jié)
以上小貼士代碼量少，簡單輕便祟辟，可立即投入使用医瘫，并在日常開發(fā)中帶來諸多便利。
感謝閱讀本文
如果有什么建議旧困，請在評論中讓我知道醇份。我很樂意改進(jìn)。
flutter 學(xué)習(xí)路徑
- Flutter 優(yōu)秀插件推薦 https://flutter.ducafecat.com
- Flutter 基礎(chǔ)篇1 - Dart 語言學(xué)習(xí) https://ducafecat.com/course/dart-learn
- Flutter 基礎(chǔ)篇2 - 快速上手 https://ducafecat.com/course/flutter-quickstart-learn
- Flutter 實戰(zhàn)1 - Getx Woo 電商APP https://ducafecat.com/course/flutter-woo
- Flutter 實戰(zhàn)2 - 上架指南 Apple Store吼具、Google Play https://ducafecat.com/course/flutter-upload-apple-google
- Flutter 基礎(chǔ)篇3 - 仿微信朋友圈 https://ducafecat.com/course/flutter-wechat
- Flutter 實戰(zhàn)3 - 騰訊即時通訊 第一篇 https://ducafecat.com/course/flutter-tim
- Flutter 實戰(zhàn)4 - 騰訊即時通訊 第二篇 https://ducafecat.com/course/flutter-tim-s2
? 貓哥
ducafecat.com
end
