Flutter - 从屏幕返回数据

在开发 Flutter 应用程序时，我们有时需要在屏幕之间进行导航，并从另一个屏幕返回数据。Flutter 提供了一种简单的方法来实现这个目标，下面是如何实现的。

步骤

第一步

首先，我们需要创建一个名为 FirstScreen 的屏幕，其中包含一个 FlatButton 按钮，该按钮将导航到另一个屏幕。

class FirstScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('First Screen'),
      ),
      body: Center(
        child: FlatButton(
          child: Text('Open Screen'),
          onPressed: () {
            // navigate to second screen and wait for a result
          },
        ),
      ),
    );
  }
}

第二步

接下来，我们需要创建一个名为 SecondScreen 的屏幕，这是我们要导航到的屏幕。在该屏幕中，我们将显示一个文本框和一个按钮。

文本框用于输入数据，而按钮用于将数据返回到第一个屏幕。当我们点击按钮时，我们需要使用 Navigator.pop 方法，并将要返回的数据作为参数传递。

class SecondScreen extends StatelessWidget {
  final TextEditingController _textFieldController = TextEditingController();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Second Screen'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            TextField(
              controller: _textFieldController,
              decoration: InputDecoration(
                hintText: 'Enter some text...',
              ),
            ),
            SizedBox(height: 20),
            RaisedButton(
              child: Text('Send Data Back'),
              onPressed: () {
                // send data back to first screen
                Navigator.pop(context, _textFieldController.text);
              },
            ),
          ],
        ),
      ),
    );
  }
}

第三步

现在，我们需要在 FlatButton 按钮的 onPressed 委托中导航到第二个屏幕。为了等待第二个屏幕返回数据，我们需要使用 await 关键字调用 Navigator.push 方法。这将返回从第二个屏幕传回的数据。

class FirstScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('First Screen'),
      ),
      body: Center(
        child: FlatButton(
          child: Text('Open Screen'),
          onPressed: () async {
            final result = await Navigator.push(
              context,
              MaterialPageRoute(builder: (context) => SecondScreen()),
            );
            print('Result: $result');
          },
        ),
      ),
    );
  }
}

第四步

现在，我们已经成功地从第二个屏幕返回数据并在第一个屏幕上打印出来。你可以根据你的需求进行修改和扩展，例如使用不同的窗口小部件来收集和返回数据。

结论

这就是从屏幕返回数据的简单示例。Flutter 使得实现它变得非常容易和直观，因此无论您的应用程序需要哪种导航，都可以很容易地实现它。