超越基础：Flutter 中 onTap 的 5 条规则让你脱颖而出

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

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

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

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

要点：不要在小部件内创建匿名函数来编写业务逻辑。相反，甚至可以将 onTap 传递到小部件之外，并让父级处理它。

dart 复制代码

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

dart 复制代码

// 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。

dart 复制代码

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

dart 复制代码

// 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() 更好。

dart 复制代码

// DON'T

class MyScreen extends StatelessWidget {

  ...

  @override
  Widget build(BuildContext context) => Scaffold(
    body: MyWidget(
      onTap: controller.fetchData,
    );
  );
}

dart 复制代码

// 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 传递给函数。

dart 复制代码

// DON'T

void onTapMyWidget(int subjectId) {
  ...
}

dart 复制代码

// DO

void onTapMyWidget(Subject subject) {
  ...
}

规则 5：始终指定 HitTestBehavior

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

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

dart 复制代码

class MyWidget extends StatelessWidget {

  ...

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

原文：chtgupta.medium.com/beyond-the-...