flutter 如何隐藏顶部卡时向下滚动和出现时向上滚动?

x7yiwoj4  于 2023-01-21  发布在  Flutter
关注(0)|答案(2)|浏览(153)

我是Flutter的新手,遇到了这个问题,我在屏幕顶部有过滤卡,我想在上下滚动时隐藏和显示。
提前感谢!

r7knjye2

r7knjye21#

用这个

@override
  void initState() {
    super.initState();

    scrollController!.addListener(() {
      if (scrollController!.position.userScrollDirection ==
          ScrollDirection.forward) {
        if (!isFilterVisible) {
          setState(() => visible = true);
        }
      } else if (scrollController!.position.userScrollDirection ==
          ScrollDirection.reverse) {
        setState(() => visible = false);
      }
    });
  }
CustomScrollView(
controller: scrollController)
owfi6suc

owfi6suc2#

查看此代码

class HideAppBar extends StatefulWidget {
    @override
    HideAppBarState createState() => new HideAppBarState();
  }
    
  class HideAppBarState extends State<HideAppBar> {
    
    @override
    initState() {
      super.initState();
    }
    
    @override
    Widget build(BuildContext context) {
      // MaterialApp 
      return MaterialApp(  
        debugShowCheckedModeBanner:false,
        // scaffold 
        home:Scaffold(  
        body: NestedScrollView(
          headerSliverBuilder: (BuildContext context, bool innerBoxIsScrolled) {
            return [
              SliverAppBar(
                leading:Icon(Icons.wallpaper),
                title: Container(
                  color:Colors.blue, 
                  child:Text("Hidden AppBar")
                ),
                elevation: 10.0,
                automaticallyImplyLeading: false,
                expandedHeight:50,
                floating: true,
                snap: true,
              )
            ];
          },
          // list of images for scrolling
          body:  ListView(
            children: <Widget>[
              Text("Scroll Down To Hide The AppBar!"),
              Divider(),
             Text("Widget 2"),
              Divider(),
              Text("Widget 3"),
              Divider(),
              Text("Widget 4"),
            ],
          ),
        ),
      ),
      );
    }
  }

相关问题