DraggableScrollableSheet

DraggableScrollableSheet

在我的应用程序中,有一个DraggableScrollableSheet和一个FAB。如果DraggableScrollableSheet展开,我希望FAB不可见。我需要检查扩展事件

我试图将侦听器附加到scrollController并检查scrollController.offset的值。但是我意识到,仅在完全拖动DraggableScrollableSheet时才触发监听器,而不是之前。还有另一种方法来检查它是展开还是折叠?

  double appbarSize = 0.08;
  double offsetVisibility=100.0;
  bool FAB_visibility=true;
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      floatingActionButton: Visibility(
        visible: FAB_visibility,
        child: FloatingActionButton(
          child: Icon(Icons.add),
        ),
      ),
      body: SizedBox.expand(
          child: DraggableScrollableSheet(
        maxChildSize: 0.8,
        minChildSize: appbarSize,
        initialChildSize: appbarSize,
        builder: (BuildContext context, ScrollController scrollController) {
          _scrollListener() {
            if(FAB_visibility==false && scrollController.offset<=offsetVisibility){
              setState(() {
                FAB_visibility=true;
              });
            }
            else if(FAB_visibility==true && scrollController.offset>offsetVisibility){
              setState(() {
                FAB_visibility=false;
              });
            }
          }
          scrollController.addListener(_scrollListener);
          return Container(
            decoration: new BoxDecoration(
                color: Colors.red,
                borderRadius: new BorderRadius.only(
                    topLeft: const Radius.circular(10.0),
                    topRight: const Radius.circular(10.0))),
            child: ListView.builder(
              controller: scrollController,
              itemCount: 25,
              itemBuilder: (BuildContext context, int index) {
                return ListTile(title: Text('Item $index'));
              },
            ),
          );
        },
      )),
    );
  }

最佳答案

Thanks to flutter team我知道该怎么做!
我们应该将DraggableScrollableSheet包装在NotificationListener中

这是工作代码:

class _MyHomePageState extends State<MyHomePage> {
  double appbarSize = 0.08;
  double offsetVisibility = 100.0;
  bool FAB_visibility = true;
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SizedBox.expand(
          child: NotificationListener<DraggableScrollableNotification>(
            onNotification: (DraggableScrollableNotification DSNotification){
              if(FAB_visibility && DSNotification.extent>=0.2){
                setState(() {
                  FAB_visibility=false;
                });
              }
              else if(!FAB_visibility && DSNotification.extent<0.2){
                setState(() {
                  FAB_visibility=true;
                });
              }
            },
        child: DraggableScrollableSheet(
          maxChildSize: 0.8,
          minChildSize: appbarSize,
          initialChildSize: appbarSize,
          builder: (BuildContext context, ScrollController scrollController) {
            return Container(
              child: ListView.builder(
                controller: scrollController,
                itemCount: 25,
                itemBuilder: (BuildContext context, int index) {
                  return ListTile(title: Text('Item $index'));
                },
              ),
            );
          },
        ),
      )),
      floatingActionButton: Visibility(
        visible: FAB_visibility,
        child: FloatingActionButton(
          child: Icon(Icons.add),
        ),
      ),
    );
  }
}

关于flutter - 您如何知道DraggableScrollableSheet是折叠还是展开,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/57059314/

10-12 03:20