使用 BottomNavigationBar 使像素向右溢出答案

【问题标题】：Flutter Pixels Overflow to the Right With BottomNavigationBar使用 BottomNavigationBar 使像素向右溢出
【发布时间】：2023-01-25 03:17:09
【问题描述】：

我正在使用 BottomNavigationBar 并尝试在栏项目图标旁边添加通知编号（例如 facebook）。我想出了下面的方法，它在手机上运行良好，但是在平板电脑上测试时，它生成了“右侧像素溢出”，不明白为什么。问题来自我给图标小部件的 SizedBox 宽度，它为我给的 30 宽度生成 24 像素溢出。

知道为什么以及如何解决吗？

  BottomNavyBar(
                selectedIndex: _currentIndex,
                backgroundColor: const Color.fromARGB(255, 248, 244, 246),
                containerHeight: 50.h,
                onItemSelected: (index) {
                  setState(() {
                               _currentIndex = index;
                               _pageController.jumpToPage(index);
                               });
                                  },
                items: <BottomNavyBarItem>[
                           BottomNavyBarItem()
                           BottomNavyBarItem(
                            title: Text('Reviews'.tr),
                            icon: SizedBox(
                                    width: 30.w, //Here is the part where the problem is
                                    height: 30.h,
                                          ),
                                        ),
                                        activeColor: const Color.fromARGB(
                                            255, 245, 91, 165),
                                        inactiveColor: Colors.grey[850]),

                                  ],
                                ),

【问题讨论】：

我的回答与你的问题无关，但至少你应该编写可读的代码来问别人。
问题中什么是不可读的？你的意思是格式？

标签： flutter

【解决方案1】：

很难破译 Stack 中的所有内容（Sized Box 的孩子溢出）。您的 SizedBox 被堆栈中的一项溢出。问题可能是您的图标及其填充。有分配给图标的内置材料填充。

只需用 FittedBox 将 Stack 中的每个项目包裹起来，尽管这可能会比您想要的更多地缩小内容。

【讨论】：