Flutter:如何制作具有固定可拖动触发功能的可拖动底板

问题描述 投票:0回答:0

我想做如下的东西:

底片的初始状态

,

向上拖动底片时

预期行为 当我向上拖动bottomsheet时,内容将像第二张图片一样显示,当sheet达到提供的最大高度时,只有标题后面的列表可以滚动,但标题和标题上方的白框将固定在他们的位置。

这是我如何设置模态表:

DraggableScrollableSheet(
          initialChildSize: 0.05,
          minChildSize: 0.05,
          maxChildSize: 0.8,
          builder: (BuildContext context, ScrollController scrollController){
            return SingleChildScrollView(
              controller: scrollController,
              child: Padding(
                padding: const EdgeInsets.only(top: 10),
                child: Container(
                  decoration: BoxDecoration(
                    borderRadius: BorderRadius.circular(20),
                    color: Colors.blueGrey,
                    boxShadow: [
                      BoxShadow(
                        color: Colors.black.withOpacity(0.5),
                        spreadRadius: 2,
                        blurRadius: 7,
                        offset: const Offset(0, 3),
                      ),
                    ]
                  ),
                  height: MediaQuery.of(context).size.height,
                  padding: const EdgeInsets.symmetric(horizontal: 15),
                  child: Column(
                    children: <Widget>[
                      SizedBox(
                        height: 20,
                        child: Center(
                          child: Container(
                            decoration: BoxDecoration(
                              borderRadius: BorderRadius.circular(20),
                              color: Colors.white,
                            ),
                            width: WidgetScreen.width(context, 70),
                            height: 7,
                          )
                        )
                      ),
                      Row(
                        mainAxisAlignment: MainAxisAlignment.spaceBetween,
                        children: <Widget>[
                          const Text('My cars'),
                          IconButton(
                            color: Colors.black,
                            focusColor: Colors.red,
                            splashRadius: 20,
                            onPressed: (){}, 
                            icon: const Icon(
                              CupertinoIcons.add,
                              size: 15,
                            )
                          )
                        ]
                      ),
                      Expanded(
                        flex: 1,
                        child: ListView.builder(
                          controller: scrollController,
                          itemCount: 25,
                          itemBuilder: (BuildContext context, int index) {
                            return ListTile(title: Text('Item $index'));
                          },
                        ),
                      )
                    ]
                  ),
                ),
              )
            );
          }
        )

SingleChildScrollView
允许我使
DraggableScrollableSheet
工作正常因为这个的孩子必须是一个列表才能使拖动行为起作用。

我得到了什么

当工作表达到提供的最大高度时,如果我在列表中滚动,我得到了我想要的,但如果我从标题块滚动,所有内容都像下面一样滚动

注意 我试图找到一个包或使用 flutter 的模态表,但它们都需要一个外部触发器来显示底部表,就像点击某物一样,但我不希望它以这种方式运行。

附言

WidgetScreen.width(context, 70)
是我创建的一些助手所以只需用一些 int 值替换它

flutter bottom-sheet singlechildscrollview
© www.soinside.com 2019 - 2024. All rights reserved.