更改 Cupertino 選項卡欄中活動按鈕導航欄項目的背景顏色（顫振）

Question

我正在制作一個應用程序，其中活動的底部導航欄項需要具有與非活動項不同的背景。 我嘗試將其包裝到activeicon header 並將 label 保留為 null。 但是，我一直在下面有一條線，它與我在activeicon中的背景顏色不同。 我嘗試將它放在SizedBox中或將其設置為height: double.infinity但它不起作用。 我需要使用 Cupertino 選項卡欄，以便我的導航欄保持不變。 我想刪除活動項目下方的行，使其看起來更加無縫。

這是我導航欄的當前 state：

我希望你能給我一個解決方案。 我已經花了數周時間試圖解決它。

這是我的代碼

class Nav extends StatelessWidget {
  const Nav({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return CupertinoTabScaffold(
      tabBar: CupertinoTabBar(
        backgroundColor: CupertinoTheme.of(context).primaryColor,
        activeColor: Colors.black,
        inactiveColor: Colors.white,
        iconSize: 25,
        items: <BottomNavigationBarItem>[
          _bottomNavigationBarItem(Icons.track_changes, "Track", context),
          _bottomNavigationBarItem(Icons.add_location_sharp, "Create", context),
          _bottomNavigationBarItem(Icons.map_rounded, "Travels", context),
          _bottomNavigationBarItem(Icons.settings, "Settings", context)
        ],
      ),
      tabBuilder: (context, index) {
        switch (index) {
          case 0:
            return CupertinoTabView(builder: (context) {
              return const CupertinoPageScaffold(
                child: TrackPage(),
              );
            });
          case 1:
            return CupertinoTabView(builder: (context) {
              return const CupertinoPageScaffold(
                child: CreatePage(),
              );
            });
          case 2:
            return CupertinoTabView(builder: (context) {
              return const CupertinoPageScaffold(
                child: TravelsPage(),
              );
            });
          case 3:
            return CupertinoTabView(builder: (context) {
              return const CupertinoPageScaffold(
                child: SettingsPage(),
              );
            });
          default:
            return CupertinoTabView(builder: (context) {
              return const CupertinoPageScaffold(
                child: CreatePage(),
              );
            });
        }
      },
    );
  }
}

BottomNavigationBarItem _bottomNavigationBarItem(
    IconData icon, String label, BuildContext context) {
  return BottomNavigationBarItem(
    activeIcon: Container(
      width: double.infinity,
      height: double.infinity,
      color: CupertinoTheme.of(context).primaryContrastingColor,
      padding: const EdgeInsets.only(top: 6.0),
      child: Column(
        children: [
          Expanded(
            child: Icon(icon, color: Colors.black),
          ),
          const SizedBox(height:10),
          Expanded(
            child:
              Text(label, style: const TextStyle(color: Colors.black, fontSize: 12))),
        ],
      )),
    icon: Padding(
      padding: const EdgeInsets.only(top: 6.0),
      child: Column(
        children: [
          Expanded(
            child: Icon(icon),
          ),
          const SizedBox(height:10),
          Expanded(
            child:
              Text(label, style: const TextStyle( fontSize: 12))),
        ],
      ),
    ),
  );
}

Answer 1

找不到任何參數來處理這種情況，似乎它是在源代碼上硬編碼的。 您可以使用Transform來操作bottomNavigationBar 。 您還可以使用Row 、 Column創建自定義bottomNavigationBar並使用活動索引進行樣式設置。

class Nav extends StatelessWidget {
  const Nav({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return Transform.translate( //<- this
      offset: const Offset(0, 4),
      child: CupertinoTabScaffold(...

Answer 2

我認為這不可能改變選定的BottomNavigationBar的背景顏色

在此處參考底部導航欄，根據需要更改顏色

在 Dartpad 上嘗試以下代碼

試試這個答案希望它對你有幫助。

import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

/// This is the main application widget.
class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  static const String _title = 'Flutter Code Sample';

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      debugShowCheckedModeBanner: false,
      title: _title,
      home: MyStatefulWidget(),
    );
  }
}

class MyStatefulWidget extends StatefulWidget {
  const MyStatefulWidget({Key? key}) : super(key: key);

  @override
  State<MyStatefulWidget> createState() => _MyStatefulWidgetState();
}

class _MyStatefulWidgetState extends State<MyStatefulWidget> {
  final selectedItemColor = Colors.white;
  final unSelectedItemColor = Colors.white30;
  final selectedBackGroundColor = Colors.green;
  final unselectedBackGroundColor = Colors.blue;
  int selectedIndex = 0;
  static const TextStyle optionStyle =
      TextStyle(fontSize: 30, fontWeight: FontWeight.bold);
  static const List<Widget> _widgetOptions = <Widget>[
    Text(
      'Index 0: Track',
      style: optionStyle,
    ),
    Text(
      'Index 1: Create',
      style: optionStyle,
    ),
    Text(
      'Index 2: Travel',
      style: optionStyle,
    ),
    Text(
      'Index 3: Setting',
      style: optionStyle,
    ),
  ];
  Color _getBgColor(int index) => selectedIndex == index
      ? selectedBackGroundColor
      : unselectedBackGroundColor;

  Color _getItemColor(int index) =>
      selectedIndex == index ? selectedItemColor : unSelectedItemColor;

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

  Widget _buildIcon(IconData iconData, String text, int index) => Container(
        width: double.infinity,
        height: kBottomNavigationBarHeight,
        child: Material(
          color: _getBgColor(index),
          child: InkWell(
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                Icon(iconData),
                Text(
                  text,
                  style: TextStyle(
                    fontSize: 12,
                    color: _getItemColor(index),
                  ),
                ),
              ],
            ),
            onTap: () => _onItemTapped(index),
          ),
        ),
      );
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('BottomNavigationBar Sample'),
      ),
      body: Center(
        child: _widgetOptions.elementAt(selectedIndex),
      ),
      bottomNavigationBar: BottomNavigationBar(
        selectedFontSize: 0,
        items: <BottomNavigationBarItem>[
          BottomNavigationBarItem(
            icon: _buildIcon(
              Icons.track_changes,
              'Track',
              0,
            ),
            title: SizedBox(),
          ),
          BottomNavigationBarItem(
            icon: _buildIcon(
              Icons.add_location_sharp,
              'Create',
              1,
            ),
            title: SizedBox(),
          ),
          BottomNavigationBarItem(
            icon: _buildIcon(
              Icons.map_rounded,
              'Travel',
              2,
            ),
            title: SizedBox(),
          ),
          BottomNavigationBarItem(
            icon: _buildIcon(
              Icons.settings,
              'Setting',
              3,
            ),
            title: SizedBox(),
          ),
        ],
        currentIndex: selectedIndex,
        selectedItemColor: selectedItemColor,
        unselectedItemColor: unSelectedItemColor,
      ),
    );
  }
}

您的結果屏幕->