带有 bottomnavigationbar 的 flutter webview 导航

Question

我想在我的应用程序中做一个底部导航栏，这样用户就可以在网站的所有页面中导航！我已经遵循了很多教程，但现在我被卡住了，我真的不明白为什么我的代码不起作用.. 我对 flutter 的世界有点陌生，所以这可能是一个愚蠢的错误 x) !

//Bottom navigation bar
class navigationBar extends StatelessWidget{
  navigationBar(this._selectedIndex,this.callback);
  final int _selectedIndex;
  final Function(int) callback;

  @override
  Widget build(BuildContext context) {
    return BottomNavigationBar(
        items: const <BottomNavigationBarItem>[
          BottomNavigationBarItem(
            icon:Icon(Icons.home),
            label: "accueil",
          ),
          BottomNavigationBarItem(
            icon:Icon(Icons.business),
            label: "exemple",
          ),
        ],
      currentIndex: _selectedIndex,
      selectedItemColor: Colors.cyan,
      onTap: callback,
    );
  }
//The View that we are controlling
class FenetrePrincipale extends StatefulWidget{
  const FenetrePrincipale({Key? key}) : super(key:key);

  @override
  State<StatefulWidget> createState() => _FenetrePrincipale();

}
//The state of the view that contains the webviewController (i was thinking my error was from a non-reload problem) 
class _FenetrePrincipale extends State<FenetrePrincipale>{
  int _selectedIndex = 0;
  WebViewController? _controller = null;

  void _onItemTapped(int index){
    setState(() {
      _selectedIndex = index;
    });

  }

  @override
  Widget build(BuildContext context) {
    print("---------------------------------");
    print("Dans le builder de fenetre");
    print(_selectedIndex);
    print(listBuilder().elementAt(_selectedIndex).initialUrl);
    return Scaffold(
        bottomNavigationBar: BottomNavigationBar(
          items: const <BottomNavigationBarItem>[
            BottomNavigationBarItem(
              icon:Icon(Icons.home),
              label: "Accueil",
            ),
            BottomNavigationBarItem(
              icon:Icon(Icons.business),
              label: "Exemple",
            ),
          ],
          currentIndex: _selectedIndex,
          selectedItemColor: Colors.cyan,
          onTap: _onItemTapped,
        ),
        appBar: AppBar(
          backgroundColor: Color.fromRGBO(255, 255, 255, 01),
          toolbarHeight: 5,
          elevation:0,
        ),
        //body : PageBuilder(_widgetOptions.elementAt(_selectedIndex)), //A check
        body : listBuilder().elementAt(_selectedIndex),
    );
  }
//Here i have my WebView list, that i get correctly ! Because print(listBuilder().elementAt(_selectedIndex).initialUrl);
//Is giving me the right url !
  List<WebView> listBuilder(){
    List<WebView> _widgetOptions = <WebView>[
      WebView(
        initialUrl: "https://jlcommunication.fr/",
        javascriptMode: JavascriptMode.unrestricted,
        onWebViewCreated: (controller){
          _controller = controller;
        },
        //"url1",
        //style: optionStyle,
      ),
      WebView(
        initialUrl: "https://climlab.fr/",
        onWebViewCreated:  (controller){
          _controller = controller;
        },
        javascriptMode: JavascriptMode.unrestricted,
        //style : optionStyle,
      ),
    ];
    if(_controller != null){
      _controller!.clearCache();
      print("on est dans le truc du controller");
      _controller!.reload();
    }
    return _widgetOptions;
  }
}

希望你能帮助我，谢谢你们！祝你有美好的一天！

Answer 1

目前看来Flutter中2个webview不能有不同的内容，但是可以使用单个webview，使用controller改变当前正在查看的站点url .

class _FenetrePrincipale extends State<FenetrePrincipale> {
  int selectedIndex = 0;
  final List<String> webviewList = [
    "https://google.com",
    "https://yahoo.com",
    "https://baidu.com"
  ];
  late WebViewController controller;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      bottomNavigationBar: BottomNavigationBar(
        items: const <BottomNavigationBarItem>[
          BottomNavigationBarItem(
            icon: Icon(Icons.home),
            label: "Accueil",
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.business),
            label: "Exemple",
          ),
        ],
        currentIndex: selectedIndex,
        selectedItemColor: Colors.cyan,
        onTap: (i) {
          controller.loadUrl(webviewList[i]);
          setState(() => selectedIndex = i);
        },
      ),
      appBar: AppBar(
        backgroundColor: const Color.fromRGBO(255, 255, 255, 01),
        toolbarHeight: 5,
        elevation: 0,
      ),
      body: WebView(
        initialUrl: webviewList[selectedIndex],
        onWebViewCreated: (c) {
          controller = c;
        },
      ),
    );
  }
}

上面的代码应该可以工作，不需要创建另一个导航栏 class（您还应该注意，建议使用大驼峰命名 class，如here).

带有 bottomnavigationbar 的 flutter webview 导航

flutter webview navigation with bottomnavigationbar

android

flutter

flutterwebviewplugin

flutter-bottomnavigation