📜  Flutter – 使用 GetX 库创建对话框

📅  最后修改于: 2021-09-02 05:36:23             🧑  作者: Mango

当我们想以对话框的形式显示任何内容时,我们可以使用Flutter的GetX 库创建这个对话框。当我们通常在flutter创建一个对话框时,它会使用 context 和 builder 来创建一个Dialog 。对于开发人员使用上下文和构建器创建对话框来说,这不是一个好的做法。为了克服这个问题,我们可以使用 GetX 使用简单的代码创建对话框,并且非常容易创建对话框。它不使用上下文和构建器来创建Dialog

按照以下步骤使用 GetX 库在flutter创建 Dialog:

  • 创建一个新的Flutter应用程序:
flutter create APP_NAME
  • pubspec.yaml文件中的依赖下添加get

  • 导入进入主。dart
import 'package:get/get.dart';

Get.defaultDialog()的构造函数

defaultDialog({
String title = "Alert", 
TextStyle? titleStyle, 
Widget? content, 
void Function()? onConfirm, 
void Function()? onCancel, 
void Function()? onCustom, 
Color? cancelTextColor, 
Color? confirmTextColor, 
String? textConfirm, 
String? textCancel, 
String? textCustom, 
Widget? confirm, 
Widget? cancel, 
Widget? custom, 
Color? backgroundColor, 
bool barrierDismissible = true, 
Color? buttonColor, 
String middleText = "Dialog made in 3 lines of code", 
TextStyle? middleTextStyle, 
double radius = 20.0, 
List? actions, 
Future Function()? onWillPop})

让我们讨论一下 Get.defaultDialog() 的一些属性:

  • title : 对话框的标题。默认情况下,标题为“警报”。
  • titleStyle :使用 TextStyle 赋予标题文本的样式。
  • content : 提供给 Dialog 的内容,应该使用 Widget 来提供内容。
  • middleText :提供给对话框的中间文本。如果我们也使用内容,那么将显示内容小部件数据。
  • barrierDismissible :如果我们想通过在对话框外单击来关闭对话框,则其值应为 true 否则为 false。默认情况下,它的值为true
  • middleTextStyle : 使用 TextStyle 赋予中间文本的样式。
  • radius : 提供的对话框的半径。默认情况下,其值为 20。
  • backgroundColor : 对话框的背景颜色。

主要的。dart文件:

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: 'Dialog Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Home(),
      debugShowCheckedModeBanner: false,
    );
  }
}
  
class Home extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('GeeksforGeeks Dialog'),
        centerTitle: true,
        backgroundColor: Colors.green,
      ),
      body: Center(
        child: ElevatedButton(
          child: Text('Show Dialog'),
          onPressed: (){
            Get.defaultDialog(
  
            );
          },
        )
      ),
    );
  }
}


解释:

  • 第一步是创建一个应用程序并运行它。
  • 我们使用GetMaterialApp而不是MaterialApp,因为我们正在使用GetX库构建我们的应用程序。如果我们不使用 GetMaterialApp,那么它的功能将不起作用。
  • 然后我们创建了一个无状态的 Home 类。然后我们创建了一个 Scaffold 小部件。
  • 在正文中,在中心创建一个按钮。
  • 使用Get.defaultDialog()创建对话框。
  • 我们可以向这个默认对话框添加额外的功能,如背景颜色、对话框半径、中间文本、barrierDismissible 等。

输出:

Get.defaultDialog(
              title: "GeeksforGeeks",
              middleText: "Hello world!",
              backgroundColor: Colors.green,
              titleStyle: TextStyle(color: Colors.white),
              middleTextStyle: TextStyle(color: Colors.white),

            );

执行上述代码时,输出将是:

Get.defaultDialog(
              title: "GeeksforGeeks",
              middleText: "Hello world!",
              backgroundColor: Colors.green,
              titleStyle: TextStyle(color: Colors.white),
              middleTextStyle: TextStyle(color: Colors.white),
              textConfirm: "Confirm",
              textCancel: "Cancel",
              cancelTextColor: Colors.white,
              confirmTextColor: Colors.white,
              buttonColor: Colors.red,
              barrierDismissible: false,
              radius: 50,
              content: Column(
                children: [
                  Container(child:Text("Hello 1")),
                  Container(child:Text("Hello 2")),
                  Container(child:Text("Hello 3")),
                ],
              )
            );

当我们执行上面的代码时,输出将是: