Flutter按钮导航异常：未点击即跳转/目标页面内容嵌入原组件

问题分析 #

1. 无需点击按钮自动导航：大概率是路由初始化逻辑错误，或是Question组件加载时其他代码触发了导航；另外按钮中的Navigator.pop(context)在无上级路由时会引发异常，间接导致意外导航。
2. Home内容显示在Question组件中：一是Home未用Scaffold包裹，跳转后页面无法完整替换；二是导航上下文使用错误，路由栈逻辑混乱。

修复方案 #

1. 修正Question组件的导航逻辑 #

移除多余的Navigator.pop(context)，若Question是当前栈顶页面，pushReplacement会直接替换当前路由，无需先执行pop：

OutlinedButton(
  onPressed: () {
    Navigator.pushReplacement(
      context,
      MaterialPageRoute(builder: (context) => const Home()),
    );
  },
  child: const Text("Submit"),
)

2. 给Home组件添加Scaffold包裹 #

确保Home作为独立页面完整展示，必须用Scaffold包裹内容：

class _HomeState extends State<Home> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        child: Column(
          children: <Widget>[
            Row(
              children: <Widget>[
                Container(child: const Icon(Icons.home)),
                Container(child: const Icon(Icons.calendar_month)),
                Container(
                  child: const Text(" home button"),
                )
              ],
            )
          ],
        ),
      ),
    );
  }
}

3. 检查路由初始化逻辑 #

确保启动后默认显示Question页面，避免自动导航：

void main() {
  runApp(const MyApp());
}

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'App',
      home: const Question(), // 设置初始页面为Question
    );
  }
}

4. 正确管理Question的文本控制器 #

Question作为StatelessWidget直接初始化控制器会导致状态丢失，建议转为StatefulWidget：

class Question extends StatefulWidget {
  const Question({super.key});

  @override
  State<Question> createState() => _QuestionState();
}

class _QuestionState extends State<Question> {
  late TextEditingController durationController;
  late TextEditingController lengthController;

  @override
  void initState() {
    super.initState();
    durationController = TextEditingController();
    lengthController = TextEditingController();
  }

  @override
  void dispose() {
    durationController.dispose();
    lengthController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    // 保留原build方法中的布局内容
    return Container(
      margin: const EdgeInsets.only(top: 80),
      child: Column(
        children: <Widget>[
          Container(
            margin: const EdgeInsets.only(top: 30, right: 180),
            child: const Text("enter the period duration", style: TextStyle(fontSize: 18)),
          ),
          Card(
              child: TextField(
            decoration: const InputDecoration(labelText: "period duration"),
            controller: durationController,
            keyboardType: TextInputType.number,
          )),
          Container(
            margin: const EdgeInsets.only(top: 30, right: 180),
            child: const Text("enter the period length", style: TextStyle(fontSize: 18)),
          ),
          Card(
              child: TextField(
            decoration: const InputDecoration(labelText: "period length"),
            controller: lengthController,
            keyboardType: TextInputType.number,
          )),
          OutlinedButton(
              onPressed: () {
                Navigator.pushReplacement(context,
                    MaterialPageRoute(builder: (context) => const Home()));
              },
              child: const Text("Submit")),
        ],
      ),
    );
  }
}

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