Flutter / flutter_webview_plugin => 向下/向上滚动时隐藏/显示 AppBar + BottomNavigationBar答案

【问题标题】：Flutter / flutter_webview_plugin => hide/show AppBar + BottomNavigationBar on Scroll down/upFlutter / flutter_webview_plugin => 向下/向上滚动时隐藏/显示 AppBar + BottomNavigationBar
【发布时间】：2019-06-03 22:30:40
【问题描述】：

我正在使用 WebviewScaffold。它运作良好，但现在我想在向上滚动时隐藏 BottomNavigationBar 和 AppBar。 OnScroll down 它应该显示 AppBar 和 BottomNavigationBar。就像它在 iOS 上的 Chrome 中工作一样。

据我所知，我不能使用 Sliver，因为 “警告：webview 没有集成到小部件树中，它是 Flutter 视图之上的原生视图。您将无法使用snackbars、dialogs ...”

如果有人可以帮助我，那就太好了。提前致谢！

【问题讨论】：

标签： dart flutter

【解决方案1】：

我找到了如何获取 ScrollParams.... 但现在我必须隐藏/显示 AppBar 和 BottomNavigationBar。

@override
void initState() {
// TODO: implement initState
  super.initState();
   _onScrollYChanged =
    flutterWebViewPlugin.onScrollYChanged.listen((double x) {
  if (mounted) {
    print(_onScrollYChanged.toString());

    setState(() {
      if (_posY < x) {
        _showBar = false;
        print("DOWN");
      } else {
        _showBar = true;
        print("UP");
      }
      _posY = x;
      print("Scroll in Y Direction: $x");
    });
  }
});

}

我的 APP 中的 Build 如下所示：

@override
Widget build(BuildContext context) {
  return WebviewScaffold(
    url: "https://www.domain.de",
    appBar: AppBar(
      toolbarOpacity: _showBar ? 1.0 : 0.0,
      title: const Text('Widget WebView'),
      leading: IconButton(
        icon: Icon(Icons.apps),
        onPressed: () {
          flutterWebViewPlugin.goBack();
        },
      ),

    ),
    bottomNavigationBar: BottomAppBar(
      color: Colors.blue,
      child: Row(
        children: <Widget>[
          IconButton(
            icon: const Icon(Icons.arrow_back_ios),
            onPressed: () {
              flutterWebViewPlugin.goBack();
            },
          ),
        ],
      ),
    ),
    withZoom: true,
    withLocalStorage: true,
    hidden: true,
    headers: _HTMLheaders,
  );
}
}

【讨论】：