Flutter实现加载页过渡跳转结果页及返回重复加载问题解决

• 现有跳转逻辑连续使用Navigator.push压入两个新路由，最终导航栈顺序为UserDetailPage → GetMeasurementsPage → ShowMeasurementsPage，加载页始终残存在路由栈中
• 从结果页点击返回时，会直接回到未被销毁的GetMeasurementsPage，如果加载页的测量逻辑写在initState等生命周期中，页面重新可见就会再次触发加载流程
• 测量逻辑与加载页生命周期解绑，写在UserDetailPage的点击回调中，缺少路由栈清理步骤

将测量逻辑下沉到GetMeasurementsPage内部，测量完成后使用pushReplacement跳转结果页，自动将加载页从路由栈中替换移除，避免返回时回到加载页。

1. 修改UserDetailPage按钮点击逻辑 #

仅负责跳转加载页并传入所需参数，等待整个测量流程退出后清空输入框：

onPressed: () {
  Navigator.push(
    context,
    MaterialPageRoute(
      builder: (context) => GetMeasurementsPage(
        name: name.text,
        nohap: nohap.text,
        tinggi: tinggi.text,
      ),
    ),
  ).whenComplete(() {
    // 流程结束返回当前页时，清空输入框
    name.clear();
    nohap.clear();
    tinggi.clear();
  });
}

2. 修改GetMeasurementsPage代码 #

新增参数接收用户输入，在页面初始化时执行测量任务，完成后替换路由到结果页：

import 'package:flutter/material.dart';
import 'package:bodymeasure/show_measurements_page.dart';

class GetMeasurementsPage extends StatefulWidget {
  static String tag = 'get-measurement-page';
  // 新增接收三个业务参数
  final String name;
  final String nohap;
  final String tinggi;

  const GetMeasurementsPage({
    Key? key,
    required this.name,
    required this.nohap,
    required this.tinggi,
  }) : super(key: key);
  @override
  _GetMeasurementsPageState createState() => _GetMeasurementsPageState();
}

class _GetMeasurementsPageState extends State<GetMeasurementsPage> {
  @override
  void initState() {
    super.initState();
    // 页面初始化时执行测量任务
    _doMeasurement();
  }

  Future<void> _doMeasurement() async {
    try {
      // 替换为实际测量逻辑，此处用3秒延迟模拟加载过程
      await Future.delayed(const Duration(seconds: 3));

      if (!mounted) return;
      // 用pushReplacement跳转，当前加载页会被结果页替换，从路由栈移除
      Navigator.pushReplacement(
        context,
        MaterialPageRoute(
          builder: (context) => ShowMeasurementsPage(
            name: widget.name,
            nohap: widget.nohap,
            tinggi: widget.tinggi,
          ),
        ),
      );
    } catch (e) {
      // 测量失败时弹出提示并返回上一页
      if (mounted) {
        Navigator.pop(context);
        ScaffoldMessenger.of(context).showSnackBar(
          const SnackBar(content: Text("测量失败，请重试")),
        );
      }
    }
  }

  @override
  Widget build(BuildContext context) {
    // 可自定义加载页UI，如加载动画、提示文案
    return const Scaffold(
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            CircularProgressIndicator(),
            SizedBox(height: 16),
            Text("测量中，请稍候..."),
          ],
        ),
      ),
    );
  }
}

• 跳转完成后路由栈为UserDetailPage → ShowMeasurementsPage，加载页已被移除
• 在结果页点击返回按钮，会直接回到UserDetailPage，不会再触发测量加载流程
• 测量逻辑仅在进入加载页时执行一次，不会重复触发
• 保留原有流程结束清空输入框的逻辑

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