flutter - 如何使用 showModelBottomSheet 创建 DraggableScrollableSheet？

Question

我使用带有 DraggableScrollableSheet() 的 showModelBottomSheet 创建，但问题是在拖动时没有显示一些文本的 appBar，即，SingleChildsSrollView() 在拖动时会上下移动。

    *bottomsheet(context) {
  Size size = MediaQuery.of(context).size;
  return showModalBottomSheet(
      backgroundColor: Colors.white,
      shape: const RoundedRectangleBorder(
        borderRadius: BorderRadius.vertical(top: Radius.circular(13)),
      ),
      context: context,
      builder: (BuildContext context) {
        return Padding(
          padding: const EdgeInsets.all(5),
          child: Scaffold(
            backgroundColor: Colors.white,
            appBar: AppBar(
              foregroundColor: Colors.green,
              backgroundColor: Colors.white,
              elevation: 1,
              shadowColor: Colors.grey.shade100,
              automaticallyImplyLeading: false,
              title: const Text('Connect with Reconnect'),
            ),
            body: SingleChildScrollView(
              child: Padding(
                padding: const EdgeInsets.all(
                  25,
                ),
                child: Container(
                  padding: const EdgeInsets.only(
                    left: 15,
                    right: 15,
                    top: 15,
                  ),
                  height: size.height,
                  decoration: BoxDecoration(
                    color: Colors.white,
                    borderRadius: BorderRadius.circular(13),
                    boxShadow: const [
                      BoxShadow(blurRadius: 2, color: Colors.grey),
                    ],
                  ),
                  child: Column(children: [
                    TextField(
                      cursorColor: Colors.green,
                      decoration: InputDecoration(
                        label: const Text('Name'),
                        labelStyle: TextStyle(color: Colors.grey.shade500),
                        icon: const Icon(
                          FontAwesomeIcons.user,
                          color: Color(0xff453e3d),
                          size: 22,
                        ),
                        border: InputBorder.none,
                      ),
                    ),
                    Container(
                      width: 315,
                      height: 1,
                      margin: const EdgeInsets.only(top: 3, bottom: 3),
                      decoration: BoxDecoration(
                        color: Colors.grey[300],
                        borderRadius: BorderRadius.circular(100),
                      ),
                    ),
                    TextField(
                      cursorColor: Colors.green,
                      decoration: InputDecoration(
                        label: const Text('Email'),
                        labelStyle: TextStyle(color: Colors.grey.shade500),
                        icon: const Icon(
                          FontAwesomeIcons.envelope,
                          color: Color(0xff453e3d),
                          size: 22,
                        ),
                        border: InputBorder.none,
                      ),
                    ),
                    Container(
                      width: 315,
                      height: 1,
                      margin: const EdgeInsets.only(top: 3, bottom: 3),
                      decoration: BoxDecoration(
                        color: Colors.grey[300],
                        borderRadius: BorderRadius.circular(100),
                      ),
                    ),
                    TextField(
                      cursorColor: Colors.green,
                      decoration: InputDecoration(
                        label: const Text('Phone Number'),
                        labelStyle: TextStyle(color: Colors.grey.shade500),
                        icon: const Icon(
                          FontAwesomeIcons.mobileAlt,
                          color: Color(0xff453e3d),
                          size: 22,
                        ),
                        border: InputBorder.none,
                      ),
                    ),
                    Container(
                      width: 315,
                      height: 1,
                      margin: const EdgeInsets.only(top: 3, bottom: 3),
                      decoration: BoxDecoration(
                        color: Colors.grey[300],
                        borderRadius: BorderRadius.circular(100),
                      ),
                    ),
                    Container(
                      margin: const EdgeInsets.only(top: 10),
                      height: 25,
                      alignment: Alignment.bottomLeft,
                      child: Row(
                        children: [
                          const Icon(
                            FontAwesomeIcons.car,
                            color: Color(0xff453e3d),
                          ),
                          const SizedBox(
                            width: 15,
                          ),
                          Text(
                            'Services',
                            style: TextStyle(
                                color: Colors.grey.shade500, fontSize: 16),
                          ),
                        ],
                      ),
                    ),
                  ]),
                ),
              ),
            ),
          ),
        );
      });
}*

我需要在 singlechildscrollview 顶部有一个栏，我尝试使用 column 代替，但没有结果。

标签： flutterdart

Answer 1

问题将通过以下代码解决！

body: Center(
        child: Column(
          children: [
            const SizedBox(
              height: 400,
            ),
            ElevatedButton(
              onPressed: () =>
//The showModelBottomSheet Will push a sheet to our page for show widgets and actions
                  showModalBottomSheet(
                context: context,
                isScrollControlled: true,
                backgroundColor: Colors.transparent,
                builder: (context) =>
                    //The DraggableScrollableSeet will drag top to bottom or vise versa with respect to user interaction.
                    DraggableScrollableSheet(
                  initialChildSize: .6,
                  maxChildSize: .9,
                  minChildSize: .2,
                  builder: (context, controller) =>
//The customsheet method will return a widget with a child CustoomScrollView to Drag our DraggableScrollableSheet.
                      customSheet(context, controller),
                ),
              ),
              child: const Text('clickme'),
            ),
          ],
        ),
      ),
//customSheet body

Widget customSheet(BuildContext context, ScrollController controller) {
  return Container(
    alignment: Alignment.bottomLeft,
    decoration: const BoxDecoration(
      color: Colors.white,
      borderRadius: BorderRadius.only(
        topLeft: Radius.circular(30),
        topRight: Radius.circular(30),
      ),
    ),
// While use the CustomScrollView have an SliverAppBar for set our bar to constant, ie, the appBar will not move while dragging
    child: CustomScrollView(
      controller: controller,
      slivers: [
        SliverAppBar(
          shadowColor: Colors.grey.shade100,
          elevation: 1,
          pinned: true,
          backgroundColor: Colors.white,
          automaticallyImplyLeading: false,
          title: Container(
              margin: const EdgeInsets.only(bottom: 45),
              width: 60,
              height: 4,
              color: Colors.grey.shade300),
          shape: RoundedRectangleBorder(
            side: BorderSide(color: Colors.grey.shade200),
            borderRadius: const BorderRadius.only(
              topLeft: Radius.circular(30),
              topRight: Radius.circular(30),
            ),
          ),
        ),
        SliverFillRemaining(
          hasScrollBody: false,
          child: Column(
            children: [
              for (int i = 0; i < 10; i++)
                Container(
                  width: 100,
                  height: 100,
                  color: Colors.green[i * 100],
                ),
            ],
          ),
        )
      ],
    ),
  );
}

问题：上面的代码有一个从 DraggableScrollableSheet() 退出的问题，这是因为如果我们使用 GestureDetecter 而不是 DraggableScrollableSheet()，child 会被下面的代码弹出

 GestureDetector(onTap: ()=>Navigator.of(context).pop(),behavior: HitTestBehavior.opaque,
                      child: DraggableScrollableSheet(
                                      initialChildSize: .6,
                                      maxChildSize: .9,
                                      minChildSize: .2,
                                      builder: (context, controller) =>
                                            customSheet(context, controller),
                                    ),
                    ),

但是我们不能在 DraggableScrollabelSheet() 之外点击弹出表单。注意：HitTestBehaviour.opaque 将弹出工作表，但如果我们点击 Scaffold 中的任何位置。感谢您关注我，如果您有解决方案，请联系我@[e-mail]