Flutter – 从屏幕返回数据

与 UI 的交互是任何应用程序的重要组成部分。在此期间，可能需要从屏幕返回数据。这种交互的范围可以从选择一个选项到通过 UI 中的各种按钮导航到不同的路线。在本文中，我们将探讨在Flutter应用程序中从屏幕返回数据的过程。

在Flutter，可以使用Navigator.pop()方法来完成。我们将通过实现一个简单的应用程序来尝试这个。为此，请执行以下步骤：

• 添加主屏幕
• 添加一个按钮来启动选择屏幕
• 显示选项
• 选择选项后切换到主屏幕
• 在主屏幕上显示选择

现在让我们构建一个简单的应用程序：

创建主屏幕：

我们需要一个带按钮的主屏幕。点击时按钮应加载到选项屏幕。可以如下图所示完成：

Dart

class HomeScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Returning Data'),
      ),
      body: Center(child: SelectionButton()),
    );
  }
}

添加启动按钮和选择屏幕：

要创建启动按钮以启动选择屏幕并添加选择屏幕，请使用以下命令：

Dart

class SelectionButton extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ElevatedButton(
      onPressed: () {
        _navigateAndDisplaySelection(context);
      },
      child: Text('Launch Option Screen'),
    );
  }
  
  _navigateAndDisplaySelection(BuildContext context) async {
    final result = await Navigator.push(
      context,
      MaterialPageRoute(builder: (context) => SelectionScreen()),
    );
  }
}

显示选项：

为简单起见，我们将提供 2 个选项，并将数据与这两个选项关联，点击后可以返回主屏幕。

Dart

class SelectionScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Options'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Padding(
              padding: const EdgeInsets.all(8.0),
              child: ElevatedButton(
                onPressed: () {
                },
                child: Text('Option 1'),
              ),
            ),
            Padding(
              padding: const EdgeInsets.all(8.0),
              child: ElevatedButton(
                onPressed: () {
                },
                child: Text('Option 2'),
              ),
            )
          ],
        ),
      ),
    );
  }
}

将数据添加到选项：

我们将为选项 1 和选项 2 附加一个onPressed()回调，它返回与每个选项相关的数据，如下所示：

Dart

ElevatedButton(
  onPressed: () {
    Navigator.pop(context, 'You choose option 1');
  },
  child: Text('Option 1'),
);
ElevatedButton(
  onPressed: () {
    Navigator.pop(context, 'You choose option 2');
  },
  child: Text('Option 2'),
);

显示选择：

我们将通过使用SelectionButton的_navigateAndDisplaySelection()方法使用小吃吧：

Dart

_navigateAndDisplaySelection(BuildContext context) async {
  final result = await Navigator.push(
    context,
    MaterialPageRoute(builder: (context) => SelectionScreen()),
  );
  Scaffold.of(context)
    ..removeCurrentSnackBar()
    ..showSnackBar(SnackBar(content: Text("$result")));
}

完整的源代码：

Dart

import 'package:flutter/material.dart';
  
void main() {
  runApp(MaterialApp(
    title: 'Returning Data',
    home: HomeScreen(),
  ));
}
  
class HomeScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('GeeksForGeeks'),
        backgroundColor: Colors.green,
      ),
      body: Center(child: SelectionButton()),
    );
  }
}
  
class SelectionButton extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ElevatedButton(
      style: ButtonStyle(
        backgroundColor: MaterialStateProperty.all(Colors.green),
      ),
      onPressed: () {
        _navigateAndDisplaySelection(context);
      },
      child: Text('Launch Option Screen'),
    );
  }
  
  _navigateAndDisplaySelection(BuildContext context) async {
    final result = await Navigator.push(
      context,
      MaterialPageRoute(builder: (context) => SelectionScreen()),
    );
  
    Scaffold.of(context)
      ..removeCurrentSnackBar()
      ..showSnackBar(SnackBar(content: Text("$result")));
  }
}
  
class SelectionScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Select Option'),
        backgroundColor: Colors.green,
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Padding(
              padding: const EdgeInsets.all(8.0),
              child: ElevatedButton(
                style: ButtonStyle(
                  backgroundColor: MaterialStateProperty.all(Colors.green),
                ),
                onPressed: () {
                  Navigator.pop(context, ' You selected the Option 1');
                },
                child: Text('Option 1'),
              ),
            ),
            Padding(
              padding: const EdgeInsets.all(8.0),
              child: ElevatedButton(
                style: ButtonStyle(
                  backgroundColor: MaterialStateProperty.all(Colors.green),
                ),
                onPressed: () {
                  Navigator.pop(context, 'You selected the Option 2');
                },
                child: Text('Option 2.'),
              ),
            )
          ],
        ),
      ),
    );
  }
}

输出：

想要一个更快节奏和更具竞争力的环境来学习 Android 的基础知识吗?

单击此处前往由我们的专家精心策划的指南，旨在让您立即做好行业准备！