使用底部导航栏在 Web 视图中导航

Question

我在 Flutter 应用中使用 Flutter Web View Plugin。在我的应用程序中，webview 运行良好，并使用设备后退按钮导航到后退页面（当然是在 Android 上）。我添加了一个 BottomNavigation 栏，让用户可以使用导航栏在 webview 中导航。

网络视图Class:

class webView extends StatelessWidget {
  final String url;
  final String title;
  webView({Key key, @required this.url, @required this.title}) : super(key: key);
  @override
  Widget build(BuildContext context) {

    return new MaterialApp(
      theme
        : new ThemeData(
        primaryColor: Color.fromRGBO(58, 66, 86, 1.0), fontFamily: 'Raleway'),
      routes: {
        "/": (_) => new WebviewScaffold(
          url: url,
          appBar: new AppBar(
            title: Text(title),
            actions: <Widget>[
              IconButton(
                icon: Icon(Icons.close),
                onPressed: () => Navigator.of(context).pop(null),
              )
            ],
          ),
          withJavascript: true,
          withLocalStorage: true,
          appCacheEnabled: true,
          hidden: true,
          initialChild: Container(
            child: const Center(
              child: CircularProgressIndicator(),
            ),
          ),
          bottomNavigationBar: bmnav.BottomNav(
            index: 0,
            labelStyle: bmnav.LabelStyle(visible: false),
            items: [
              bmnav.BottomNavItem(Icons.arrow_back_ios),
              bmnav.BottomNavItem(Icons.home),
              bmnav.BottomNavItem(Icons.arrow_forward_ios)
            ],
          ),
        )
      },
    );

  }
}

如何使用此导航栏在 webview 中导航。是否有任何内置功能可供使用？请帮忙。

Answer 1

为导航初始化 index。

1. int currentTab = 0;

2. 更新 bottomNavigationBar :

bottomNavigationBar: bmnav.BottomNav(
    index: currentTab,
    onTap: (i) {
      splitScreen(i);
    },
    labelStyle: bmnav.LabelStyle(showOnSelect: true),
    items: [
      bmnav.BottomNavItem(Icons.arrow_back_ios, label: 'Back'),
      bmnav.BottomNavItem(Icons.refresh, label: 'Reload'),
      bmnav.BottomNavItem(Icons.arrow_forward_ios, label: 'Forward')
    ],
),

3. 最后，阅读 index 并浏览 webView:

void _splitScreen(int i) {
    switch (i) {
      case 0:
        flutterWebviewPlugin.goBack();
        break;
      case 1:
        flutterWebviewPlugin.reload();
        break;
      case 2:
        flutterWebviewPlugin.goForward();
        break;
    }
  }

您可以在此处阅读 documentation。

使用底部导航栏在 Web 视图中导航

Navigate through web view with bottom navigation bar

android

android-webview

dart

flutter