dart - Flutter/flutter_webview_plugin => 在向下/向上滚动时隐藏/显示 AppBar + BottomNavigationBar

Question

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

据我所知，我不能使用 Sliver，因为 “警告:webview 没有集成在 widget 树中，它是 flutter view 之上的原生 View 。你将无法使用 snackbars、dialogs ...”

如果有人能帮助我，那就太好了。 提前致谢!

Answer 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 中的构建如下所示:

@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,
  );
}
}