flutter - 如何在颤振中使用 GetX 创建带有文本字段的警报对话框

Question

我可以使用Get.defaultDialog()函数创建弹出对话框。我在 GetX 中找不到用于创建自定义警报对话框的方法。

我正在使用下面的函数来实现使用原生 Flutter showDialog api 的功能。

showDialog(
        context: context,
        builder: (context) {
          return AlertDialog(
              content: Column(
                mainAxisSize: MainAxisSize.min,
                children: [
                  TextField(
                    controller: categoryNameController,
                    keyboardType: TextInputType.text,
                    maxLines: 1,
                    decoration: InputDecoration(
                        labelText: 'Category Name',
                        hintMaxLines: 1,
                        border: OutlineInputBorder(
                            borderSide:
                                BorderSide(color: Colors.green, width: 4.0))),
                  ),
                  SizedBox(
                    height: 30.0,
                  ),
                  RaisedButton(
                    onPressed: () {
                      if (categoryNameController.text.isNotEmpty) {
                        var expenseCategory = ExpenseCategory(
                            categoryNameController.text,
                            id: _addExpenseController.expenseCategories.length);
                        _expenseController.addExpenseCategory(expenseCategory);
                        _addExpenseController.expenseCategories
                            .add(expenseCategory);
                        Get.back();
                      }
                    },
                    child: Text(
                      'ADD CATEGORY',
                      style: TextStyle(color: Colors.white, fontSize: 16.0),
                    ),
                    color: Colors.redAccent,
                  )
                ],
              ),
              elevation: 12.0,
              shape: RoundedRectangleBorder(
                  borderRadius: BorderRadius.circular(10.0)));
        });

Answer 1

我可以使用以下功能来实现

Get.defaultDialog(
      title: '',
        content: Column(
          mainAxisSize: MainAxisSize.min,
          children: [
            TextField(
              controller: settingsScreenController.categoryNameController,
              keyboardType: TextInputType.text,
              maxLines: 1,
              decoration: InputDecoration(
                  labelText: 'Category Name',
                  hintMaxLines: 1,
                  border: OutlineInputBorder(
                      borderSide: BorderSide(color: Colors.green, width: 4.0))),
            ),
            SizedBox(
              height: 30.0,
            ),
            RaisedButton(
              onPressed: () {
                if (settingsScreenController
                    .categoryNameController.text.isNotEmpty) {
                  var expenseCategory = ExpenseCategory(
                      settingsScreenController.categoryNameController.text,
                      id: _addExpenseController.expenseCategories.length);
                  settingsScreenController.addExpenseCategory(expenseCategory);
                  _addExpenseController.expenseCategories.add(expenseCategory);
                  Get.back();
                } else {
                  Utils.showSnackBar("Enter category name");
                }
              },
              child: Text(
                'ADD CATEGORY',
                style: TextStyle(color: Colors.white, fontSize: 16.0),
              ),
              color: Colors.redAccent,
            )
          ],
        ),
        radius: 10.0);

但我无法删除对话框中的标题区域。

没有标题的原生 API 对话框

带标题的 GetX 对话框 api

Answer 2

import 'dart:ui';

import 'package:flutter/material.dart';
import 'package:get/get.dart';

void main(List<String> args) {
  runApp(GetMaterialApp(
    title: 'My App',
    home: MyApp(),
  ));
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Show Dialog'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            ElevatedButton(
                onPressed: () {
                  Get.defaultDialog(
                    
                  );
                },
                child: Text('Click GetX')),
          ],
        ),
      ),
    );
  }
}