如何确定DraggableScrollableSheet是否折叠或展开

5

我的应用程序里有一个可拖动的可滚动表格和一个FAB。如果可拖动的可滚动表格被展开,我希望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'));
              },
            ),
          );
        },
      )),
    );
  }
1个回答

16

感谢flutter团队,我明白该如何做了! 我们应该在NotificationListener中包装DraggableScrollableSheet

这是可工作的代码:

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

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接