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

Question

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

3

我正在使用WebviewScaffold，它运行良好，但现在我想在向上滚动时隐藏BottomNavigationBar和AppBar，在向下滚动时显示AppBar和BottomNavigationBar，就像Chrome在iOS上工作一样。据我所知，我不能使用Sliver，因为“警告：WebView没有集成到小部件树中，它是在Flutter视图之上的本机视图。您将无法使用snackbars、dialogs等”。希望有人能帮助我。提前感谢！

- bastimm

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

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