超越基础:Flutter 中 onTap 事件的五条规则让你脱颖而出
创始人
2025-07-05 19:00:31
0

小事情决定了你的熟练程度,这些小细节的有趣之处在于它们的丰富性。您将在代码库中的数百个位置遇到 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(
      ...
    ),
  );
}

相关内容

热门资讯

如何允许远程连接到MySQL数... [[277004]]【51CTO.com快译】默认情况下,MySQL服务器仅侦听来自localhos...
如何利用交换机和端口设置来管理... 在网络管理中,总是有些人让管理员头疼。下面我们就将介绍一下一个网管员利用交换机以及端口设置等来进行D...
施耐德电气数据中心整体解决方案... 近日,全球能效管理专家施耐德电气正式启动大型体验活动“能效中国行——2012卡车巡展”,作为该活动的...
20个非常棒的扁平设计免费资源 Apple设备的平面图标PSD免费平板UI 平板UI套件24平图标Freen平板UI套件PSD径向平...
德国电信门户网站可实时显示全球... 德国电信周三推出一个门户网站,直观地实时提供其安装在全球各地的传感器网络检测到的网络攻击状况。该网站...
为啥国人偏爱 Mybatis,... 关于 SQL 和 ORM 的争论,永远都不会终止,我也一直在思考这个问题。昨天又跟群里的小伙伴进行...
《非诚勿扰》红人闫凤娇被曝厕所... 【51CTO.com 综合消息360安全专家提醒说,“闫凤娇”、“非诚勿扰”已经被黑客盯上成为了“木...
2012年第四季度互联网状况报... [[71653]]  北京时间4月25日消息,据国外媒体报道,全球知名的云平台公司Akamai Te...