📜  Flutter – 使用 GetX 库函数导航到上一个屏幕

📅  最后修改于: 2022-05-13 01:55:06.811000             🧑  作者: Mango

Flutter – 使用 GetX 库函数导航到上一个屏幕

当我们使用任何应用程序时,我们会进行导航以在屏幕之间导航。有时我们想返回上一个屏幕,所以我们通常使用Navigator.pop(context) 。这是使用上下文,有时我们会找到轻松完成任务的快捷方式。为此,我们在flutter中有Get.back() 。我们可以将结果发送到上一个路由并进行操作。

语法

Get.back()

执行:

  • 创建一个新的flutter应用程序。
flutter create APPNAME
  • 在依赖部分的pubspec.yaml文件中添加get依赖。

  • 在 main.js 中导入包。dart
import 'package:get/get.dart';
  • 现在,编写代码来实现 Get.back()。为此,我们应该有两个屏幕,首先,我们导航到一个新屏幕并返回前一个屏幕并提供一些数据。

示例 1:

Dart
import 'package:flutter/material.dart';
import 'package:get/get.dart';
  
  
void main() {
  runApp(MyApp());
}
  
class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return GetMaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
          
        primarySwatch: Colors.blue,
      ),
      home: Page1(),
      debugShowCheckedModeBanner: false,
    );
  }
}
  
class Page1 extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("GeekforGeeks GFG"),
        centerTitle: true,
        backgroundColor: Colors.green,
      ),
     body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text("Page 1", textScaleFactor: 2,),
            Container(
              child: ElevatedButton(
                child: Text("Navigate to next screen"),
                onPressed: () { 
                  Get.to(Page2());
                }
              ),
            ),
          ],
        ),
      ),
    );
  }
}
  
  
class Page2 extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("GeekforGeeks GFG"),
        backgroundColor: Colors.green,
      ),
     body: Center(
       child: Column(
         mainAxisAlignment: MainAxisAlignment.center,
         children: [
           Text("Page 2", textScaleFactor: 2,),
           Container(
              child: ElevatedButton(
                child: Text("Navigate to previous screen"),
                onPressed: ()=> Get.back()
              ),
            ),
         ],
       ),
      ),
    );
  }
}


Dart
import 'package:flutter/material.dart';
import 'package:get/get.dart';
  
  
void main() {
    
  runApp(MyApp());
}
  
class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return GetMaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
          
        primarySwatch: Colors.blue,
      ),
      home: Page1(),
      debugShowCheckedModeBanner: false,
    );
  }
}
  
class Page1 extends StatefulWidget {
  @override
  _Page1State createState() => _Page1State();
}
  
class _Page1State extends State {
  String? x;
  
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("GeekforGeeks GFG"),
        centerTitle: true,
        backgroundColor: Colors.green,
      ),
     body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text("Page 1", textScaleFactor: 2,),
            Container(
              child: ElevatedButton(
                child: Text("Navigate to next screen"),
                onPressed: () async{ 
                 x= await  Get.to(Page2());
                 setState(() {
                     
                 });
                }
              ),
            ),
            Text(x?? x.toString(), textScaleFactor: 2,),
          ],
        ),
      ),
    );
  }
}
  
  
class Page2 extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("GeekforGeeks GFG"),
        backgroundColor: Colors.green,
      ),
     body: Center(
       child: Column(
         mainAxisAlignment: MainAxisAlignment.center,
         children: [
           Text("Page 2", textScaleFactor: 2,),
           Container(
              child: ElevatedButton(
                child: Text("Navigate to previous screen"),
                onPressed: ()=> Get.back( result: "Data after returning to first page")
              ),
            ),
         ],
       ),
      ),
    );
  }
}


输出:在这种情况下,我们不会在返回后发送任何状态获取。我们只是使用Get.back() 返回。

示例 2:

Dart

import 'package:flutter/material.dart';
import 'package:get/get.dart';
  
  
void main() {
    
  runApp(MyApp());
}
  
class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return GetMaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
          
        primarySwatch: Colors.blue,
      ),
      home: Page1(),
      debugShowCheckedModeBanner: false,
    );
  }
}
  
class Page1 extends StatefulWidget {
  @override
  _Page1State createState() => _Page1State();
}
  
class _Page1State extends State {
  String? x;
  
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("GeekforGeeks GFG"),
        centerTitle: true,
        backgroundColor: Colors.green,
      ),
     body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text("Page 1", textScaleFactor: 2,),
            Container(
              child: ElevatedButton(
                child: Text("Navigate to next screen"),
                onPressed: () async{ 
                 x= await  Get.to(Page2());
                 setState(() {
                     
                 });
                }
              ),
            ),
            Text(x?? x.toString(), textScaleFactor: 2,),
          ],
        ),
      ),
    );
  }
}
  
  
class Page2 extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("GeekforGeeks GFG"),
        backgroundColor: Colors.green,
      ),
     body: Center(
       child: Column(
         mainAxisAlignment: MainAxisAlignment.center,
         children: [
           Text("Page 2", textScaleFactor: 2,),
           Container(
              child: ElevatedButton(
                child: Text("Navigate to previous screen"),
                onPressed: ()=> Get.back( result: "Data after returning to first page")
              ),
            ),
         ],
       ),
      ),
    );
  }
}

输出:在这里,我们使用Get.back(结果:“返回第一页后的数据”)将结果发送回主页。并使用x= await Get.to(Page2());接收结果在第一页。