【Flutter】744- Flutter 最佳實踐

最佳實踐是一個領(lǐng)域可以接受的專業(yè)標(biāo)準(zhǔn)，對于任何編程語言來說，提高代碼質(zhì)量、可讀性、可維護性和健壯性都非常重要。

讓我們探索一些設(shè)計和開發(fā)Flutter應(yīng)用程序的最佳實踐。

1. 命名規(guī)則

class 、 enum 、 typedef ?和 extension 應(yīng)采用駝峰命名 UpperCamelCase 規(guī)則。

class?MainScreen?{?...?}
enum?MainItem?{?..?}
typedef?Predicate?=?bool?Function(T?value);
extension?MyList?on?List?{?...?}

類庫、包、目錄、以及源碼文件都應(yīng)使用帶下劃線的小寫命名?lowercase_with_underscores

library?firebase_dynamic_links;
import?'socket/socket_manager.dart';

變量、常量、參數(shù)和命名參數(shù)應(yīng)都應(yīng)使用小寫字母開頭的駝峰命名 lowerCamelCase

var?item;
const?bookPrice?=?3.14;
final?urlScheme?=?RegExp('^([a-z]+):');
void?sum(int?bookPrice)?{
??//?...
}

2. lib中的文件使用相對路徑導(dǎo)入

當(dāng)同時使用相對和絕對導(dǎo)入時，從兩種不同的方式導(dǎo)入同一類時，可能會造成混亂。為了避免這種情況，我們應(yīng)該對?lib/?文件夾中的文件使用相對路徑導(dǎo)入

//?Don't
import?'package:demo/src/utils/dialog_utils.dart';


//?Do
import?'../../../utils/dialog_utils.dart';

3. 指定變量類型

當(dāng)值的類型已知時，請務(wù)必指定成員的類型，盡可能避免使用 var

//Don't
var?item?=?10;
final?car?=?Car();
const?timeOut?=?2000;


//Do
int?item?=?10;
final?Car?bar?=?Car();
String?name?=?'john';
const?int?timeOut?=?20;

4. 避免使用 as 作類型轉(zhuǎn)換，應(yīng)使用 is 運算符

通常，如果無法進行強制轉(zhuǎn)換，使用?as?強制轉(zhuǎn)換將會引發(fā)異常，為了避免異常，可以使用?is

//Don't
(item?as?Animal).name?=?'Lion';


//Do
if?(item?is?Animal)
??item.name?=?'Lion';

5. 使用 if 條件代替條件表達式

很多時候，我們需要根據(jù)條件渲染 Widget ，如果在條件表達式在任何情況下都返回 null 時，那么我們應(yīng)該僅僅使用?if?條件

//Don't
Widget?getText(BuildContext?context)?{
??return?Row(
????children:?[
??????Text("Hello"),
??????Platform.isAndroid???Text("Android")?:?null,
??????Platform.isAndroid???Text("Android")?:?SizeBox(),
??????Platform.isAndroid???Text("Android")?:?Container(),
????]
??);
}


//Do
Widget?getText(BuildContext?context)?{
??return?Row(
??????children:?
??????[
????????Text("Hello"),?
????????if?(Platform.isAndroid)?Text("Android")
??????]
??);
}

6. 使用 ?? 和 ?. 操作符

優(yōu)先使用 ?? ?(如果為 null ) 和 ??. （可識別空值）運算符，而不是條件表達式中 null 檢查

//Don't
v?=?a?==?null???b?:?a;

//Do
v?=?a????b;


//Don't
v?=?a?==?null???null?:?a.b;

//Do
v?=?a?.b;

7. 使用 spread 集合

當(dāng)現(xiàn)有項目已經(jīng)存儲在另一個集合中時，spread 集合語法將使代碼更簡單

//Don't
var?y?=?[4,5,6];
var?x?=?[1,2];
x.addAll(y);


//Do
var?y?=?[4,5,6];
var?x?=?[1,2,...y];

8. 使用級聯(lián)運算符

如果我們不想對同一對象執(zhí)行一系列操作，則應(yīng)使用級聯(lián)運算符

//?Don't
var?path?=?Path();
path.lineTo(0,?size.height);
path.lineTo(size.width,?size.height);
path.lineTo(size.width,?0);
path.close();??


//?Do
var?path?=?Path()
..lineTo(0,?size.height)
..lineTo(size.width,?size.height)
..lineTo(size.width,?0)
..close();?

9. 使用原始字符串

原始字符串可用于避免轉(zhuǎn)義字符帶來的困擾

//Don't
var?s?=?'This?is?demo?string?\\?and?\$';


//Do
var?s?=?r'This?is?demo?string?\?and?$';

10. 不要顯式初始化變量 null

在 Dart 中，如果未指定變量的值，則變量會自動初始化為 null ，因此添加 null 是多余且不需要的

//Don't
int?_item?=?null;


//Do
int?_item;

11. 使用表達式函數(shù)體

對于僅包含一個表達式的函數(shù)，可以使用表達式函數(shù)

//Don't
get?width?{
??return?right?-?left;
}
Widget?getProgressBar()?{
??return?CircularProgressIndicator(
????valueColor:?AlwaysStoppedAnimation(Colors.blue),
??);
}


//Do
get?width?=>?right?-?left;
Widget?getProgressBar()?=>?CircularProgressIndicator(
??????valueColor:?AlwaysStoppedAnimation(Colors.blue),
????);

12. 避免調(diào)用 print()

print() 和 debugPrint() 均用于打印日志到控制臺，如果你使用 print() 并且一次輸出太多內(nèi)容，Android 有時會丟棄一些日志行，為了避免這種情況，請使用 debugPrint()

13. 拆分 Widget

當(dāng)調(diào)用 setState() ，所有后代 Widget 都將重建，因此，將 Widget 拆分為小的 Widget ，在真正需要改變的 Widget 上調(diào)用 setState()

Scaffold(
??appBar:?CustomAppBar(title:?"Verify?Code"),?//?Sub?Widget
??body:?Container(
????child:?Column(
??????crossAxisAlignment:?CrossAxisAlignment.start,
??????children:?<Widget>[
????????TimerView(?//?Sub?Widget
????????????key:?_timerKey,
????????????resendClick:?()?{})
??????],
????),
??),
)

14. 使用 ListView.builder 構(gòu)建長列表

當(dāng)使用無限列表或者非常大的列表時，通常建議使用 ListView.builder 以提高性能。

默認(rèn)的 ListView 構(gòu)造函數(shù)一次生成整個列表，ListView.builder 創(chuàng)建一個惰性列表，當(dāng)用戶向下滾動列表時，Flutter 會按需構(gòu)建 Widget

15. 在 Widget 中使用 const

當(dāng) setState 調(diào)用時不會改變的 Widget ，我們應(yīng)該將其定義為常量，這將阻止 Widget 重建，從而提高性能

Container(
??????padding:?const?EdgeInsets.only(top:?10),
??????color:?Colors.black,
??????child:?const?Center(
????????child:?const?Text(
??????????"No?Data?found",
??????????style:?const?TextStyle(fontSize:?30,?fontWeight:?FontWeight.w800),
????????),
??????),
????);

我希望這些能給你一些見識，使你的 Flutter 代碼更具可讀性，同時也可以提高應(yīng)用程序的性能。

編碼愉快！