通过 Flutter 制作的命名路由 Android App 传递参数

Question

我一直在 AppBrewery 上一门关于 Flutter 的课程，这实际上是我对编程的介绍，所以需要学习的内容很多。

我正在开发一个模块来制作 BMI 体重指数计算器，并且正在学习如何命名和映射路线。我们面临在我们的应用程序中创建路线的挑战，我选择了映射路线方法。 而且效果很好。

当我观看视频时，她使用了命名路线，因为它只有 2 个屏幕，但因为它有效，我就把它留在那里。

稍后在模块中，我不得不将一些参数传递给第二页，很清楚如何使用命名路由来做到这一点，但我的代码没有运气。

有人可以告诉我为什么我一直传递空参数，即使我的代码目前没有错误。

这是我的文件。

main.dart

 import 'package:bmi_calculator/results_page.dart';
import 'package:flutter/material.dart';
import 'input_page.dart';

void main() => runApp(BMICalculator());

class BMICalculator extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData.dark().copyWith(
        primaryColor: Color(0XFF0A0E21),
        scaffoldBackgroundColor: Color(0XFF0A0E21),
      ),
      initialRoute: '/',
      routes: {
        '/': (context) => InputPage(),
        '/results': (context) => ResultsPage(),
      },
    );
  }
}

我的输入页面无论如何都是重要的部分

    Gender selectedGender;
  int initialHeight = 180;
  int initialWeight = 60;
  int initialAge = 30;

          BottomButton(
            buttonTitle: 'CALCULATE',
            onPress: () {
              CalculatorBrain calc =
                  CalculatorBrain(height: initialHeight, weight: initialWeight);
              Navigator.pushNamed(
                context,
                '/results',
                arguments: ResultsPage(
                  bmiResults: calc.calculateBMI(),
                  resultText: calc.getResult(),
                  resultSummary: calc.getResultSummary(),
                ),
              );
              //Navigate to ResultsPage
            },
          ),
        ],
      ),
    );
  }
}

还有计算器类

   import 'dart:math';

class CalculatorBrain {
  CalculatorBrain({this.height, this.weight});

  final int height;
  final int weight;
  double _bmi;

  String calculateBMI() {
    double _bmi = weight / pow(height / 100, 2);
    return _bmi.toStringAsFixed(1);
  }

  String getResult() {
    if (_bmi >= 25) {
      return 'OVERWEIGHT';
    } else if (_bmi > 18.5) {
      return 'NORMAL';
    } else {
      return 'UNDERWEIGHT';
    }
  }

  String getResultSummary() {
    if (_bmi >= 25) {
      return 'You have a higher than normal body weight.  Try to exercise more.';
    } else if (_bmi > 18.5) {
      return 'You have a normal body weight.  Good Job';
    } else {
      return 'You have a lower than normal body weight.  You can eat a bit more.';
    }
  }
}

这个新手会很感激你的见解我确实在颤振食谱中看到了一个不错的文档，但我仍然很难理解。

Answer 1

用于传递参数

Navigator.pushNamed(
            context,
            '/results',
            arguments: {
              'bmiResults': calc.calculateBMI(),
              'resultText': calc.getResult(),
              'resultSummary': calc.getResultSummary(),
            },
          );

在路线部分

class BMICalculator extends StatelessWidget {


@override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData.dark().copyWith(
        primaryColor: Color(0XFF0A0E21),
        scaffoldBackgroundColor: Color(0XFF0A0E21),
      ),
      initialRoute: '/',
      onGenerateRoute: RouteManager.generateRoute,
    );
  }
}

路由管理器

class RouteManager {
  static Route<dynamic> generateRoute(RouteSettings settings) {
    final args = settings.arguments;

    switch (settings.name) {
      case '/':
        return getRouteFor(
          InputPage(),
        );

      case '/results':
        if (args is Map) {
          return getRouteFor(
            ResultsPage(
              bmiResults: args['bmiResults'],
              resultText: args['resultText'],
              resultSummary: args['resultSummary'],
            ),
          );
        }

        return _underConstructionRoute();

      default:
        return _underConstructionRoute();
    }
  }

  static Route<dynamic> getRouteFor(Widget widget) {
    return Platform.isIOS
        ? CupertinoPageRoute(builder: (_) => widget)
        : MaterialPageRoute(builder: (_) => widget);
  }

  static Route<dynamic> _underConstructionRoute() {
    return getRouteFor(
      Scaffold(
        appBar: AppBar(
          title: Text(title),
          centerTitle: true,
        ),
        body: Center(
          child: Text(
            'Under Construction',
            style: TextStyle(
              fontSize: 40,
            ),
          ),
        ),
      ),
    );
  }
}

从 ResoCoder 查看详细的tutorial。并添加必要的导入。

Answer 2

您需要使用 ScreenArguments 类的参数：

放到屏幕上：

Navigator.pushNamed(
  context,
  '/results',
  // Your arguments
  arguments: ScreenArguments(),
);

进入新屏幕：

@override
Widget build(BuildContext context) {
  final ScreenArguments args = ModalRoute.of(context).settings.arguments;
  // Your code
}

此外，您可以在Official Documentation 中找到所有可能通过 Flutter SDK 提供路由的方法。

Answer 3

Flutter Navigator 2.0 非常适合您的需求。 Here 是相同的文章。