使用 SingleChildScrollView 时无法向下拖动底部工作表

2024-05-03

我创建了一个带有bottomsheet 和listview builder 的应用程序。在底部,有一个文本按钮,当我将其向上拖动时,底部工作表必须出现。底页上有一张表格。我用 SingleChildScrollView 包裹底部纸张。但是当我单击 TextFormField 键盘时,我可以滚动底部工作表。但我无法将其向下拖动并关闭底部工作表。即使我按手机中的后退箭头来摆脱键盘。

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"),
                          ],
                        ),
                      ),
                    ),
                  )
                ]),
        );
  }
}

这可以分两步完成:

  1. place a SingleChildScrollView在 - 的里面showModalBottomSheet的构建器函数。

  2. 确保使用这些属性:

showModalBottomSheet(
    enableDrag: true,
    isScrollControlled: true,
    // ...
);

另外,提取showModalBottomSheet将函数调用到单独的方法中可以使代码更具可读性,从而使两个注释变得多余。

这是一个完整的例子:

Widget openModalBottomSheet() {

    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),),
                        ),
                      ),
                    ),
                  ],
                ),
              ),
            ),
          );
        }
    );
  }
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

使用 SingleChildScrollView 时无法向下拖动底部工作表 的相关文章

随机推荐

  • UIScreen 屏幕始终返回 1 个屏幕

    我正在尝试在不使用镜像模式的情况下通过 Airplay 在 Apple TV 上显示图片 但当镜像关闭时 UIScreen Screens 方法始终返回 1 个屏幕 主屏幕 我希望我的图片显示与照片应用程序相同 Airplay 无需镜像 N
  • JS Facebook登录iOS8

    我的 facebook 应用程序上的登录按钮在 iOS 8 中完全停止工作 我以为这是我所做的事情 但是当我从他们的网站获取 facebook 示例 html 并将其应用到我的页面时 它仍然不起作用 我的应用程序 ID 已被替换 与 xxx
  • constexpr 函数及其参数

    constexpr int hello int j return j 12 constexpr int bye int j 6 return j 12 int main int i 6 constexpr int a1 hello i er
  • 能够重置使用 Yield 生成的 IEnumerator (C#)

    如果我使用yield而不是手动创建IEnumerator 是否可以实现IEnumerator Reset 不 这是不可能的 当 C 编译器处理迭代器 包含迭代器的方法 时yield语句 编译器生成一个实现 IEnumerable 和 IEn
  • 良好的客户端套接字池

    我需要管理从我的 Java 应用程序到外部服务器的长时间运行的 TCP 套接字连接 我正在寻找一个好的套接字池 这样我就可以重复使用套接字 有什么建议吗 你可以看看在上面建立一个套接字池公共池 http commons apache org
  • 计算产生相同 BST 的唯一节点序列的数量

    问题 给定一个最多 50 个整数的特定序列 它们代表 某个二叉搜索树 BST 的节点 有多少种排列 这个序列在那里 这也会产生完全相同的 空白石板时间 将原始序列作为 1 个序列包含在总计数中 例如 对于这样的序列 5 2 1 9 8 答案
  • 如何从现有的远程分支创建本地分支?

    我想从现有的远程分支 假设是远程 A 创建一个分支 然后将更改提交到存储库 我已使用以下命令从现有的远程 A 创建本地分支 git checkout remote A git branch master remote A 现在我已经使用以下
  • “访问此资源所需的证书无效”

    XMLHttpRequest Network Error 0x800c0019 Security certificate required to access this resource is invalid 我已经找到解决方案了 首先 我
  • 错误:安装 ffi 时出错:错误:无法构建 gem 本机扩展

    我在 Mac 64 位系统中遇到此错误 并且机器上安装了 xcode Building native extensions This could take a while ERROR Error installing ffi ERROR F
  • 处理 UIPageControl 有太多点而无法全部显示在屏幕上的最佳方法是什么

    我的应用程序中有一个 UIPageControl 大约有 10 个页面 点 看起来非常完美 但是用户可以添加许多不同的视图 因此点的数量可能会变成 30 个 发生这种情况时 点就会从屏幕边缘消失 并且您始终无法看到当前选定的页面 这一切看起
  • Python请求响应以utf-8编码但无法解码

    我正在尝试使用 python 抓取我的messenger com facebook Messenger 聊天记录 并且我使用谷歌浏览器开发工具来查看聊天历史记录的 POST 请求 并且我已将整个标头和正文复制为请求可以使用的格式 我得到 H
  • Java:无法从未命名的模块读取包?

    在将项目转移到 Gradle 时 我停止使用 org json 的自定义构建 该构建安装了 module info java 以符合模块系统 现在 我通常通过 Maven 使用它 并且由于 org json 默认情况下不是一个模块 因此它被
  • 这段汇编语言代码是什么意思?

    我是一名学生 刚刚开始学习汇编语言 为了更好地理解它 我只是用 C 写了一个简短的代码并将其转换为汇编语言 奇怪的是我有点听不懂 代码是 include
  • 如何在 C 应用程序中将鼠标光标设置在 X11 上

    我有一个相当大且相当旧的 C 应用程序 已移植到 Linux 上 我负责让鼠标光标正常工作 但遇到一些问题 我能够将我们需要的大部分光标转换为使用提供的标准光标X字体光标 http tronche com gui x xlib append
  • 可以在 .h 文件中声明静态全局变量吗?

    static 关键字将全局变量的范围限制为该翻译单元 如果我使用static int x在 h 文件中并包含该 h 文件每隔一个文件 它们不会都属于同一个翻译单元吗 那么 x不是到处可见吗 那么现在static有什么作用呢 另外 有没有什么
  • python RuntimeError:字典在迭代期间更改了大小

    我有这样的 obj hello world foo 0 bar v1 foo 0 name v2 foo 1 bar v3 它应该扩展到 hello world foo bar v1 name v2 bar v3 我在下面写了代码 按 删除
  • 测试 AngularJS 指令的焦点

    如何测试 AngularJS 指令中的焦点 我希望以下内容能够发挥作用 describe focus test function it should focus element function var element
  • 创建自定义 json 转换器来屏蔽敏感信息

    我正在编写一个自定义 json 转换器 它将序列化一个对象并屏蔽包含一些敏感信息的某些字段 我已经创建了转换器 但是当我使用转换器序列化对象时 我得到一个空字符串 有人可以告诉我我做错了什么吗 public class Student pu
  • 如何在python中查找csv文档中的特定行

    我想要做的是读入 csv 文档并找到 SN 列 gt 20 中的所有值 然后创建一个仅包含 SN gt 20 行的新文件 我知道我需要做 阅读原始文件 打开一个新文件 迭代原始文件的行 我能够做的是找到 SN gt 20 的行 import
  • 使用 SingleChildScrollView 时无法向下拖动底部工作表

    我创建了一个带有bottomsheet 和listview builder 的应用程序 在底部 有一个文本按钮 当我将其向上拖动时 底部工作表必须出现 底页上有一张表格 我用 SingleChildScrollView 包裹底部纸张 但是当