我想向页面视图添加一个滚动控制器，这样我就可以隐藏它上面的appbar之类的内容。

Question

我想给页面视图添加一个滚动控制器(它既可以水平滚动，也可以垂直滚动)，这样当我向下滚动页面视图的内容时，我可以隐藏它上面的appbar之类的内容。

我试着添加了Singlechildscrollview，但它不能正常工作，不知道为什么。它不会注册向上向下滚动。

      class HomePage extends StatefulWidget {
        @override
        _HomePageState createState() => _HomePageState();
      }

      class _HomePageState extends State<HomePage> {
        int currentPage = 0;
        bool isScrollingDown = false;
        PageController _controller = PageController(
          initialPage: 0,
        );
        ScrollController _scrollController;

        @override
        void initState() {
          super.initState();
          _initImages();
          _scrollController = ScrollController();
          _scrollController.addListener(() {
            if (_scrollController.position.userScrollDirection ==
                ScrollDirection.reverse) {
              if (!isScrollingDown) {
                setState(() {
                  isScrollingDown = true;
                });
                print(isScrollingDown);
              }
            }

            if (_scrollController.position.userScrollDirection ==
                ScrollDirection.forward) {
              if (isScrollingDown) {
                setState(() {
                  isScrollingDown = false;
                });
                print(isScrollingDown);
              }
            }
          });
        }

        @override
        void dispose() {
          _controller.dispose();
          _scrollController.dispose();
          super.dispose();
        }

        @override
        Widget build(BuildContext context) {
          var height = MediaQuery.of(context).size.height;
          return Scaffold(
            appBar: AppBar(
              backgroundColor: Colors.black,
            ),
            body: Container(
              color: Colors.black,
              child: Column(
                children: [
                  AnimatedContainer(
                    height: isScrollingDown ? 0 : height * 0.25,
                    duration: Duration(milliseconds: 400),
                    child: Column(
                      children: [
                        CircleAvatar(
                          backgroundImage: AssetImage("assets/profile.jpg"),
                        ),
                        SizedBox(
                          height: 10,
                        ),
                        Text(
                          "Samantha Smith",
                          style: profileText(),
                        ),
                        Text(
                          "@imsamanthasmith",
                          style: profileValues(),
                        ),
                        SizedBox(
                          height: 30,
                        ),
                        Row(
                          mainAxisAlignment: MainAxisAlignment.spaceAround,
                          children: [
                            Column(
                              children: [
                                Text(
                                  "1.2m",
                                  style: profileStats(),
                                ),
                                Text(
                                  "Liked",
                                  style: profileValues(),
                                )
                              ],
                            ),
                            Column(
                              children: [
                                Text(
                                  "12.8k",
                                  style: profileStats(),
                                ),
                                Text(
                                  "Followers",
                                  style: profileValues(),
                                )
                              ],
                            ),
                            Column(
                              children: [
                                Text(
                                  "1.9k",
                                  style: profileStats(),
                                ),
                                Text(
                                  "Following",
                                  style: profileValues(),
                                )
                              ],
                            ),
                          ],
                        )
                      ],
                    ),
                  ),
                  SizedBox(
                    height: 30,
                  ),
                  Column(
                    children: [
                      Container(
                        decoration: BoxDecoration(
                            color: Colors.grey[900],
                            borderRadius: BorderRadius.only(
                                topRight: Radius.circular(20),
                                topLeft: Radius.circular(20))),
                        child: Row(
                          mainAxisAlignment: MainAxisAlignment.spaceAround,
                          children: [
                            IconButton(
                              icon: currentPage == 0
                                  ? Icon(Icons.grid_on_rounded)
                                  : Icon(Icons.grid_view),
                              onPressed: () {
                                _controller.animateToPage(0,
                                    duration: Duration(milliseconds: 50),
                                    curve: Curves.bounceOut);
                              },
                            ),
                            IconButton(
                              icon: currentPage == 1
                                  ? Icon(Icons.favorite)
                                  : Icon(Icons.favorite_border),
                              onPressed: () {
                                _controller.animateToPage(1,
                                    duration: Duration(milliseconds: 50),
                                    curve: Curves.bounceOut);
                              },
                            ),
                            IconButton(
                              icon: currentPage == 2
                                  ? Icon(Icons.bookmark)
                                  : Icon(Icons.bookmark_outline),
                              onPressed: () {
                                _controller.animateToPage(2,
                                    duration: Duration(milliseconds: 50),
                                    curve: Curves.bounceOut);
                              },
                            ),
                          ],
                        ),
                      ),
                    ],
                  ),
                  Expanded(
                    child: PageView(
                      physics: BouncingScrollPhysics(),
                      controller: _controller,
                      onPageChanged: (value) {
                        setState(() {
                          currentPage = value;
                        });
                      },
                      children: [
                        Page1(foodImages),
                        Page2(danceImages),
                        Page3(lolImages),
                      ],
                    ),
                  )
                ],
              ),
            ),
          );
        }
      }

Answer 1

您可以使用CustomScrollView而不是Scaffold，因此您可以使用SliverAppBar，它具有您想要的属性，如隐藏/显示在滚动条上等。以下是有关SliverAppBar https://api.flutter.dev/flutter/material/SliverAppBar-class.html的详细信息链接

来自Flutter的官方文档，关于在此处https://flutter.dev/docs/cookbook/lists/floating-app-bar#2-use-sliverappbar-to-add-a-floating-app-bar实现SliverAppBar