滾動時如何隱藏 flutter 中的頂部應用欄

Question

當我們嘗試從正文向上滾動時如何隱藏應用欄。 我有自定義應用欄，當我嘗試從正文滾動時，我想隱藏應用欄。 我已經嘗試了很多，但無法成功。

Scaffold(
  appBar: PreferredSize(
      child: ClipPath(
        clipper: CustomAppBar(),
        child: Container(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              Text(
                ' Bike Guru',
                style: GoogleFonts.caveatBrush(
                  fontSize: 40,
                  color: Colors.black,
                  fontWeight: FontWeight.bold,
                ),
              ),
            ],
          ),
        ),
      ),
      preferredSize: Size.fromHeight(kToolbarHeight + 150))

Answer 1

試試這個對我有用

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: NestedScrollView(
        headerSliverBuilder: (context, innerBoxIsScrolled) {
          return <Widget>[
            SliverAppBar(
              backgroundColor: Colors.transparent,
              title: Center(
                child: PreferredSize(
                    child: ClipPath(
                      clipper: CustomAppBar(),
                      child: Container(
                        width: MediaQuery.of(context).size.width,
                        height: 60,
                        child: Column(
                          mainAxisAlignment: MainAxisAlignment.center,
                          children: <Widget>[
                            Text(
                              ' Bike Guru',
                            ),
                          ],
                        ),
                      ),
                    ),
                    preferredSize: Size.fromHeight(kToolbarHeight + 150)),
              ),
              floating: false,
              pinned: false,
            ),
          ];
        },
        body: Center(
          child: Text("Sample Text"), // Actual body content
        ),
      ),
    );
  }