江苏龙网

  1. 主页 > 生活百科 > >

Flutter 中 onTap 事件的 5 条规则让你脱颖而出

Flutter


Flutter 中 onTap 事件的 5 条规则让你脱颖而出

文章插图

小事情决定了你的熟练程度，这些小细节的有趣之处在于它们的丰富性 。您将在代码库中的数百个位置遇到 onTap 事件 。增强它们可以对代码的可维护性和最终用户体验产生重大的积极影响 。
onTap 就是这样一个微小但丰富的东西——我们在每个屏幕上都使用它 。这纯粹是关于那些 onTap 事件：该做和不该做 。
规则 1：小部件不应实现 onTap 逻辑顾名思义，小部件是在屏幕上绘制的一块 UI，它应该对业务逻辑一无所知 。如果需要，它可以将事件传递给其父级 。做到这一点的最佳方法是使用函数作为构造函数参数 。
要点：不要在小部件内创建匿名函数来编写业务逻辑 。相反，甚至可以将 onTap 传递到小部件之外 ， 并让父级处理它 。
// 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 事件的情况下存在 。
要点：使来自小部件的所有事件函数都可以为 null 。
// 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 事件函数 。银行应用程序中的小部件应该不知道它属于银行应用程序，并且只有足够的数据来绘制它自己和它的孩子 。换句话说，一个小部件应该是美丽而愚蠢的 。
要点：命名 UI 事件函数以指示事件，而不是指示底层业务逻辑 。将这样的函数命名为 onTapRegisterButton() 比 register() 更好 。
【Flutter 中 onTap 事件的 5 条规则让你脱颖而出】// 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() {    ...  }}


推荐阅读


上一篇：电脑装独立显卡后无法正常显示：驱动、兼容性、电源和线缆问题

下一篇：模拟AI配音软件走红