如何在Flutter结果页Dart文件中复用BMI计算器并在Text组件中使用

步骤1：提取独立的BMI计算函数 #

先把和页面状态绑定的计算逻辑抽成独立可复用的函数，让它只负责接收输入、返回计算结果，这样任意页面都能调用。你可以把这个函数放在单独的工具文件（比如bmi_utils.dart）里，也可以直接在需要的文件中定义：

// 计算BMI的独立函数，接收身高（单位：cm）和体重（单位：kg），返回BMI整数结果
int calculateBMI(int heightCm, int weightKg) {
  double heightM = heightCm / 100;
  // 标准BMI公式：体重(kg) ÷ (身高(m))²
  int bmiValue = (weightKg / (heightM * heightM)).toInt();
  return bmiValue;
}

步骤2：原页面调用计算函数并跳转结果页 #

在你原来的输入页面，修改calculatePressed方法，调用上面的计算函数得到BMI值，再通过路由把结果传递给结果页面：

void calculatePressed() {
  // 先做基础校验，避免空值或非数字输入报错
  if (_currentValue1 == null || _currentValue2 == null) {
    ScaffoldMessenger.of(context).showSnackBar(
      const SnackBar(content: Text('请输入完整的身高和体重')),
    );
    return;
  }

  // 解析输入的身高和体重
  int height = int.parse(_currentValue1.toString());
  int weight = int.parse(_currentValue2.toString());

  // 调用独立计算函数
  int bmiResult = calculateBMI(height, weight);

  // 跳转到结果页面，传递BMI值
  Navigator.push(
    context,
    MaterialPageRoute(
      builder: (context) => ResultPage(bmi: bmiResult),
    ),
  );
}

步骤3：结果页面接收并展示BMI值 #

创建结果页面的Dart文件（比如result_page.dart），通过构造函数接收BMI参数，然后在Text组件中展示：

import 'package:flutter/material.dart';

class ResultPage extends StatelessWidget {
  // 接收从原页面传递来的BMI值
  final int bmi;

  const ResultPage({super.key, required this.bmi});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('BMI计算结果'),
      ),
      body: Center(
        child: Text(
          'Your BMI is $bmi',
          style: const TextStyle(
            fontSize: 28,
            fontWeight: FontWeight.w500,
          ),
        ),
      ),
    );
  }
}

额外提示 #

• 建议给输入框添加数字输入限制，减少格式错误概率；
• 如果需要多页面共享计算结果，可考虑用Provider、Riverpod等状态管理库，简单场景下路由传参就足够。

内容的提问来源于stack exchange，提问作者Armin youuu