键盘打开时 Get.defaultDialog() 底部溢出

Question

我将

Get.defaultDialog()

与对话框底部的

ListView.Builder

和

TextformField()

一起使用。问题是每当我打开键盘时，对话框底部就会溢出。

我尝试了各种方法，但没有任何效果。

我尝试过的解决方案之一

我尝试过的其他解决方案都与上述类似。

如果我给出

double.maxFinite

，那么对话框将覆盖整个屏幕。我不希望这种事发生。

我想要实现的是，高度不应超过对话框的内容。

这是我的dialog()代码：

    void cancelTask() {
    RxInt selectedreason = 0.obs;
    String cancelReason = kCancelReasonList[0].name;
    TextEditingController cancelReasonController = TextEditingController();
    Get.defaultDialog(
      title: kLanguageList!.value.clearTask,
      titleStyle: TextStyle(
        color: kBlack,
        fontSize: kTextScaleFactor * 18,
        fontWeight: FontWeight.bold,
      ),
      textConfirm: kLanguageList!.value.ok,
      confirmTextColor: kBlack,
      textCancel: kLanguageList!.value.cancel,
      cancelTextColor: kOrange,
      buttonColor: Colors.transparent,
      contentPadding: EdgeInsets.symmetric(
          vertical: kWidth * 0.02, horizontal: kWidth * 0.02),
      onConfirm: () {},
      content: SingleChildScrollView(
        child: Obx(
          () => AnimatedContainer(
            duration: selectedreason.value != 3
                ? const Duration(seconds: 1)
                : const Duration(milliseconds: 500),
            width: kWidth * 0.7,
            height:
                selectedreason.value != 3 ? kHeight * 0.285 : kHeight * 0.37,
            child: Column(
              mainAxisAlignment: MainAxisAlignment.start,
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                ListView.builder(
                  shrinkWrap: true,
                  itemCount: kCancelReasonList.length,
                  itemBuilder: (context, index) {
                    return RadioListTile(
                      toggleable: true,
                      title: CommonText(
                        text: kCancelReasonList[index].name.obs,
                        size: 1,
                        boldText: false,
                      ),
                      value: index,
                      groupValue: selectedreason.value,
                      onChanged: (int? reason) {
                        selectedreason.value = reason!;
                        cancelReason = kCancelReasonList[index].name;
                      },
                    );
                  },
                ),
                RadioListTile(
                  title: CommonText(
                    text: kLanguageList!.value.other.obs,
                    size: 1,
                    boldText: false,
                  ),
                  value: 3,
                  groupValue: selectedreason.value,
                  onChanged: (int? reason) {
                    selectedreason.value = reason!;
                    if (reason == 3) {
                      cancelReasonController.text = "";
                      cancelReason = "";
                    }
                  },
                ),
                Obx(() => AnimatedContainer(
                      duration: selectedreason.value == 3
                          ? const Duration(seconds: 1)
                          : const Duration(milliseconds: 500),
                      curve: Curves.fastOutSlowIn,
                      height: selectedreason.value == 3 ? kHeight * 0.085 : 0,
                      child: selectedreason.value == 3
                          ? CommonTextFormField(
                              controller: cancelReasonController,
                              onChanged: (reason) {
                                if (reason.isNotEmpty) {
                                  cancelReason = reason;
                                }
                              },
                              keyboardType: TextInputType.text,
                              focusBorderColor: kOrange,
                            )
                          : const SizedBox.shrink(),
                    ))
              ],
            ),
          ),
        ),
      ),
    );
  }

Answer 1

尝试在

resizeToAvoidBottomInset: false,

小部件中添加

Scaffold

属性。

Answer 2

我真的不知道它是否适合你，但是，我已经通过在 Get.defaultDialog 中进行编辑来解决这个问题。

在 Get.defaultDialog 内，有一列必须用 SingleChildScrollView 包装并重新启动应用程序。如果问题和我一样，那么它应该像魅力一样起作用。

Answer 3

对于任何其他遇到此问题的可怜迷失的灵魂，我想出了一个合理可行的解决方案，不涉及弄乱 GetX 源代码。

虽然我确信这可以通过

Get.defaultDialog()

实现，但您可以通过

Get.dialog()

给自己更多的喘息空间，因为您可以提供自己的 Flutter

Dialog

。

这样做可以让您访问

insetPadding

作为

Dialog

的属性，它定义了对话框边缘与屏幕边缘之间的空间。

让我们以新的

FooDialog()

类为例。

class FooDialog extends StatelessWidget {
  late final EdgeInsets? insetPadding;

  FooDialog (
      {Key? key,
      this.insetPadding})
      : super(key: key);

  //Here's the juicy important bit
  //Passing in any default insets lets us preserve the width of any
  EdgeInsets? calculateWithKeyboard(EdgeInsets? defaultInsets, BuildContext context) {
    if (MediaQuery.of(context).viewInsets.bottom > 0) {
      if (defaultInsets != null) {
        return EdgeInsets.fromLTRB(defaultInsets.left, 0, defaultInsets.right, 0);
      } else {
        return EdgeInsets.all(0);
      }
    } else
      return defaultInsets;
  }

  @override
  Widget build(BuildContext context) {
    return Dialog( 
        insetPadding: calculateWithKeyboard(insetPadding, context), // USAGE
        child: // etc etc

本质上，对话框被chomped的原因是因为一旦键盘展开，insetPadding实际上超过了对话框本身的大小；没有剩余对话框空间。

当你不需要额外的填充时（即当键盘像这样渲染时），你可以扔掉它。

希望这对某人有帮助！