0

我正在制作一个应用程序，其中活动的底部导航栏项需要具有与非活动项不同的背景。我尝试将其包装到activeicon标题中并将标签保留为空。但是，我一直在下面有一条线，它与我的背景颜色不同activeicon。我尝试将它放在 a 中SizedBox或将其设置为，height: double.infinity但它不起作用。我需要使用 Cupertino 选项卡栏，以便我的导航栏保持不变。我想删除活动项目下方的行，使其看起来更加无缝。

这是我的导航栏的当前状态： 导航栏

我希望你能给我一个解决方案。我已经花了数周时间试图解决它。

这是我的代码

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))),
        ],
      ),
    ),
  );
}
4

2 回答 2

0

找不到任何参数来处理这种情况，似乎它是在源代码上硬编码的。您可以Transform使用bottomNavigationBar. 您也可以bottomNavigationBar使用Row,Column和使用活动索引创建自定义样式。

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(...
于 2021-11-26T10:28:06.403 回答
0

我认为这不可能改变选定的背景颜色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,
      ),
    );
  }
}

您的结果屏幕->图片

于 2021-11-26T11:44:08.180 回答