SliverAppBar 为最小高度时隐藏底部导航栏答案

【问题标题】：Hide bottom navigation bar when SliverAppBar is min heightSliverAppBar 为最小高度时隐藏底部导航栏
【发布时间】：2020-11-14 15:57:35
【问题描述】：

当我的 sliverAppBar 必须达到最小高度时，我正在尝试更改自定义底部导航栏的位置。

Flutter How to check if Sliver AppBar is expanded or collapsed? - 从这里获取实现

这是我的代码

class _MainPageState extends State<MainPage> {
  int _currentIndex = 0;
  bool _headerOpen = true;

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: NestedScrollView(
        headerSliverBuilder: (BuildContext context, bool innerBoxIsScrolled) {
          return <Widget>[
            SliverAppBar(
              expandedHeight: 250,
              pinned: true,
              flexibleSpace: LayoutBuilder(
                builder: (BuildContext context, BoxConstraints constraints) {
                  if (constraints.biggest.height -
                          MediaQuery.of(context).padding.top ==
                      kToolbarHeight) {
                    _headerOpen = false;
                  } else {
                    _headerOpen = true;
                  }
                  return FlexibleSpaceBar(
                    title: Text(_headerOpen.toString()),
                  );
                },
              ),
            )
          ];
        },
        body: Stack(
          children: [
            ListView.builder(
              itemCount: 100,
              itemBuilder: (context, index) {
                return Text("Index is " + index.toString());
              },
            ),
            Positioned(
              left: 0,
              right: 0,
              bottom: _headerOpen ? 28 : -500,
              child: SafeArea(
                bottom: true,
                child: CustomNavigationBar(
                 // implement of my bottom bar
                ),
              ),
            )
          ],
        ),
      ),
    );
  }
}

我认为这是因为当 SliverAppBat 改变大小时，主 Widget 构建没有更新，但我不知道该怎么做。

【问题讨论】：

标签： flutter

【解决方案1】：

我有点困惑，你想隐藏它还是什么？因为你的标题说你想隐藏它。

如果你想隐藏它，你可以使用visibility 小部件。然后将您的 Position 包装到此

 Visibility(
                  visible: _headerOpen,
                  child: Positioned(
                    left: 0,
                    right: 0,
                    child: SafeArea(
                      bottom: true,
                      child: CustomNavigationBar(
                          // implement of my bottom bar
                          ),
                    ),
                  ),
                );

【讨论】：