Flutter – 使用 GetX 库创建对话框

GetX 是一个 Flutter 状态管理库，它可以快速简洁地确立应用程序的架构和逻辑。GetX 还包含了其他功能，例如 GetBuilder 和 GetXController。

本文将介绍如何使用 GetX 库创建对话框。下面是步骤：

1. 导入 Get 库

import 'package:get/get.dart';

2. 创建一个简单的对话框

void showSimpleDialog() {
  Get.defaultDialog(title: 'Simple Dialog', content: Text('This is a simple dialog.'));
}

3. 在对话框中添加按钮

void showCustomDialog() {
  Get.defaultDialog(
    title: 'Custom Dialog',
    content: Text('This is a custom dialog.'),
    actions: <Widget>[
      FlatButton(
        child: Text('CANCEL'),
        onPressed: () => Get.back(),
      ),
      FlatButton(
        child: Text('OK'),
        onPressed: () => Get.back(),
      ),
    ],
  );
}

4. 在对话框中添加输入字段

TextEditingController nameController = TextEditingController();

void showInputDialog() {
  Get.defaultDialog(
    title: 'Input Dialog',
    content: TextField(
      controller: nameController,
      decoration: InputDecoration(hintText: 'Enter your name'),
    ),
    actions: <Widget>[
      FlatButton(
        child: Text('CANCEL'),
        onPressed: () => Get.back(),
      ),
      FlatButton(
        child: Text('OK'),
        onPressed: () {
          print(nameController.text);
          Get.back();
        },
      ),
    ],
  );
}

5. 在控制器中使用 GetXDialog

class HomeController extends GetxController {
  final _username = ''.obs;

  get username => this._username.value;
  set username(value) => this._username.value = value;

  void showInputDialog() {
    Get.dialog(
      Container(
        padding: EdgeInsets.all(20.0),
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: [
            Text('Enter your name'),
            SizedBox(height: 20.0),
            TextField(
              onChanged: (value) => username = value,
            ),
            SizedBox(height: 20.0),
            Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: [
                RaisedButton(
                  child: Text('CANCEL'),
                  onPressed: () => Get.back(),
                ),
                RaisedButton(
                  child: Text('OK'),
                  onPressed: () {
                    print(username);
                    Get.back();
                  },
                ),
              ],
            ),
          ],
        ),
      ),
    );
  }
}

6. 在页面中使用 GetXDialog

class HomePage extends StatelessWidget {
  final HomeController controller = Get.put(HomeController());

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Home')),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text('Welcome ${controller.username}'),
            SizedBox(height: 20.0),
            RaisedButton(
              child: Text('SHOW DIALOG'),
              onPressed: () => controller.showInputDialog(),
            ),
          ],
        ),
      ),
    );
  }
}

至此，我们已经了解了如何利用 GetX 库创建对话框。不仅如此，GetX还有许多其它功能，例如路由管理、依赖管理、国际化、网络请求等等，可以大大提升开发效率。如果你还没有尝试过 GetX，请务必试一试。