Flutter BottomNavigationBar添加switch后选中项颜色不生效问题

你在BottomNavigationBar的onTap回调里只实现了加载不同URL的逻辑，但没有更新_selectedIndex的状态。BottomNavigationBar的选中状态依赖currentIndex，而currentIndex绑定的是_selectedIndex，只有通过setState更新这个变量，Flutter才会重新渲染导航栏，切换选中项的颜色。

有两种简单的修复方式，选一种即可：

方式一：在onTap回调里直接更新_selectedIndex #

修改BottomNavigationBar的onTap部分，在URL加载逻辑前后加入setState更新选中索引：

onTap: (index) {
  setState(() {
    _selectedIndex = index;
  });
  switch (index) {
    case 0:
      webViewController?.loadUrl(
          urlRequest: URLRequest(url: url));
      break;
    case 1:
      webViewController?.loadUrl(
          urlRequest: URLRequest(url: url2));
      break;
    case 2:  
      webViewController?.loadUrl(
          urlRequest: URLRequest(url: url3));
      break;
  }
},

方式二：复用已有的_onItemTapped方法并扩展逻辑 #

既然你已经定义了_onItemTapped方法，可以在这个方法里同时处理索引更新和URL加载，然后在onTap里直接调用它：

// 修改_onItemTapped方法
void _onItemTapped(int index) {
  setState(() {
    _selectedIndex = index;
  });
  // 加入URL加载逻辑
  switch (index) {
    case 0:
      webViewController?.loadUrl(
          urlRequest: URLRequest(url: url));
      break;
    case 1:
      webViewController?.loadUrl(
          urlRequest: URLRequest(url: url2));
      break;
    case 2:  
      webViewController?.loadUrl(
          urlRequest: URLRequest(url: url3));
      break;
  }
}

// 然后BottomNavigationBar的onTap直接绑定这个方法
onTap: _onItemTapped,

import 'dart:io';
import 'dart:convert';
import 'package:flutter/material.dart';
import 'package:flutter_inappwebview/flutter_inappwebview.dart';

class MyInAppBrowser extends InAppBrowser {
  @override
  Future onBrowserCreated() async {
    print("Browser Created!");
  }

  @override
  Future onLoadStart(url) async {
    print("Started $url");
  }

  @override
  Future onLoadStop(url) async {
    print("Stopped $url");
  }

  @override
  void onLoadError(url, code, message) {
    print("Can't load $url.. Error: $message");
  }

  @override
  void onProgressChanged(progress) {
    print("Progress: $progress");
  }

  @override
  void onExit() {
    print("Browser closed!");
  }
}

class MyAppbrowser extends StatefulWidget {
  final MyInAppBrowser browser = new MyInAppBrowser();

  @override
  _MyAppState createState() => new _MyAppState();
}

class _MyAppState extends State<MyAppbrowser> {
  InAppWebViewController? webViewController;
  var url = Uri.parse("https://gmail.com");
  var url2 = Uri.parse("https://bing.com");
  var url3 = Uri.parse("https://Facebook.com");
  int _selectedIndex = 0;
  bool isLoading = true;
  var options = InAppBrowserClassOptions(
      crossPlatform: InAppBrowserOptions(hideUrlBar: false),
      inAppWebViewGroupOptions: InAppWebViewGroupOptions(
        ios: IOSInAppWebViewOptions(),
          crossPlatform: InAppWebViewOptions(javaScriptEnabled: true)));

  void _onItemTapped(int index) {
    setState(() {
      _selectedIndex = index;
    });
    // 添加URL加载逻辑
    switch (index) {
      case 0:
        webViewController?.loadUrl(
            urlRequest: URLRequest(url: url));
        break;
      case 1:
        webViewController?.loadUrl(
            urlRequest: URLRequest(url: url2));
        break;
      case 2:  
        webViewController?.loadUrl(
            urlRequest: URLRequest(url: url3));
        break;
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(toolbarHeight: 10),
      body: Stack(
          children:[
          InAppWebView(
            initialUrlRequest:URLRequest(
                url: Uri.parse("https://google.com"),
            ),
            onWebViewCreated: (controller) {
              webViewController = controller;
            },
          )
        ]
      ),
      bottomNavigationBar: BottomNavigationBar(
        currentIndex: _selectedIndex,
        backgroundColor: Colors.white,
        items: const <BottomNavigationBarItem>[
          BottomNavigationBarItem(
            icon: Icon(Icons.call),
            label: "home",
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.camera),
            label: "camera",
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.chat),
            label: "chat",
          ),
        ],
        type: BottomNavigationBarType.fixed,
        unselectedItemColor: Colors.grey,
        selectedItemColor: Colors.black,
        // 直接绑定_onItemTapped方法
        onTap: _onItemTapped,
      ),
    );
  }
}

内容的提问来源于stack exchange，提问作者Alessandro