您当前的位置:首页 > 电脑百科 > 程序开发 > 编程百科

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

时间:2023-11-04 14:11:55  来源:微信公众号  作者:独立开发者张张

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

小事情决定了你的熟练程度,这些小细节的有趣之处在于它们的丰富性。您将在代码库中的数百个位置遇到 onTap 事件。增强它们可以对代码的可维护性和最终用户体验产生重大的积极影响。

onTap 就是这样一个微小但丰富的东西——我们在每个屏幕上都使用它。这纯粹是关于那些 onTap 事件:该做和不该做。

规则 1:小部件不应实现 onTap 逻辑

顾名思义,小部件是在屏幕上绘制的一块 UI,它应该对业务逻辑一无所知。如果需要,它可以将事件传递给其父级。做到这一点的最佳方法是使用函数作为构造函数参数。

要点:不要在小部件内创建匿名函数来编写业务逻辑。相反,甚至可以将 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,
    ),
  );
}

规则 2:onTap 函数应该可为 null

作为 UI 的一部分,小部件应该是可重用的。不同的用例可能需要也可能不需要其 onTap 功能。因为它存在的主要原因是在屏幕上绘制而不是向其父级或控制器发送事件,所以它应该能够在有或没有 onTap 事件的情况下存在。

要点:使来自小部件的所有事件函数都可以为 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(
      ...
    ),
  );
}

规则 3:UI 必须对逻辑一无所知,即使是指示性意义上的也不行

即使在使用最佳实践之后,一个常见的错误是命名指示业务逻辑的 UI 事件函数。银行应用程序中的小部件应该不知道它属于银行应用程序,并且只有足够的数据来绘制它自己和它的孩子。换句话说,一个小部件应该是美丽而愚蠢的。

要点:命名 UI 事件函数以指示事件,而不是指示底层业务逻辑。将这样的函数命名为 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() {
    ...
  }

}

规则 4:尽可能传递模型

这一点不仅限于 UI,也适用于所有函数。每当您需要传递一些数据作为参数时,请尽量传递整个模型,而不仅仅是一个 ID 或名称。这是一个很好的做法,可以在将来业务逻辑扩展或更改时尽量减少代码更改。

要点:将模型作为参数而不是 ID 传递给函数。

// DON'T

void onTapMyWidget(int subjectId) {
  ...
}
// DO

void onTapMyWidget(Subject subject) {
  ...
}

规则 5:始终指定 HitTestBehavior

使用 GestureDetector 进行点击时,不要忘记将 behavior 添加到您的小部件中。此属性指定点击(点击)如何传播到子窗口小部件。在大多数情况下,您将使用 HitTestBehavior.opaque ,但我建议您应该查看 flutter.dev 上的简短描述以了解情况。

要点:通过指定小部件的点击行为来绝对控制小部件的子部件。

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-e5ab0fa8622


Tags:Flutter   点击:()  评论:()
声明:本站部分内容及图片来自互联网,转载是出于传递更多信息之目的,内容观点仅代表作者本人,不构成投资建议。投资者据此操作,风险自担。如有任何标注错误或版权侵犯请与我们联系,我们将及时更正、删除。
▌相关推荐
五大跨平台桌面应用开发框架:Electron、Tauri、Flutter等
一、什么是跨平台桌面应用开发框架跨平台桌面应用开发框架是一种工具或框架,它允许开发者使用一种统一的代码库或语言来创建能够在多个操作系统上运行的桌面应用程序。传统上...【详细内容】
2024-02-26  Search: Flutter  点击:(46)  评论:(0)  加入收藏
Flutter 中 onTap 事件的 5 条规则让你脱颖而出
小事情决定了你的熟练程度,这些小细节的有趣之处在于它们的丰富性。您将在代码库中的数百个位置遇到 onTap 事件。增强它们可以对代码的可维护性和最终用户体验产生重大的...【详细内容】
2023-11-04  Search: Flutter  点击:(180)  评论:(0)  加入收藏
Flutter 地图在携程的最佳实践
作者简介Leo,携程高级移动开发工程师,关注跨端技术,致力于高效、高性能开发。Jarmon,携程高级移动开发工程师,专注 Flutter、iOS 开发。本文将重点突出基于 flutter-boost 的混...【详细内容】
2023-07-07  Search: Flutter  点击:(251)  评论:(0)  加入收藏
一篇带你了解跨平台的 UI 工具包—Flutter
Flutter是Google开发的一套全新的跨平台、开源UI框架,支持iOS、Android系统开发,并且是未来新操作系统Fuchsia的默认开发套件。自从2017年5月发布第一个版本以来,目前Flutter已...【详细内容】
2023-03-29  Search: Flutter  点击:(177)  评论:(0)  加入收藏
快速掌握 Flutter 图片开发核心技能
大家好,我是 17。在 Flutter 中使用图片是最基础能力之一。17 做了精心准备,满满的都是干货!本文介绍如何在 Flutter 中使用图片,尽量详细,示例完整,包会!使用网络图片使用网络图片...【详细内容】
2023-03-06  Search: Flutter  点击:(262)  评论:(0)  加入收藏
混合开发架构|Android工程集成React Native、Flutter、ReactJs
架构设计说明该篇文章,介绍并记录在大前端混合架构开发中的重要细节和流程。通过在安卓原生工程中集成两大主流混合框架React Native、Flutter,以及ReactJs[Vue],集成三类模块m...【详细内容】
2023-03-06  Search: Flutter  点击:(212)  评论:(0)  加入收藏
跨平台开发,Flutter还是React Native?
作者 | 胥磊审校 | 孙淑娟随着移动应用的不断普及,各个公司都在寻找可以在多种设备上运行的跨平台应用解决方案,这里跨平台主要是指安卓和iOS。统计数据显示:截止2021年6月,安卓...【详细内容】
2023-02-09  Search: Flutter  点击:(150)  评论:(0)  加入收藏
基于 Flutter 构建的高性能 Web 渲染引擎 Kraken
《开源精选》是我们分享Github、Gitee等开源社区中优质项目的栏目,包括技术、学习、实用与各种有趣的内容。本期推荐的是一个阿里开源基于 Flutter 进行渲染的高性能引擎&mda...【详细内容】
2022-11-03  Search: Flutter  点击:(370)  评论:(0)  加入收藏
Flutter 焦点管理 FocusScope 组件
前言更改用户交互中的文本字段颜色。预览 当选择一个文本字段并接受输入时,它被称为具有“焦点”通常,用户通过点击将焦点转移到文本字段,开发人员通过使用本菜谱中描述的工具...【详细内容】
2022-11-02  Search: Flutter  点击:(421)  评论:(0)  加入收藏
Flutter 系列 - 环境搭建
Flutter 作为火热的跨端工具包,在 github 上超过 120k 的关注量,可见一斑。基于目前本人正在学习 Flutter 的路上,会将整个学习的过程记录下来。本博文主要讲解环境的搭建,先把...【详细内容】
2022-10-18  Search: Flutter  点击:(239)  评论:(0)  加入收藏
▌简易百科推荐
即将过时的 5 种软件开发技能!
作者 | Eran Yahav编译 | 言征出品 | 51CTO技术栈(微信号:blog51cto) 时至今日,AI编码工具已经进化到足够强大了吗?这未必好回答,但从2023 年 Stack Overflow 上的调查数据来看,44%...【详细内容】
2024-04-03    51CTO  Tags:软件开发   点击:(5)  评论:(0)  加入收藏
跳转链接代码怎么写?
在网页开发中,跳转链接是一项常见的功能。然而,对于非技术人员来说,编写跳转链接代码可能会显得有些困难。不用担心!我们可以借助外链平台来简化操作,即使没有编程经验,也能轻松实...【详细内容】
2024-03-27  蓝色天纪    Tags:跳转链接   点击:(12)  评论:(0)  加入收藏
中台亡了,问题到底出在哪里?
曾几何时,中台一度被当做“变革灵药”,嫁接在“前台作战单元”和“后台资源部门”之间,实现企业各业务线的“打通”和全域业务能力集成,提高开发和服务效率。但在中台如火如荼之...【详细内容】
2024-03-27  dbaplus社群    Tags:中台   点击:(8)  评论:(0)  加入收藏
员工写了个比删库更可怕的Bug!
想必大家都听说过删库跑路吧,我之前一直把它当一个段子来看。可万万没想到,就在昨天,我们公司的某位员工,竟然写了一个比删库更可怕的 Bug!给大家分享一下(不是公开处刑),希望朋友们...【详细内容】
2024-03-26  dbaplus社群    Tags:Bug   点击:(5)  评论:(0)  加入收藏
我们一起聊聊什么是正向代理和反向代理
从字面意思上看,代理就是代替处理的意思,一个对象有能力代替另一个对象处理某一件事。代理,这个词在我们的日常生活中也不陌生,比如在购物、旅游等场景中,我们经常会委托别人代替...【详细内容】
2024-03-26  萤火架构  微信公众号  Tags:正向代理   点击:(10)  评论:(0)  加入收藏
看一遍就理解:IO模型详解
前言大家好,我是程序员田螺。今天我们一起来学习IO模型。在本文开始前呢,先问问大家几个问题哈~什么是IO呢?什么是阻塞非阻塞IO?什么是同步异步IO?什么是IO多路复用?select/epoll...【详细内容】
2024-03-26  捡田螺的小男孩  微信公众号  Tags:IO模型   点击:(8)  评论:(0)  加入收藏
为什么都说 HashMap 是线程不安全的?
做Java开发的人,应该都用过 HashMap 这种集合。今天就和大家来聊聊,为什么 HashMap 是线程不安全的。1.HashMap 数据结构简单来说,HashMap 基于哈希表实现。它使用键的哈希码来...【详细内容】
2024-03-22  Java技术指北  微信公众号  Tags:HashMap   点击:(11)  评论:(0)  加入收藏
如何从头开始编写LoRA代码,这有一份教程
选自 lightning.ai作者:Sebastian Raschka机器之心编译编辑:陈萍作者表示:在各种有效的 LLM 微调方法中,LoRA 仍然是他的首选。LoRA(Low-Rank Adaptation)作为一种用于微调 LLM(大...【详细内容】
2024-03-21  机器之心Pro    Tags:LoRA   点击:(12)  评论:(0)  加入收藏
这样搭建日志中心,传统的ELK就扔了吧!
最近客户有个新需求,就是想查看网站的访问情况。由于网站没有做google的统计和百度的统计,所以访问情况,只能通过日志查看,通过脚本的形式给客户导出也不太实际,给客户写个简单的...【详细内容】
2024-03-20  dbaplus社群    Tags:日志   点击:(4)  评论:(0)  加入收藏
Kubernetes 究竟有没有 LTS?
从一个有趣的问题引出很多人都在关注的 Kubernetes LTS 的问题。有趣的问题2019 年,一个名为 apiserver LoopbackClient Server cert expired after 1 year[1] 的 issue 中提...【详细内容】
2024-03-15  云原生散修  微信公众号  Tags:Kubernetes   点击:(6)  评论:(0)  加入收藏
站内最新
站内热门
站内头条