面试题：Flutter中Navigator的基本使用

使用Navigator实现页面跳转及传递简单数据
- 页面跳转基础：在Flutter中，Navigator类用于管理应用程序的路由栈，通过Navigator.push方法可以实现页面跳转。
- 传递简单数据：可以通过MaterialPageRoute的builder参数来构建新页面，并在构建新页面时将数据传递进去。例如，假设有一个源页面要传递一个字符串到目标页面：

// 源页面传递数据
Navigator.push(
  context,
  MaterialPageRoute(
    builder: (context) => TargetPage(data: 'Hello, this is passed data'),
  ),
);

目标页面接收数据：

class TargetPage extends StatelessWidget {
  final String data;
  TargetPage({required this.data});
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Target Page')),
      body: Center(
        child: Text(data),
      ),
    );
  }
}

在有状态组件中进行页面跳转操作

import 'package:flutter/material.dart';

class StatefulPage extends StatefulWidget {
  @override
  _StatefulPageState createState() => _StatefulPageState();
}

class _StatefulPageState extends State<StatefulPage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Stateful Page')),
      body: Center(
        child: ElevatedButton(
          child: Text('Jump to Target Page'),
          onPressed: () {
            Navigator.push(
              context,
              MaterialPageRoute(
                builder: (context) => TargetPage(data: 'Data from Stateful Page'),
              ),
            );
          },
        ),
      ),
    );
  }
}

在无状态组件中进行页面跳转操作

import 'package:flutter/material.dart';

class StatelessPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Stateless Page')),
      body: Center(
        child: ElevatedButton(
          child: Text('Jump to Target Page'),
          onPressed: () {
            Navigator.push(
              context,
              MaterialPageRoute(
                builder: (context) => TargetPage(data: 'Data from Stateless Page'),
              ),
            );
          },
        ),
      ),
    );
  }
}

星途面试题库

面试题：Flutter中Navigator的基本使用

知识考点

面试题答案