Question

我正在构建我的第一个Flutter应用。该应用程序是一个BottomNavigationBar-每个选项卡都需要加载不同的URL。世界上最简单的应用程序。问题是由于某种原因，webview_flutter不会重新加载该URL，它存储在initialUrl上

有什么建议吗？谢谢！

import 'package:flutter/material.dart';
import 'package:webview_flutter/webview_flutter.dart';
import 'dart:async';
import 'package:flutter/foundation.dart';
import 'dart:developer';

const String _tabOneUrl = 'https://stackoverflow.com/';
const String _tabTwoUrl = 'https://www.youtube.com/';
const String _tabThreeUrl = 'https://www.google.com/';
const String _tabFourUrl = 'https://en.wikipedia.org/wiki/Kraken';

void main() => runApp(new MaterialApp(
      title: 'MY FIRST APP',
      home: new LoadWebView(),
    ));

class TabObject {
  final int index;
  final Text title;
  final String url;
  final Icon icon;

  const TabObject({this.index, this.title, this.url, this.icon});
}

const List<TabObject> tabsList = <TabObject>[
  const TabObject(
      index: 0,
      title: const Text('Page 1'),
      url: _tabOneUrl,
      icon: const Icon(Icons.looks_one)),
  const TabObject(
      index: 1,
      title: const Text('Page 2'),
      url: _tabTwoUrl,
      icon: const Icon(Icons.looks_two)),
  const TabObject(
      index: 2,
      title: const Text('Page 3'),
      url: _tabThreeUrl,
      icon: const Icon(Icons.looks_3)),
  const TabObject(
      index: 3,
      title: const Text('Page 4'),
      url: _tabFourUrl,
      icon: const Icon(Icons.looks_4)),
  const TabObject(
      index: 4,
      title: const Text('Page 5'),
      url: _tabThreeUrl,
      icon: const Icon(Icons.looks_5))
];

class LoadWebView extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return new LoadWebViewState();
  }
}

class LoadWebViewState extends State<LoadWebView> {
  int _bottomNavBarIndex = 0;
  TabObject _tabObject = tabsList[0];
  bool _isFromInit = true;

  Completer<WebViewController> _controller = Completer<WebViewController>();



  void _selectedTab(TabObject tabObject) {
    setState(() {
      _isFromInit = false;
      _bottomNavBarIndex = tabObject.index;
      _tabObject = tabObject;
    });
  }

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        title: new Text('Web Nail'),
        actions: <Widget>[],
      ),

      body: new WebViewClass(tabObject: _tabObject, controller: _controller,isFromInit:_isFromInit),
      bottomNavigationBar: new BottomNavigationBar(
        currentIndex: _bottomNavBarIndex,
        type: BottomNavigationBarType.fixed,
        onTap: (int index) {
          setState(() {
            _selectedTab(tabsList[index]);
          });
        },
        items: [
          new BottomNavigationBarItem(
            icon: tabsList[0].icon,
            title: tabsList[0].title,
          ),
          new BottomNavigationBarItem(
            icon: tabsList[1].icon,
            title: tabsList[1].title,
          ),
          new BottomNavigationBarItem(
            icon: tabsList[2].icon,
            title: tabsList[2].title,
          ),
          new BottomNavigationBarItem(
            icon: tabsList[3].icon,
            title: tabsList[3].title,
          ),
          new BottomNavigationBarItem(
            icon: tabsList[4].icon,
            title: tabsList[4].title,
          ),
        ],
      ),
    );
  }
}

class WebViewClass extends StatelessWidget {
  final TabObject tabObject;
  final Completer<WebViewController> controller;
  final bool isFromInit;

  WebViewClass({this.tabObject, this.controller,this.isFromInit});

  @override
  Widget build(BuildContext context) {
    return new WebView(
        initialUrl: tabObject.url,
        javascriptMode: JavascriptMode.unrestricted,
        onWebViewCreated: (WebViewController webViewController) {
          controller.complete(webViewController);
        });
  }
}

有没有一种方法可以在点击BottomNavigationBar之后强制重新创建Web视图？ Flutter是否足够成熟，可以处理这个简单的应用程序？

Answer 1

尝试将密钥添加到WebViewClass

WebViewClass({Key key, this.tabObject, this.controller,this.isFromInit}) : super(key: key);

然后在构建中：

body: new WebViewClass(key: ObjectKey(_tabObject.index), tabObject: _tabObject, controller: _controller,isFromInit:_isFromInit),

此外，在解决此问题后，您应该将状态下移到WebViewClass中-在整个MaterialApp上调用setState会重新构建它，这会使您的应用变慢。

Flutter-onTap时，WebView webview_flutter和BottomNavigationBar不会刷新

1 个答案: