分享
三行代码  ›  专栏  ›  技术社区  ›  Texv

边框颜色到底部导航栏?

  •  1
  • Texv  · 技术社区  · 1 周前

    我想在底部导航栏的顶部添加一个彩色边框。

    我可以使用自定义的BottomAppBar来实现它,但它不方便我的设计,因为它将我的浮动ActionButtonLocation.centerDocked操作按钮,所以我需要坚持使用底部导航栏。

    任何帮助找到解决办法的帮助都是值得感谢的。

    import 'package:flutter/material.dart';
    
    class BottomNavTest extends StatefulWidget {
      @override
      _BottomNavTestState createState() => _BottomNavTestState();
    }
    
    class _BottomNavTestState extends State<BottomNavTest> {
      @override
      Widget build(BuildContext context) {
        return Scaffold(
          backgroundColor: Colors.grey,
          bottomNavigationBar: BottomNavigationBar(
            type: BottomNavigationBarType.fixed,
            backgroundColor: Colors.grey,
            selectedItemColor: Colors.white,
            unselectedItemColor: Colors.black, //
            currentIndex: 0,
            onTap: (index) {
              switch (index) {
                case 0:
                  break;
                case 1:
                  break;
              }
            },
            items: [
              BottomNavigationBarItem(
                icon: Icon(Icons.thumb_up),
                title: Text('good'),
              ),
              BottomNavigationBarItem(
                icon: Icon(Icons.thumb_down),
                title: Text('bad'),
              ),
            ],
          ),
        );
      }
    }
    

    Current Output

    My Goal

    2 回复  |  直到 1 周前
        1
  •  1
  •   jitsm555    1 周前

    把它放在容器里,然后给它加上边框

    Scaffold(
          backgroundColor: Colors.grey,
          bottomNavigationBar: Container(
            decoration: BoxDecoration(
                border: Border.all(color: Colors.white, width: 2)
            ),
            child: BottomNavigationBar(
              type: BottomNavigationBarType.fixed,
              backgroundColor: Colors.grey,
              selectedItemColor: Colors.white,
              unselectedItemColor: Colors.black, 
              currentIndex: 0,
              onTap: (index) {
                switch (index) {
                  case 0:
                    break;
                  case 1:
                    break;
                }
              },
              items: [
                BottomNavigationBarItem(
                  icon: Icon(Icons.thumb_up),
                  title: Text('good'),
                ),
                BottomNavigationBarItem(
                  icon: Icon(Icons.thumb_down),
                  title: Text('bad'),
                ),
              ],
            ),
          ),
        );
    

    输出:

    enter image description here

        2
  •  1
  •   srikanth7785    1 周前

    你可以 BottomNavigationBar Container

    加上 topBorder 集装箱

    decoration: BoxDecoration( border: Border( top: BorderSide( color: Colors.blue, // width: 3.0 --> you can set a custom width too! ), ), ),