键盘推动状态栏下方的模态按钮表

Question

我的模态底部工作表有问题，每当键盘出现在屏幕上时，它就会在状态栏下滑动，就像这样

我尝试将第二个小部件放在安全区域中，但无论我将安全区域放在哪里都不起作用 这是我的代码：

showModalBottomSheet<void>(isScrollControlled: true,context: context, builder: (BuildContext context,) {

           //Tried safe area here

           return LoginBottomSheet();
           });

这是我显示底部工作表的地方，这是底部工作表代码：

class _LoginBottomSheetState extends State<LoginBottomSheet> {
  int currentView = 0;
  late List<Widget> pages;

  @override
  void initState() {
    pages = [
      login(),
      signUp(),
    ];
    super.initState();
  }

  @override
  Widget build(BuildContext context) {

     //and tried safe area here as well

    return AnimatedSwitcher(
      transitionBuilder: (child, animation) => SizeTransition(
        child: child,
        sizeFactor: animation,
      ),
      child: pages[currentView],
      duration: Duration(milliseconds: 500),
    );
  }

这是注册代码

    return SafeArea(
      top:true,
      child: SingleChildScrollView(
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: [
            Align(
              alignment: Alignment.topLeft,
              child: MaterialButton(
                onPressed: () {
                  setState(() {
                    currentView = 0;
                  });
                },
                child: Icon(Icons.arrow_back),
              ),
            ),
            Padding(
              padding: const EdgeInsets.only(left:32.0,right:32,bottom:16,top:0),
              child: Form(
                child: Column(children: [
                  Padding(
                    padding: const EdgeInsets.all(8.0),
                    child: Material(
                      borderRadius: BorderRadius.circular(12),
                      elevation: 10,
                      child: TextFormField(
                          decoration: InputDecoration(
                        focusedBorder: OutlineInputBorder(
                            borderRadius: BorderRadius.circular(12),
                            borderSide: BorderSide(color: Colors.deepPurple)),
                        enabledBorder: OutlineInputBorder(
                            borderRadius: BorderRadius.circular(12),
                            borderSide:
                                BorderSide(color: Colors.grey.shade100)),
                        hintText: "Name",
                      )),
                    ),
                  ),
                  Padding(
                    padding: const EdgeInsets.all(8.0),
                    child: Material(
                      elevation: 10,
                      borderRadius: BorderRadius.circular(12),
                      child: TextFormField(
                          decoration: InputDecoration(
                        focusedBorder: OutlineInputBorder(
                            borderRadius: BorderRadius.circular(12),
                            borderSide: BorderSide(color: Colors.deepPurple)),
                        enabledBorder: OutlineInputBorder(
                            borderRadius: BorderRadius.circular(12),
                            borderSide:
                                BorderSide(color: Colors.grey.shade100)),
                        hintText: "Email",
                      )),
                    ),
                  ),
                  Padding(
                    padding: const EdgeInsets.all(8.0),
                    child: Material(
                      elevation: 10,
                      borderRadius: BorderRadius.circular(12),
                      child: TextFormField(
                          obscureText: true,
                          decoration: InputDecoration(
                            focusedBorder: OutlineInputBorder(
                                borderRadius: BorderRadius.circular(12),
                                borderSide:
                                    BorderSide(color: Colors.deepPurple)),
                            enabledBorder: OutlineInputBorder(
                                borderRadius: BorderRadius.circular(12),
                                borderSide:
                                    BorderSide(color: Colors.grey.shade100)),
                            hintText: "Password",
                          )),
                    ),
                  ),
                  Padding(
                    padding: const EdgeInsets.all(8.0),
                    child: Material(
                      elevation: 10,
                      borderRadius: BorderRadius.circular(12),
                      child: TextFormField(
                          decoration: InputDecoration(
                        focusedBorder: OutlineInputBorder(
                            borderRadius: BorderRadius.circular(12),
                            borderSide: BorderSide(color: Colors.deepPurple)),
                        enabledBorder: OutlineInputBorder(
                            borderRadius: BorderRadius.circular(12),
                            borderSide:
                                BorderSide(color: Colors.grey.shade100)),
                        hintText: "Phone Number",
                      )),
                    ),
                  ),
                  Padding(
                    padding: const EdgeInsets.all(8.0),
                    child: Material(
                      elevation: 10,
                      borderRadius: BorderRadius.circular(12),
                      child: TextFormField(
                          decoration: InputDecoration(
                        focusedBorder: OutlineInputBorder(
                            borderRadius: BorderRadius.circular(12),
                            borderSide: BorderSide(color: Colors.deepPurple)),
                        enabledBorder: OutlineInputBorder(
                            borderRadius: BorderRadius.circular(12),
                            borderSide:
                                BorderSide(color: Colors.grey.shade100)),
                        hintText: "Address",
                      )),
                    ),
                  ),
                  Padding(
                    padding: const EdgeInsets.all(8.0),
                    child: ElevatedButton(
                        onPressed: () {
                          print("Signing up baby!");
                        },
                        child: Padding(
                          padding: const EdgeInsets.symmetric(
                              vertical: 16, horizontal: 100),
                          child: Text(
                            "Sign Up",
                            style: TextStyle(
                                fontSize: 20,
                                color: Colors.white,
                                fontWeight: FontWeight.bold),
                          ),
                        )
                     ),
                  ),
                ]),
              ),
            )
          ],
        ),
      ),
    );
  }

根据我在网上阅读的内容，安全区域实际上应该使小部件避开操作系统界面，所以我不知道我在这里做错了什么

Answer 1

showModalBottomSheet( 上下文：上下文， isScrollControlled: true, useSafeArea: true, // 这确保模态屏幕位于安全区域 构建器：（BuildContext 上下文）{ // 你的代码放在这里