小事情決定了你的熟練程度，這些小細節的有趣之處在于它們的豐富性。您將在代碼庫中的數百個位置遇到 onTap 事件。增強它們可以對代碼的可維護性和最終用戶體驗產生重大的積極影響。ix528資訊網——每日最新資訊28at.com

onTap 就是這樣一個微小但豐富的東西——我們在每個屏幕上都使用它。這純粹是關于那些 onTap 事件：該做和不該做。ix528資訊網——每日最新資訊28at.com

規則 1：小部件不應實現 onTap 邏輯

顧名思義，小部件是在屏幕上繪制的一塊 UI，它應該對業務邏輯一無所知。如果需要，它可以將事件傳遞給其父級。做到這一點的最佳方法是使用函數作為構造函數參數。ix528資訊網——每日最新資訊28at.com

要點：不要在小部件內創建匿名函數來編寫業務邏輯。相反，甚至可以將 onTap 傳遞到小部件之外，并讓父級處理它。ix528資訊網——每日最新資訊28at.com

// DON'Tclass MyWidget extends StatelessWidget {  @override  Widget build(BuildContext context) => GestureDetector(    onTap: () {      debugPrint('MyWidget onTap called');      fetchFromServer();    },    child: Container(      width: 100,      height: 100,      color: Colors.orange,    ),  );}

// DOclass 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,    ),  );}

規則 2：onTap 函數應該可為 null

作為 UI 的一部分，小部件應該是可重用的。不同的用例可能需要也可能不需要其 onTap 功能。因為它存在的主要原因是在屏幕上繪制而不是向其父級或控制器發送事件，所以它應該能夠在有或沒有 onTap 事件的情況下存在。ix528資訊網——每日最新資訊28at.com

要點：使來自小部件的所有事件函數都可以為 null。ix528資訊網——每日最新資訊28at.com

// DON'Tclass MyWidget extends StatelessWidget {  const MyWidget({required this.onTap});  final void Function() onTap;  @override  Widget build(BuildContext context) => GestureDetector(    onTap: onTap,    child: Container(      ...    ),  );}

// DOclass MyWidget extends StatelessWidget {  const MyWidget({this.onTap});  final void Function()? onTap;  @override  Widget build(BuildContext context) => GestureDetector(    onTap: onTap,    child: Container(      ...    ),  );}

規則 3：UI 必須對邏輯一無所知，即使是指示性意義上的也不行

即使在使用最佳實踐之后，一個常見的錯誤是命名指示業務邏輯的 UI 事件函數。銀行應用程序中的小部件應該不知道它屬于銀行應用程序，并且只有足夠的數據來繪制它自己和它的孩子。換句話說，一個小部件應該是美麗而愚蠢的。ix528資訊網——每日最新資訊28at.com

要點：命名 UI 事件函數以指示事件，而不是指示底層業務邏輯。將這樣的函數命名為 onTapRegisterButton() 比 register() 更好。ix528資訊網——每日最新資訊28at.com

// DON'Tclass MyScreen extends StatelessWidget {  ...  @override  Widget build(BuildContext context) => Scaffold(    body: MyWidget(      onTap: controller.fetchData,    );  );}

// DOclass MyScreen extends StatelessWidget {  ...  @override  Widget build(BuildContext context) => Scaffold(    body: MyWidget(      onTap: controller.onTapMyWidget,    );  );}class MyScreenController {  ...  void onTapMyWidget() {    _fetchData()  }  void _fetchData() {    ...  }}

規則 4：盡可能傳遞模型

這一點不僅限于 UI，也適用于所有函數。每當您需要傳遞一些數據作為參數時，請盡量傳遞整個模型，而不僅僅是一個 ID 或名稱。這是一個很好的做法，可以在將來業務邏輯擴展或更改時盡量減少代碼更改。ix528資訊網——每日最新資訊28at.com

要點：將模型作為參數而不是 ID 傳遞給函數。ix528資訊網——每日最新資訊28at.com

// DON'Tvoid onTapMyWidget(int subjectId) {  ...}

// DOvoid onTapMyWidget(Subject subject) {  ...}

規則 5：始終指定 HitTestBehavior

使用 GestureDetector 進行點擊時，不要忘記將 behavior 添加到您的小部件中。此屬性指定點擊（點擊）如何傳播到子窗口小部件。在大多數情況下，您將使用 HitTestBehavior.opaque ，但我建議您應該查看 flutter.dev 上的簡短描述以了解情況。ix528資訊網——每日最新資訊28at.com

要點：通過指定小部件的點擊行為來絕對控制小部件的子部件。ix528資訊網——每日最新資訊28at.com

class MyWidget extends StatelessWidget {  ...  @override  Widget build(BuildContext context) => GestureDetector(    onTap: onTap,    behavior: HitTestBehavior.opaque,    child: Container(      ...    ),  );}

原文：https://chtgupta.medium.com/beyond-the-basics-5-rules-for-ontap-events-in-flutter-to-outshine-others-e5ab0fa8622ix528資訊網——每日最新資訊28at.com

本文鏈接：http://www.tebozhan.com/showinfo-26-16936-0.html超越基礎：Flutter 中 onTap 事件的 5 條規則讓你脫穎而出

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。郵件：2376512515@qq.com

上一篇： 開箱即用的前端圖片壓縮方案

下一篇： 【技術革命】JDK21虛擬線程來襲，讓系統的吞吐量翻倍！