面试题：Flutter中如何使用Dart实现页面间数据传递

Question

在Flutter应用开发里，假设你有两个页面PageA和PageB，从PageA跳转到PageB时需要传递一个字符串类型的数据。请描述至少两种使用Dart在Flutter中实现这种页面间数据传递的方法，并给出关键代码示例。

Answer 1

方法一：通过构造函数传递数据

1. 在PageB中定义接收数据的变量和构造函数

class PageB extends StatelessWidget {
  final String data;
  PageB({required this.data});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('PageB')),
      body: Center(
        child: Text('Received data: $data'),
      ),
    );
  }
}

2. 在PageA中通过Navigator.push跳转到PageB并传递数据

class PageA extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('PageA')),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            String dataToSend = 'Hello from PageA';
            Navigator.push(
              context,
              MaterialPageRoute(builder: (context) => PageB(data: dataToSend)),
            );
          },
          child: Text('Go to PageB'),
        ),
      ),
    );
  }
}

方法二：使用Navigator.pushNamed并通过ModalRoute.of(context)?.settings.arguments获取数据

1. 配置路由并在PageB中获取数据

void main() {
  runApp(
    MaterialApp(
      initialRoute: '/',
      routes: {
        '/': (context) => PageA(),
        '/pageB': (context) {
          final arguments = ModalRoute.of(context)?.settings.arguments as String?;
          return PageB(data: arguments ?? '');
        },
      },
    ),
  );
}

class PageB extends StatelessWidget {
  final String data;
  PageB({required this.data});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('PageB')),
      body: Center(
        child: Text('Received data: $data'),
      ),
    );
  }
}

2. 在PageA中通过Navigator.pushNamed跳转到PageB并传递数据

class PageA extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('PageA')),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            String dataToSend = 'Hello from PageA';
            Navigator.pushNamed(context, '/pageB', arguments: dataToSend);
          },
          child: Text('Go to PageB'),
        ),
      ),
    );
  }
}