Flutter，自定义任意路径嫦娥奔月（二）：让Item也可以响应交互

2023-11-27 12:32:32

Flutter是一套用于构建跨平台应用程序的开源UI软件开发工具包，它让您能够使用一套代码库在iOS、Android、Web和桌面等平台上构建高质量的原生用户界面。

在上一篇文章中，我们实现了自定义任意路径嫦娥奔月的功能。然而，Item点击还是要在原来位置点击才能生效。这回我们给他安排上~~~~~~

步骤一：准备工作

首先，我们需要确保您已经安装了Flutter并设置了开发环境。如果您还没有这样做，请按照Flutter官方网站上的说明进行操作。

接下来，我们需要创建一个新的Flutter项目。您可以使用以下命令：

flutter create my_app

进入项目目录：

cd my_app

步骤二：导入依赖项

我们需要在项目中导入以下依赖项：

dependencies:
  flutter:
    sdk: flutter
  # 使用 CUPPERTINO 按钮风格
  cupertino_icons: ^1.0.2

步骤三：创建自定义小部件

接下来，我们需要创建一个自定义小部件，它将处理Item的交互。我们称之为ItemButton。

import 'package:flutter/material.dart';

class ItemButton extends StatelessWidget {
  final VoidCallback onPressed;
  final Widget child;

  const ItemButton({Key key, this.onPressed, this.child}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Material(
      color: Colors.transparent,
      child: InkWell(
        onTap: onPressed,
        child: child,
      ),
    );
  }
}

步骤四：使用自定义小部件

现在，我们可以使用自定义小部件ItemButton来处理Item的交互。

在您的build()方法中，将ItemButton包装在每个Item周围。例如：

AnimatedBuilder(
  animation: animation,
  builder: (BuildContext context, Widget child) {
    return ItemButton(
      onPressed: () {
        // 这里处理Item的点击事件
      },
      child: child,
    );
  },
  child: Container(
    width: 20.0,
    height: 20.0,
    decoration: BoxDecoration(
      color: Colors.red,
      shape: BoxShape.circle,
    ),
  ),
);