如何在向下滚动时隐藏顶部卡片并在向上滚动时出现答案

【问题标题】：How to hide top card when scrolling down and appear when scrolling up如何在向下滚动时隐藏顶部卡片并在向上滚动时出现
【发布时间】：2023-01-19 20:06:39
【问题描述】：

我是新手。在这个问题中，我的屏幕顶部有过滤卡，我想在向下和向上滚动时隐藏和出现，预先感谢

【问题讨论】：

标签： android ios flutter list scroll

【解决方案1】：

用这个

 @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)

【讨论】：

【解决方案2】：

查看此代码

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

【讨论】：