如何从一个文件调用包含 Navigator.pushNamed 的函数到另一个文件？

Question

我对 Flutter 还很陌生，我想创建一个名为 Functions 的单独文件，在其中可以保留所有函数，然后从另一个文件中调用它们。在这个函数文件中我有这个函数：

内部函数.dart：

import 'package:flutter/cupertino.dart';
import '../screens/productView/productPage.dart';

class Functions {
  void productView() {
    Navigator.pushNamed(context, ProductView.id);
  }
}

通过这个功能我想简单地移动到另一个页面。我想在另一个文件中调用此函数，该文件只是卡片，当单击它们时，它们会移动到该卡片的描述。这是我在另一个文件中的代码：

内卡.dart：

import 'package:flutter/material.dart';
import '../utilities/constants.dart';
import 'package:frontend_fst/screens/productView/productPage.dart';
import '../utilities/functions.dart';

class FSTCards extends StatelessWidget {
  const FSTCards({super.key});
  Functions functions = Functions();

  @override
  Widget build(BuildContext context) {


    return Row(
      mainAxisAlignment: MainAxisAlignment.spaceEvenly,
      children: [
        ...List.generate(7, (index) {
          return Flexible(
            child: InkWell(
              onTap: functions.productView,
              child: Card(
                elevation: 2.5,
                child: Column(
                  mainAxisSize: MainAxisSize.min,
                  children: [
                    Expanded(
                      child: ClipRRect(
                        borderRadius: BorderRadius.circular(20),
                        child: Image.asset(
                            height: 150,
                            width: 150,
                            productExample
                        ),
                      ),
                    ),
                    const SizedBox(height: 8),
                    const Text('Product Name'),
                    const Text('Price'),
                    const SizedBox(height: 16),
                  ],
                ),
              ),
            ),
          );
          })
      ],
    );
  }
}

在onTap中，我调用存储在functions.dart文件中的函数。但在函数中：

void productView() {
        Navigator.pushNamed(context, ProductView.id);
      }

'context' 给了我一个错误，当鼠标悬停在它上面时，它显示“未定义的名称'context'”。我不完全确定如何做到这一点。我的想法是我必须将上下文作为参数传递给函数，但我不知道如何做到这一点。有人可以帮帮我吗？或者，如果只是我不能这样做，我必须在我使用它的文件中具有该函数，如下所示：

import 'package:flutter/material.dart';
import '../utilities/constants.dart';
import 'package:frontend_fst/screens/productView/productPage.dart';
import '../utilities/functions.dart';

class FSTCards extends StatelessWidget {
  const FSTCards({super.key});

  @override
  Widget build(BuildContext context) {

    void productView() {
      Navigator.pushNamed(context, ProductView.id);
    }

    return Row(
      mainAxisAlignment: MainAxisAlignment.spaceEvenly,
      children: [
        ...List.generate(7, (index) {
          return Flexible(
            child: InkWell(
              onTap: productView,
              child: Card(
                elevation: 2.5,
                child: Column(
                  mainAxisSize: MainAxisSize.min,
                  children: [
                    Expanded(
                      child: ClipRRect(
                        borderRadius: BorderRadius.circular(20),
                        child: Image.asset(
                            height: 150,
                            width: 150,
                            productExample
                        ),
                      ),
                    ),
                    const SizedBox(height: 8),
                    const Text('Product Name'),
                    const Text('Price'),
                    const SizedBox(height: 16),
                  ],
                ),
              ),
            ),
          );
          })
      ],
    );
  }
}

Answer 1

让我们分享一个我不建议遵循的解决方案。

您可以通过参数

BuildContext

来传递

  void productView(BuildContext context) {
    Navigator.pushNamed(context, ProductView.id);
  }

并使用类似

 onTap: () => functions.productView(context),

另外，你可以只创建静态方法

class Functions {
 static void productView(BuildContext context) {
    Navigator.pushNamed(context, ProductView.id);
  }
}

只需致电

 onTap: () => Functions.productView(context),

但是，虽然您喜欢遵循这种方法，但我强烈建议使用 navigator 2 软件包，例如 go_router。