时间戳

首页 > 解决方案 > 使用底部导航栏浏览网页视图

android - 使用底部导航栏浏览网页视图

问题描述

我在 Flutter 应用程序中使用Flutter Web View Plugin。在我的应用程序中，webview它运行良好并使用设备后退按钮导航到后页（当然在 Android 上）。我添加了一个BottomNavigation栏，让用户通过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使用此导航栏进行导航。有没有内置函数可以使用？请帮忙。

标签： androiddartflutterandroid-webview

解决方案

初始化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;
    }
  }

您可以在此处阅读文档。

推荐阅读