Question

如何在深色模式下为底部导航栏添加边框颜色

代码：

bottomNavigationBarTheme：

     BottomNavigationBarThemeData(
     
      backgroundColor: Colors.black,
      selectedItemColor: Colors.deepOrangeAccent,
      unselectedItemColor: Colors.grey,
      elevation: 20.0,
      type: BottomNavigationBarType.fixed,
      
    ),

Answer 1

一种方法是在脚手架中添加 bottomNavigationBar，不使用内置的 bottomNavigationBar 参数，而是从主体中添加。如果你只需要一个顶栏，这样的事情就可以工作，例如：

Column(
        mainAxisAlignment: MainAxisAlignment.end,
        children: [
          Container(width: double.maxFinite, height: 4, child: Material(elevation: 20.0, color: Colors.deepOrangeAccent),),
          BottomNavigationBar(
            items: [
              BottomNavigationBarItem(icon: Icon(Icons.home), label: 'Home'),
              BottomNavigationBarItem(icon: Icon(Icons.music_note), label: 'Audio'),
              BottomNavigationBarItem(icon: Icon(Icons.camera_alt), label: 'Camera'),
            ],
          ),
        ],
      ),

此代码只是在底部导航栏的顶部放置了一个橙色三角形。

但是，如果您想更好地控制边框，您可以将 BottomNavigationBar 包装在一个小部件中，如@Muhtar link to post 评论的帖子中所建议的那样。

Answer 2

我解决了问题

代码：

bottomNavigationBar：容器(

           decoration: BoxDecoration(
             border: Border(
               top: BorderSide(
                 color: Colors.grey,
                 style: BorderStyle.solid,
                 width: 1.3

               ),
             ),
          
        ),
          child: BottomNavigationBar(
            currentIndex: cubit.current,
            items: cubit.bottom_nav_items,
            onTap: (value) {
              cubit.changeBottomNavItem(value);
            },
          ),
        ),

暗模式下的 FLUTTER 底部导航栏

2 个答案: