forms - 使用 SingleChildScrollView 时无法向下拖动 Bottom Sheet

Question

我已经创建了一个带有 Bottom Sheet 和 ListView 构建器的应用程序。在底部，当我将其向上拖动时必须出现一个文本按钮 Bottom Sheet 必须出现。 Bottom Sheet 上有一个表格。我用 SingleChildScrollView 包裹了 Bottom Sheet 。但是当我单击 TextFormField 键盘时，我可以滚动 Bottom Sheet 。但是我无法将其向下拖动并关闭 Bottom Sheet 。即使我按下手机中的后退箭头以摆脱键盘。

import 'package:flutter/material.dart';

class Home extends StatefulWidget {
  const Home({Key key}) : super(key: key);

  @override
  _HomeState createState() => _HomeState();
}

class _HomeState extends State<Home> {

  @override
  Widget build(BuildContext context) {
    var width = MediaQuery.of(context).size.width;
    return Scaffold(

        resizeToAvoidBottomInset: false,
        body: Stack(
                children: [
                  ListView.builder(
                      itemCount: 1,
                      itemBuilder: (context, index) {
                        return Card(
                          );
                      }),
                  Positioned(
                    bottom: 0,
                    child: GestureDetector(
                      onPanEnd: (details) {
                        if (details.velocity.pixelsPerSecond.dy < 10) {

                          //Bottom Sheet.................................................................................................................

                          showModalBottomSheet(
                              shape: RoundedRectangleBorder(
                                borderRadius: BorderRadius.vertical(
                                    top: Radius.circular(25)),
                              ),
                              backgroundColor: Colors.green,
                              context: context,
                              builder: (context) {
                                return SingleChildScrollView(
                                  child: Container(
                                    padding: EdgeInsets.all(10),
                                    child: Form(
                                        child: Column(
                                          children: [
                                            Icon(Icons.arrow_drop_down),
                                            Text("Drag down to Close"),

                                            Container(
                                              color: Colors.red,
                                              child: Column(
                                                children: [
                                                  Row(
                                                    children: [
                                                      Expanded(
                                                        child: TextFormField(
                                                          decoration: InputDecoration(
                                                            labelText: "Current amount",
                                                          ),
                                                        ),
                                                      ),
                                                    ],
                                                  ),
                                                  Row(
                                                    children: [
                                                      Expanded(
                                                          child: TextButton(
                                                              onPressed: () {},
                                                              child: Text("Submit"))),
                                                    ],
                                                  ),
                                                ],
                                              ),
                                            ),
                                          ],
                                    )),
                                  ),
                                );
                              });
                          // Bottom Sheet Ends ......................................................................................................................................................
                        }
                      },
                      child: Container(
                        color: Colors.blue,
                        width: width,
                        padding: EdgeInsets.all(10),
                        child: Column(
                          children: [
                            Icon(Icons.arrow_drop_up),
                            Text("Drag up to Enter an Account"),
                          ],
                        ),
                      ),
                    ),
                  )
                ]),
        );
  }
}

Answer 1

兄弟在单独的小部件中创建您的模型 Bottom Sheet ，当您单击并使用底部模型工作表包装单子(monad) ScrollView 时，它将打开。

showModalBottomSheet(

        enableDrag: true,
        isDismissible: false,
        isScrollControlled: true,
)

和 Bottom Sheet 的完整示例

Widget updatebottomSheet()
  {

    Size size = MediaQuery.of(context).size;
    showModalBottomSheet(

        enableDrag: false,
        isDismissible: false,
        isScrollControlled: true,


        context: context,
        builder:(context)
        {
          return GestureDetector(
            behavior: HitTestBehavior.opaque,

            child: SingleChildScrollView(
              child: Container(
                padding: EdgeInsets.only(bottom: MediaQuery.of(context).viewInsets.bottom+10),
                // height: size.height*0.6,
                decoration: BoxDecoration(
                  color: Colors.white,

                ),
                child: Column(
                  children: [
                    Padding(
                      padding: const EdgeInsets.all(25.0),
                      child: Container(
                        decoration: BoxDecoration(
                          //color: Colors.red,
                          borderRadius: BorderRadius.circular(20),
                        ),

                        height: size.height*0.5,
                        width: double.infinity,
                        child: Card(
                          elevation: 4,
                          child: Padding(
                            padding: const EdgeInsets.all(12.0),
                            child: Form(
                              key: _formKey,
                              child: Column(
                                mainAxisAlignment: MainAxisAlignment.start,
                                crossAxisAlignment: CrossAxisAlignment.start,
                                children: [


                                  NameField(

                                    name:sectionname,
                                    controller: null,
                                    icon: Icons.person,
                                    hintText: "Please enter section name",
                                    text: "you not enter Smaster",

                                    onchanged: (value)
                                    {
                                      setState(() {
                                        Administrative.instance.SectionName=value;
                                      });

                                    },


                                  ),
                                  NameField(

                                    controller:null,
                                    name:smaster,
                                    icon: Icons.vpn_key_outlined,
                                    hintText: "Please enter Section Smaster",
                                    text: "your enter empty Smaster",
                                    onchanged: (value)
                                    {
                                      setState(() {
                                        Administrative.instance.Smaster=value;
                                      });

                                    },


                                  ),
                                ],
                              ),
                            ),
                          ),

                        ),
                      ),
                    ),
                    Padding(
                      padding: const EdgeInsets.only(left: 20.0,right: 20.0,top: 8.0,bottom: 8.0),
                      child: Container(
                        width: double.infinity,
                        height: 60,
                        child: FlatButton(
                          color: Colors.black,
                          onPressed: (){
                            if(!_formKey.currentState.validate()){
                              return;
                            }
                            else
                            {
                              _formKey.currentState.save();
                              // signupauth.instance.addstudent();
                              if(Administrative.instance.SectionName==null)
                              {
                                Administrative.instance.SectionName=sectionname;
                              }

                              else if(Administrative.instance.Smaster==null)
                              {
                                Administrative.instance.Smaster=smaster;
                              }
                              print("hello"+ids);
                              FirebaseFirestore.instance
                                  .collection("Section")
                                  .doc(ids).update({
                                "SectionName":Administrative.instance.SectionName,
                                "Smaster":Administrative.instance.Smaster,
                              });
                              Fluttertoast.showToast(
                                  msg: "Section is added",
                                  toastLength: Toast.LENGTH_LONG,
                                  gravity: ToastGravity.CENTER,
                                  timeInSecForIosWeb: 1,
                                  backgroundColor: Colors.grey,
                                  textColor: Colors.white,
                                  fontSize: 16.0

                              );
                              Navigator.pop(context);
                            }


                          },
                          shape: RoundedRectangleBorder(
                            borderRadius: BorderRadius.circular(10.0),

                          ),
                          child: Text("Save",style: TextStyle(color: Colors.white,fontSize: 18,fontWeight: FontWeight.bold),),
                        ),
                      ),
                    ),
                    Padding(
                      padding: const EdgeInsets.only(left: 20.0,right: 20.0,top: 8.0,bottom: 8.0),
                      child: Container(
                        width: double.infinity,
                        height: 60,
                        child: FlatButton(
                          color: Colors.black,
                          onPressed: (){
                            Navigator.pop(context);
                          },
                          shape: RoundedRectangleBorder(
                            borderRadius: BorderRadius.circular(10.0),

                          ),
                          child: Text("Cancel",style: TextStyle(color: Colors.white,fontSize: 18,fontWeight: FontWeight.bold),),
                        ),
                      ),
                    ),
                  ],
                ),
              ),
            ),
          );
        }


    );

  }