使用底部导航栏浏览网页视图答案

【问题标题】：Navigate through web view with bottom navigation bar使用底部导航栏浏览网页视图
【发布时间】：2019-07-18 17:06:44
【问题描述】：

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

WebView 类：

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。有没有内置函数可以使用？请帮忙。

【问题讨论】：

标签： android dart flutter android-webview

【解决方案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。

【讨论】：