Question

我想在BottomNavigationBar的顶部添加彩色的BorderSide。

我可以使用自定义BottomAppBar来实现它，但是对我的设计来说不方便，因为它放错了我的floatActionButtonLocation.centerDocked，因此我需要坚持使用BottomNavigationBar。

感谢您找到任何解决方法的帮助。

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'),
          ),
        ],
      ),
    );
  }
}

当前输出：

NodeList

我的目标：

Answer 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'),
            ),
          ],
        ),
      ),
    );

输出：

Answer 2

您可以将BottomNavigationBar作为Container的孩子。

像这样将topBorder添加到Container。

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

希望它可以解决您的问题

BorderSide颜色到BottomNavigationBar？

2 个答案: