超越基礎(chǔ)：Flutter 中 onTap 事件的五條規(guī)則讓你脫穎而出
小事情決定了你的熟練程度，這些小細(xì)節(jié)的有趣之處在于它們的豐富性。您將在代碼庫(kù)中的數(shù)百個(gè)位置遇到 onTap 事件。增強(qiáng)它們可以對(duì)代碼的可維護(hù)性和最終用戶(hù)體驗(yàn)產(chǎn)生重大的積極影響。
onTap 就是這樣一個(gè)微小但豐富的東西——我們?cè)诿總€(gè)屏幕上都使用它。這純粹是關(guān)于那些 onTap 事件：該做和不該做。
規(guī)則 1：小部件不應(yīng)實(shí)現(xiàn) onTap 邏輯
顧名思義，小部件是在屏幕上繪制的一塊 UI，它應(yīng)該對(duì)業(yè)務(wù)邏輯一無(wú)所知。如果需要，它可以將事件傳遞給其父級(jí)。做到這一點(diǎn)的最佳方法是使用函數(shù)作為構(gòu)造函數(shù)參數(shù)。
要點(diǎn)：不要在小部件內(nèi)創(chuàng)建匿名函數(shù)來(lái)編寫(xiě)業(yè)務(wù)邏輯。相反，甚至可以將 onTap 傳遞到小部件之外，并讓父級(jí)處理它。
// DON'T
class MyWidget extends StatelessWidget {
@override
Widget build(BuildContext context) => GestureDetector(
onTap: () {
debugPrint('MyWidget onTap called');
fetchFromServer();
},
child: Container(
width: 100,
height: 100,
color: Colors.orange,
),
);
}// DO
class MyWidget extends StatelessWidget {
const MyWidget({this.onTap});
final void Function()? onTap;
@override
Widget build(BuildContext context) => GestureDetector(
onTap: onTap,
child: Container(
width: 100,
height: 100,
color: Colors.orange,
),
);
}規(guī)則 2：onTap 函數(shù)應(yīng)該可為 null
作為 UI 的一部分，小部件應(yīng)該是可重用的。不同的用例可能需要也可能不需要其 onTap 功能。因?yàn)樗嬖诘闹饕蚴窃谄聊簧侠L制而不是向其父級(jí)或控制器發(fā)送事件，所以它應(yīng)該能夠在有或沒(méi)有 onTap 事件的情況下存在。
要點(diǎn)：使來(lái)自小部件的所有事件函數(shù)都可以為 null。
// DON'T
class MyWidget extends StatelessWidget {
const MyWidget({required this.onTap});
final void Function() onTap;
@override
Widget build(BuildContext context) => GestureDetector(
onTap: onTap,
child: Container(
...
),
);
}// DO
class MyWidget extends StatelessWidget {
const MyWidget({this.onTap});
final void Function()? onTap;
@override
Widget build(BuildContext context) => GestureDetector(
onTap: onTap,
child: Container(
...
),
);
}規(guī)則 3：UI 必須對(duì)邏輯一無(wú)所知，即使是指示性意義上的也不行
即使在使用最佳實(shí)踐之后，一個(gè)常見(jiàn)的錯(cuò)誤是命名指示業(yè)務(wù)邏輯的 UI 事件函數(shù)。銀行應(yīng)用程序中的小部件應(yīng)該不知道它屬于銀行應(yīng)用程序，并且只有足夠的數(shù)據(jù)來(lái)繪制它自己和它的孩子。換句話(huà)說(shuō)，一個(gè)小部件應(yīng)該是美麗而愚蠢的。
要點(diǎn)：命名 UI 事件函數(shù)以指示事件，而不是指示底層業(yè)務(wù)邏輯。將這樣的函數(shù)命名為 onTapRegisterButton() 比 register() 更好。
// DON'T
class MyScreen extends StatelessWidget {
...
@override
Widget build(BuildContext context) => Scaffold(
body: MyWidget(
onTap: controller.fetchData,
);
);
}// DO
class MyScreen extends StatelessWidget {
...
@override
Widget build(BuildContext context) => Scaffold(
body: MyWidget(
onTap: controller.onTapMyWidget,
);
);
}
class MyScreenController {
...
void onTapMyWidget() {
_fetchData()
}
void _fetchData() {
...
}
}規(guī)則 4：盡可能傳遞模型
這一點(diǎn)不僅限于 UI，也適用于所有函數(shù)。每當(dāng)您需要傳遞一些數(shù)據(jù)作為參數(shù)時(shí)，請(qǐng)盡量傳遞整個(gè)模型，而不僅僅是一個(gè) ID 或名稱(chēng)。這是一個(gè)很好的做法，可以在將來(lái)業(yè)務(wù)邏輯擴(kuò)展或更改時(shí)盡量減少代碼更改。
要點(diǎn)：將模型作為參數(shù)而不是 ID 傳遞給函數(shù)。
// DON'T
void onTapMyWidget(int subjectId) {
...
}// DO
void onTapMyWidget(Subject subject) {
...
}規(guī)則 5：始終指定 HitTestBehavior
使用 GestureDetector 進(jìn)行點(diǎn)擊時(shí)，不要忘記將 behavior 添加到您的小部件中。此屬性指定點(diǎn)擊（點(diǎn)擊）如何傳播到子窗口小部件。在大多數(shù)情況下，您將使用 HitTestBehavior.opaque ，但我建議您應(yīng)該查看 flutter.dev 上的簡(jiǎn)短描述以了解情況。
要點(diǎn)：通過(guò)指定小部件的點(diǎn)擊行為來(lái)絕對(duì)控制小部件的子部件。
class MyWidget extends StatelessWidget {
...
@override
Widget build(BuildContext context) => GestureDetector(
onTap: onTap,
behavior: HitTestBehavior.opaque,
child: Container(
...
),
);
}
