showModelBottomSheet 在 Future.delay 后未打开

Question

我有两个

showModalBottomSheet()

。在第一个 modalSheet 中有一个

IconButton()

。点击 IconButton 时，第一个工作表应关闭，2 秒后应打开第二个 modalSheet。

当我在

Navigator.pop(context)

和第二个

showModalBottomSheet()

之间使用 Future.delay 函数时，它会抛出一些错误，并且第二张纸无法打开。

代码：

IconButton(
           onPressed: () {
                        taskerFilterController.applyingLangaugePairChanges().whenComplete(
                          () {
                            Navigator.pop(context);
                            Future.delayed(const Duration(seconds: 2), () {
                              if (mainLayoutController.contactType == 1 && mainLayoutController.locationName.isEmpty) {
                                showModalBottomSheet(context: context, builder: (BuildContext context) => const TaskType(), isScrollControlled: true);
                              }
                            });
                          },
                        );
                      },
                      icon: const Icon(Icons.done, size: 25, color: kGreen)),

如果我删除

Future.delay

它工作正常，或者如果我删除

Navigator.pop(context)

它很好，但在打开第二个 modalSheet 之前必须关闭第一个 modalSheet。

错误：

    Null check operator used on a null value
I/flutter (32026): #0      Element.widget (package:flutter/src/widgets/framework.dart:3483:31)
I/flutter (32026): #1      debugCheckHasMediaQuery.<anonymous closure> (package:flutter/src/widgets/debug.dart:296:17)
I/flutter (32026): #2      debugCheckHasMediaQuery (package:flutter/src/widgets/debug.dart:311:4)
I/flutter (32026): #3      showModalBottomSheet (package:flutter/src/material/bottom_sheet.dart:1254:10)
I/flutter (32026): #4      CatAndSubcat.build.<anonymous closure>.<anonymous closure>.<anonymous closure>.<anonymous closure> (package:tolk2go/Utility/cat_and_subcat.dart:37:33)
I/flutter (32026): #5      new Future.delayed.<anonymous closure> (dart:async/future.dart:422:39)
I/flutter (32026): #6      Timer._createTimer.<anonymous closure> (dart:async-patch/timer_patch.dart:18:15)
I/flutter (32026): #7      _Timer._runTimers (dart:isolate-patch/timer_impl.dart:398:19)
I/flutter (32026): #8      _Timer._handleMessage (dart:isolate-patch/timer_impl.dart:429:5)
I/flutter (32026): #9      _RawReceivePort._handleMessage (dart:isolate-patch/isolate_patch.dart:184:12)

如何解决这个问题？有什么方法可以在不使用

showModalBottomSheet()

的情况下关闭

Navigator.pop(context)

吗？

Answer 1

要显示第二个模式底部工作表，请使用小部件中的

context

而不是第一个模式底部工作表中的

context

。为此，您可以重命名内部上下文以防止变量遮蔽。

class MyWidget extends StatelessWidget {
  const MyWidget({super.key});

  @override
  Widget build(BuildContext context) {
    return FilledButton(
      onPressed: () {
        showModalBottomSheet(
          context: context,
          builder: (modalContext) { // Rename `context` to `modalContext`
            return IconButton(
              onPressed: () {
                Future.delayed(const Duration(seconds: 2), () {
                  Navigator.pop(modalContext); // Use `modalContext` to pop the first modal
                  showModalBottomSheet(
                    context: context, // This context is from MyWidget's build method
                    builder: (_) => const TaskType(),
                  );
                });
              },
              icon: Icon(Icons.done),
            );
          },
        );
      },
      child: Text('Show first bottom sheet'),
    );
  }
}

Answer 2

该问题可能是由于弹出第一个模式表时上下文被释放所致。这可以通过使用 GlobalKey 为第二个 showModalBottomSheet 提供有效的上下文来解决。

    final GlobalKey<ScaffoldState> scaffoldKey = GlobalKey<ScaffoldState>();

    // ...

    IconButton(
      onPressed: () {
        taskerFilterController.applyingLangaugePairChanges().whenComplete(
          () async {
            Navigator.pop(context);
            await Future.delayed(const Duration(seconds: 2));
            if (mainLayoutController.contactType == 1 && mainLayoutController.locationName.isEmpty) {
              scaffoldKey.currentState.showBottomSheet((context) => const TaskType());
            }
          },
        );
      },
      icon: const Icon(Icons.done, size: 25, color: Green)
    ),

    // ...
    
    Scaffold(
      key: scaffoldKey,
      // ...
    )

---

请记住将scaffoldKey分配给Scaffold小部件的key属性。