Flutter 底部導航欄沒有改變顏色選擇如果放一個開關

Question

我在 dart 中有此代碼，用於 flutter 中的應用程序，實際上問題是在導航欄中，當我單擊圖標時它不會改變顏色，但只有當我放置開關時，如果我像這樣離開它，它會起作用：

selectedItemColor: Colors.black, onTap: (_onItemTapped)

相反，如果我在 OnTap 上添加開關，它就不再起作用（如您在此處的代碼中所見）

帶有開關的完整代碼在這里：

    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;
    });
  }

  @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,
        onTap: (_onItemTapped) {

          switch (_onItemTapped) {
            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;
          }


        },


      ),
    );
  }
}
   

Answer 1

您需要檢查當前索引是否等於項目索引，更改項目顏色。 嘗試這個：

 BottomNavigationBar(
            currentIndex: _selectedIndex,
            backgroundColor: Colors.white,
            items: const <BottomNavigationBarItem>[
            BottomNavigationBarItem(
              icon: Icon(Icons.call,),
              label: "home",
              backgroundColor: _selectedIndex == 0 ? Colors.red : Colors
                  .white38,
            ),

            BottomNavigationBarItem(
              icon: Icon(Icons.camera,),
              label: "camera",

              backgroundColor: _selectedIndex == 1 ? Colors.green : Colors
                  .white38,
            ),

            BottomNavigationBarItem(
              icon: Icon(Icons.chat,),
              label: "chat",

              backgroundColor: _selectedIndex == 2 ? Colors.yellow : Colors
                  .white38,

            ),
          ),