📜  Flutter – 从屏幕返回数据

📅  最后修改于: 2021-09-23 06:33:13             🧑  作者: Mango

与 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()),
    );
  }
}


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'),
              ),
            )
          ],
        ),
      ),
    );
  }
}


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'),
);


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.'),
              ),
            )
          ],
        ),
      ),
    );
  }
}


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

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

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 的基础知识吗?
单击此处前往由我们的专家精心策划的指南,旨在让您立即做好行业准备!