0

[这里是截图：https://i.stack.imgur.com/V2BnH.png][1]

我不是 Flutter 方面的专家，所以我用 5 个图标创建了这个底部导航栏。问题是，不知何故，最左侧的第一个图标比其他图标稍大。特别是最左侧第一个图标下方的“开始”文本比其他图标大一点。我真的无法解释为什么？到目前为止，我尝试的是添加BottomNavigationBarType.fixed但这并没有解决问题。我该怎么办？太感谢了！！

  HomePage({Key key}) : super(key: key);
  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  PageController _pageController = PageController();
  List<Widget> _screens = [
    WallboxPage(),
    RechnerPage(),
    StartPage(),
    MapsPage(),
    TimerPage()
  ];
  int _selectedIndex = 0;
  void _onPageChanged(int index) {
    setState(
      () {
        _selectedIndex = index;
      },
    );
  }

  void _onItemTapped(int selectedIndex) {
    _pageController.jumpToPage(selectedIndex);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: PageView(
        controller: _pageController,
        children: _screens,
        onPageChanged: _onPageChanged,
        physics: NeverScrollableScrollPhysics(),
      ),
      bottomNavigationBar: BottomNavigationBar(
        //showUnselectedLabels: false,
        //showSelectedLabels: false,

        type: BottomNavigationBarType
            .fixed, //das muss dazu, damit mehr als 5 Items möglich.
        backgroundColor: Color(0xffECECEB),
        onTap: _onItemTapped,
        //unselectedFontSize: 12,
        //selectedFontSize: 12,
        items: [
          BottomNavigationBarItem(
            icon: Icon(Icons.home,
                color: _selectedIndex == 0
                    ? Color(0xffF6BE03)
                    : Color(0xffB4B4B3),
                size: 25),
            title: Text(
              'Start',
              style: TextStyle(
                  color: _selectedIndex == 0
                      ? Color(0xffF6BE03)
                      : Color(0xffB4B4B3),
                  fontSize: 11),
            ),
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.directions_car_rounded,
                color:
                    _selectedIndex == 1 ? Color(0xffF6BE03) : Color(0xffB4B4B3),
                size: 25),
            title: Text(
              'Portal',
              style: TextStyle(
                  color: _selectedIndex == 1
                      ? Color(0xffF6BE03)
                      : Color(0xffB4B4B3),
                  fontSize: 11),
            ),
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.euro_rounded,
                color:
                    _selectedIndex == 2 ? Color(0xffF6BE03) : Color(0xffB4B4B3),
                size: 25),
            title: Text(
              'Förderungen',
              style: TextStyle(
                  color: _selectedIndex == 2
                      ? Color(0xffF6BE03)
                      : Color(0xffB4B4B3),
                  fontSize: 11),
            ),
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.map,
                color:
                    _selectedIndex == 3 ? Color(0xffF6BE03) : Color(0xffB4B4B3),
                size: 25),
            title: Text(
              'Karte',
              style: TextStyle(
                  color: _selectedIndex == 3
                      ? Color(0xffF6BE03)
                      : Color(0xffB4B4B3),
                  fontSize: 11),
            ),
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.timer,
                color:
                    _selectedIndex == 4 ? Color(0xffF6BE03) : Color(0xffB4B4B3),
                size: 25),
            title: Text(
              'Ladezeit',
              style: TextStyle(
                  color: _selectedIndex == 4
                      ? Color(0xffF6BE03)
                      : Color(0xffB4B4B3),
                  fontSize: 11),
            ),
          ),
        ],
      ),
    );
  }
}```


  [1]: https://i.stack.imgur.com/V2BnH.png
4

1 回答 1

0

在 BottonNavigationBar 中使用 unselectedFontSize, selectedFontSize, currentIndex: _selectedIndex

得到你期望的结果

例子

在此处输入链接描述

于 2021-05-04T12:28:29.747 回答