未格式化的 BottomNavigationBar 颤动

Question

我创建了一个简单的底部导航栏，（下面是我的代码）...

bottomNavigationBar: BottomNavigationBar(
    backgroundColor: COLOR_WHITE,
    items: const [
        BottomNavigationBarItem(
        icon: Icon(Icons.account_circle_rounded),
        label: 'Profile',
        ),
        BottomNavigationBarItem(
        label: 'something', icon: Icon(Icons.star)),
   ],
)

...但后来我真的很想点击图标，所以我尝试为其 onPressed() 方法添加一个图标按钮。

bottomNavigationBar: BottomNavigationBar(
     backgroundColor: COLOR_WHITE,
     items: [
          BottomNavigationBarItem(
              icon: IconButton(
                    icon: const Icon(Icons.account_circle_rounded),
                    onPressed: () {
                      Navigator.of(context).pushReplacement(
                      MaterialPageRoute(builder: (context) => ProfileScreen(userID :widget.userID)),
                    );
                    },
                  ), 
              label: "Profile"
                ),

          BottomNavigationBarItem(
              label: 'something', icon: Icon(Icons.star)),
            ],
),

它变得很丑陋，我希望周围的填充和大小保持不变，但由于我没有添加代码来更改这些功能，所以我一开始就不明白为什么会这样。有人可以帮我解决吗？谢谢！！

Answer 1

BottomNavigationBar 有一个 onTap 方法可用于触发回调，因此您不需要 IconButton。 onTap 为您提供所点击项目的索引，以便您可以将其映射到适当的页面。您还可以更新 BottomNavigatorBar 上的 currentIndex 属性以突出显示相应的项目。

请参阅 BottomNavigationBar 的文档以获得一个很好的示例：https://api.flutter.dev/flutter/material/BottomNavigationBar-class.html

Answer 2

你犯的错误是在第一个 BottomNavigationBarItem 中你有 IconButton 小部件，在第二个 Icon 小部件中......默认情况下它们具有不同的样式（flutter 开发人员为填充大小等提供了默认值）......所以下面的代码将工作。我在本地实施并进行了检查..

BottomNavigationBar(
                backgroundColor: Colors.white,
                items: [
                  BottomNavigationBarItem(
                      icon: IconButton(
                        icon: const Icon(Icons.account_circle_rounded),
                        onPressed: () {
                          Navigator.of(context).pushReplacement(
                      MaterialPageRoute(builder: (context) => 
                      ProfileScreen(userID:widget.userID)),
                    );
                        },[enter image description here][1]
                      ),
                      label: "Profile"
                  ),
                   BottomNavigationBarItem(
                      label: 'something', icon: IconButton(
                    icon: const Icon(Icons.star),
                    onPressed: () {
                    },
                  ),),
                ],
              )

enter image description here

未格式化的 BottomNavigationBar 颤动

Unformatted BottomNavigationBar Flutter

dart

flutter

android-navigation-bar

flutter-layout