Question

我正在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。有内置功能可以使用吗？请帮忙。

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视图

1 个答案: