【问题标题】:how to hide top appbar in flutter when scrolling滚动时如何隐藏顶部的应用程序栏
【发布时间】:2020-05-04 12:03:43
【问题描述】:

当我们尝试从正文向上滚动时如何隐藏应用栏。我有自定义应用栏,当我尝试从正文滚动时,我想隐藏应用栏。我尝试了很多,但都没有成功。

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

【问题讨论】:

  • 你试过SliverAppBar吗?
  • 我试过了,但没成功
  • 看看this
  • 我试过了,但是自定义应用栏不会显示,只会显示一个简单的矩形应用栏。

标签: flutter


【解决方案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
        ),
      ),
    );
  }

【讨论】:

  • 自定义显示不显示矩形应用栏正在显示..
  • 在 SliverAppBar 中添加 backgroundColor: Colors.transparent
  • 结果是左上角的小自定义形状栏只有如何增加高度和宽度..?
  • 在Container()中指定高度和宽度
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多