Flutter BottomNavigationBar：为什么选定的项目会移动其他图标？答案

【问题标题】：Flutter BottomNavigationBar: why selected item shifts other icons?Flutter BottomNavigationBar：为什么选定的项目会移动其他图标？
【发布时间】：2019-10-07 14:03:14
【问题描述】：

我是 Flutter 新手，我创建了一个 BottomNavigationBar 并向其中添加了一些包含 Flutter 图标的 BottomNavigationBarItem。

问题是，当我选择我的 BottomNavigationBar 的一项时，此项会移动其他图标。

这是我的应用程序的屏幕截图：

有没有办法阻止这种转变？

我的代码：

import 'package:flutter/material.dart';

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

  @override
  _NavbarState createState() => _NavbarState();
}

class _NavbarState extends State<Navbar> {

int index = 0;

@override
Widget build(BuildContext context) {
  return BottomNavigationBar(
    iconSize: 30,
    showSelectedLabels: false,
    showUnselectedLabels: false,
    selectedItemColor: Colors.blueGrey,
    unselectedItemColor: Colors.black,
    currentIndex: index,
    onTap: (int selectedIndex) {
      setState(() {
        index = selectedIndex;
      });
    },
    items: [
      BottomNavigationBarItem(
        icon: new Icon(
          Icons.home,
        ),
        title: new Text('Home'),
      ),
      BottomNavigationBarItem(
        icon: new Icon(
          Icons.search,
        ),
        title: new Text('Search'),
      ),
      BottomNavigationBarItem(
        icon: Icon(
          Icons.add,
        ),
        title: Text('Add')
      ),
      BottomNavigationBarItem(
        icon: Icon(
          Icons.favorite,
        ),
        title: Text('Add')
      ),
      BottomNavigationBarItem(
        icon: Icon(
          Icons.account_circle,
        ),
        title: Text('Account')
      )
    ],
  );
}
}

【问题讨论】：

标签： flutter

【解决方案1】：

您可以通过在构造 BottomNavigationBar 时将其 type 参数设置为 BottomNavigationBarType.fixed 来更改此行为。

BottomNavigationBar(
  ...
  type: BottomNavigationBarType.fixed,
  ...
}

根据documentation，默认type 是fixed（如果有四个或更少项目）和shifting（如果有更多项目）。

【讨论】：