Flutter onTap中讓你脫穎而出的5條規(guī)則
引言
小事情決定了你的熟練程度，這些小細節(jié)的有趣之處在于它們的豐富性。您將在代碼庫中的數(shù)百個位置遇到 onTap 事件。增強它們可以對代碼的可維護性和最終用戶體驗產(chǎn)生重大的積極影響。
onTap 就是這樣一個微小但豐富的東西——我們在每個屏幕上都使用它。這純粹是關于那些 onTap 事件：該做和不該做。
規(guī)則 1：小部件不應實現(xiàn) onTap 邏輯
顧名思義，小部件是在屏幕上繪制的一塊 UI，它應該對業(yè)務邏輯一無所知。如果需要，它可以將事件傳遞給其父級。做到這一點的最佳方法是使用函數(shù)作為構造函數(shù)參數(shù)。
要點：不要在小部件內創(chuàng)建匿名函數(shù)來編寫業(yè)務邏輯。相反，甚至可以將 onTap 傳遞到小部件之外，并讓父級處理它。
// 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ù)應該可為 null
作為 UI 的一部分，小部件應該是可重用的。不同的用例可能需要也可能不需要其 onTap 功能。因為它存在的主要原因是在屏幕上繪制而不是向其父級或控制器發(fā)送事件，所以它應該能夠在有或沒有 onTap 事件的情況下存在。
要點：使來自小部件的所有事件函數(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 必須對邏輯一無所知，即使是指示性意義上的也不行
即使在使用最佳實踐之后，一個常見的錯誤是命名指示業(yè)務邏輯的 UI 事件函數(shù)。銀行應用程序中的小部件應該不知道它屬于銀行應用程序，并且只有足夠的數(shù)據(jù)來繪制它自己和它的孩子。換句話說，一個小部件應該是美麗而愚蠢的。
要點：命名 UI 事件函數(shù)以指示事件，而不是指示底層業(yè)務邏輯。將這樣的函數(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：盡可能傳遞模型
這一點不僅限于 UI，也適用于所有函數(shù)。每當您需要傳遞一些數(shù)據(jù)作為參數(shù)時，請盡量傳遞整個模型，而不僅僅是一個 ID 或名稱。這是一個很好的做法，可以在將來業(yè)務邏輯擴展或更改時盡量減少代碼更改。
要點：將模型作為參數(shù)而不是 ID 傳遞給函數(shù)。
// DON'T
void onTapMyWidget(int subjectId) {
...
}// DO
void onTapMyWidget(Subject subject) {
...
}規(guī)則 5：始終指定 HitTestBehavior
使用 GestureDetector 進行點擊時，不要忘記將 behavior 添加到您的小部件中。此屬性指定點擊（點擊）如何傳播到子窗口小部件。在大多數(shù)情況下，您將使用 HitTestBehavior.opaque ，但我建議您應該查看 flutter.dev 上的簡短描述以了解情況。
要點：通過指定小部件的點擊行為來絕對控制小部件的子部件。
class MyWidget extends StatelessWidget {
...
@override
Widget build(BuildContext context) => GestureDetector(
onTap: onTap,
behavior: HitTestBehavior.opaque,
child: Container(
...
),
);
}以上就是Flutter onTap中讓你脫穎而出的5條規(guī)則的詳細內容，更多關于Flutter onTap規(guī)則的資料請關注腳本之家其它相關文章！
相關文章
這篇文章主要介紹了Android如何采用RotateAnimation繪制一個旋轉動畫，文中的實現(xiàn)方法講解詳細，感興趣的小伙伴可以跟隨小編一起試一試2022-01-01
這篇文章主要介紹了獲取Android系統(tǒng)唯一識別碼的方法,涉及通過編程獲取Android系統(tǒng)硬件設備標識的相關技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-10-10
LinearLayout又稱作線性布局，是一種非常常用的布局。正如它的名字所描述的一樣，這個布局會將它所包含的控件在線性方向上依次排列。既然是線性排列，肯定就不僅只有一個方向，這里一般只有兩個方向：水平方向和垂直方向2022-03-03
Android Studio如何獲取SQLite數(shù)據(jù)并顯示到ListView上
這篇文章主要介紹了Android Studio獲取SQLite數(shù)據(jù)并顯示到ListView上，本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下2020-03-03
本篇文章是對在Android應用中如何反饋Crash報告的詳細分析介紹。需要的朋友參考下2013-05-05
這篇文章主要介紹了Android中使用Post請求的方法,實例分析了Android中使用post請求的原理與具體實現(xiàn)技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-07-07
這篇文章主要為大家詳細介紹了Android如何實現(xiàn)給EditText添加下劃線，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-08-08
這篇文章主要介紹了Android編程四大組件之Activity用法,實例分析了Activity的創(chuàng)建,生命周期,內存管理及啟動模式等,具有一定參考借鑒價值,需要的朋友可以參考下2016-01-01
本文將利用AnimatedList組件實現(xiàn)列表元素的一些動態(tài)效果，例如添加元素時的漸現(xiàn)效果，刪除元素逐漸消失的效果等，感興趣的小伙伴可以了解一下2022-03-03
Android 7.0 SEAndroid app權限配置方法
今天小編就為大家分享一篇Android 7.0 SEAndroid app權限配置方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-07-07